<!--表示一个货位小方格-->
<template>
  <div class="item" :id="currentLoc.locCode">
    <a-tooltip :class="getStyle(currentLoc)" :title="getPropContent(currentLoc)" color="pink" :id="currentLoc.locCode">
      <a-button @click="showDialog(currentLoc)"
        style="font-size: 1px;">{{currentLoc.layer}}-{{currentLoc.col}}</a-button>
    </a-tooltip>
    <palletInfoModel :visible="state.visiblePalletInfo" @close="closeDialog" :palletCode="state.palletCode">
    </palletInfoModel>
  </div>
</template>
<script>
  import {
    defineComponent,
    reactive,
    ref,
    toRaw,
    watch
  } from "vue";
  import palletInfoModel from './palletInfoModel.vue';
  //外置参数
  export default defineComponent({
    props: {
      locInfo: {
        type: Object,
      },
    },
    components: {
      palletInfoModel
    },
    // emit: ["close"],
    setup(props, context) {
      watch(props, (props) => {
        console.log()
        if (props.locInfo) {
          currentLoc.value.locInfo = props.locInfo;
          currentLoc.value.locType = props.locInfo.locType;
          currentLoc.value.locCode = props.locInfo.locCode;
          currentLoc.value.locStatus = props.locInfo.locStatus;
          currentLoc.value.storeStatus = props.locInfo.storeStatus;
          currentLoc.value.trackCode = props.locInfo.trackCode;
          currentLoc.value.row = props.locInfo.row;
          currentLoc.value.col = props.locInfo.col;
          currentLoc.value.layer = props.locInfo.layer;
          currentLoc.value.batchNo = props.locInfo.batchNo;
          currentLoc.value.skuCode = props.locInfo.skuCode;
          currentLoc.value.palletCode = props.locInfo.palletCode;
        }
      });
      const currentLoc = ref({
        locInfo: {},
        locType: "",
        locCode: "",
        locStatus: '',
        storeStatus: '',
        trackCode: '',
        row: 0,
        col: 0,
        layer: 0,
        palletCode: '',
        batchNo: '',
        skuCode: '',
      });
      const state = reactive({
        visiblePalletInfo: false,
        palletCode: ""
      });
      ///将获取到的对象信息格式化
      //根据指定的货位信息获取所需要呈现的货位风格
      const getStyle = function(locInfo) {
        if (locInfo == undefined) return "none-loc";
        let loc_hight_type = "";
        if (locInfo.loc_hight_type == "Short") {
          loc_hight_type = " material-border-8";
        }
        switch (locInfo.locType) {
          case "Point": //货道入口
            return "Point";
          case "Area": //货道
            return "Area";
          case "Station": //站台
            return "Station";
          case "Loc": //货道
            switch (locInfo.storeStatus) { //载货状态
              case "Load": //载货
                return locInfo.storeStatus + "-" + locInfo.locStatus;
              case "Free": //空闲
                return locInfo.storeStatus + "-" + locInfo.locStatus;
              case "DoIn":
                return "DoIn";
              case "DoOut":
                return "DoOut";
              case "Fault":
                return "Fault";
              default:
                return "item";
            }
          default:
            return "item" + loc_hight_type;
        }
      };
      //根据指定的货位信息获取所需要呈现的货位风格
      const getPropContent = function(locInfo) {
        if (locInfo == undefined) return "非货位";
        switch (locInfo.locType) {
          case "Point": //货道入口
            return "货道";
          case "Area": //货道
            return "区域";
          case "Station": //站台
            return "站台";
          case "Loc": //货道
            switch (locInfo.storeStatus) { //载货状态
              case "Load":
              case "Free":
              case "DoIn":
                return getName(locInfo.storeStatus) + "-" + getName(locInfo.locStatus);
              case "DoOut": //移出
              case "Fault": //故障
                return getName(locInfo.locStatus);
              default:
                return "未知";
            }
          default:
            return "item";
        }
      };
      const getName = function(code) {
        switch (code) {
          case "Load":
            return "载货";
          case "Free":
            return "空闲";
          case "DoIn":
            return "移入分配";
          case "DoOut":
            return "移出分配";
          case "Fault":
            return "故障";
          case "Normal":
            return "正常";
          case "NoIn":
            return "禁入";
          case "NoOut":
            return "禁出";
          case "Freeze":
            return "禁出入";
          default:
            return "item";
        }
      }
      //点击货位方格跳出弹窗
      const showDialog = function(locInfo) {
        console.log("showDialog", locInfo)
        if (locInfo == undefined) return;
        var palletCode = locInfo.palletCode;
        console.log("palletCode", palletCode)
        if (palletCode.length > 0) {
          //展示弹窗
          state.palletCode = palletCode;
          state.visiblePalletInfo = true;
        }
      }
      //点击货位方格跳出弹窗
      const closeDialog = function() {
        state.palletCode = "";
        state.visiblePalletInfo = false;
      }
      return {
        currentLoc,
        getStyle,
        getPropContent,
        showDialog,
        closeDialog,
        getName,
        state
      };
    },
  });
</script>
<style>
  @import ".././index.less";

  :deep(#components-a-tooltip-demo-color) .ant-btn {
    margin-right: 18px;
    margin-bottom: 18px;
  }

    /*指定节点下的按钮大小*/
    .wrapper_example .ant-btn {
      width: 10px;
      min-height: 10px;
    }

    .wrapper_example .ant-btn:hover {
      width: 10px;
      color: aliceblue;
      border-color: aliceblue;
    }

    .wrapper_example-2 .ant-btn {
      width: 10px;
      min-height: 10px;
    }

    .wrapper_example-2 .ant-btn:hover {
      width: 10px;
      color: aliceblue;
      border-color: aliceblue;
    }

    /*指定货位视图中的按钮大小*/
    /*指定节点下的按钮大小*/
    .item .ant-btn {
      width: 10px;
      min-height: 10px;
    }

    .item .ant-btn:hover {
      width: 10px;
      color: aliceblue;
      border-color: aliceblue;
    }
  </style>
