<!--堆垛机库货位视图-->
<template>
  <div class="autoWrapper" :style="getWapperStyle(trackInfo.maxLayer+1,trackInfo.maxColumn+1)" id="wrapper">
    <!--头部用于标注列的小方格-->
    <div class="item_title" id="item_title"></div>
    <template v-for="currentCol in trackInfo.maxColumn" :key="currentCol">
      <div class="item_title" id="item_title">{{ currentCol }}列</div>
    </template>
    <!--货位信息-->
    <template v-if="trackInfo.trackLocs && trackInfo.trackLocs.length>0 ">
      <template v-for="currentLayer in trackInfo.maxLayer" :key="currentLayer">
        <div class="item_title">{{ trackInfo.maxLayer - currentLayer + 1 }}层</div>
        <template v-for="currentCol in trackInfo.maxColumn" :key="currentCol">
          <locItem :locInfo='getCurrentLocFromList(currentCol, currentLayer)'></locItem>
          <!-- <div class="item">
            <a-tooltip :title="getPropContent(currentCol, currentLayer)" class="" color="pink">
              <a-button :class="getStyle(currentCol, currentLayer)"
                @click="showDialog(currentCol, currentLayer)">{{currentLayer}}-{{currentCol}}</a-button>
            </a-tooltip>
          </div> -->
        </template>
      </template>
    </template>
    <template v-else>
      <el-empty description="请选择左侧货位信息" />
    </template>
  </div>
  <!--开始展示货位方格-->

</template>

<script>
  import {
    defineComponent,
    reactive,
    ref,
    toRaw,
    watch
  } from "vue";
  import locItem from './locItem.vue';
  //外置参数
  export default defineComponent({
    components: {
      locItem
    },
    props: {
      nodeInfo: {
        type: Object,
      },
      locsInfo: {
        type: Array
      }
    },
    setup(props, context) {
      watch(props, (props) => {
        trackInfo.value.trackCode = props.nodeInfo.trackCode;
        trackInfo.value.minColumn = props.nodeInfo.minColumn;
        trackInfo.value.maxColumn = props.nodeInfo.maxColumn;
        trackInfo.value.minLayer = props.nodeInfo.minLayer;
        trackInfo.value.maxLayer = props.nodeInfo.maxLayer;
        trackInfo.value.trackLocs = props.locsInfo;
        formatRowLocs(props.locsInfo);
      });
      // emit: ["close"],
      const trackInfo = ref({
        trackLocs: [],
        formatTrackInfos: [],
        trackCode: '',
        minColumn: 0,
        maxColumn: 0,
        minLayer: 0,
        maxLayer: 0,
      });
      ///获取货位方格的主要渲染方式
      const getWapperStyle = function(maxLayer, maxColumn) {
        return 'grid-template-rows: repeat(' + maxLayer + ', 38px);  grid-template-columns: repeat(' + maxColumn +
          ', 38px)';
      }
      ///将获取到的对象信息格式化：堆垛机货位，以排为单位，同一层的货位放在一个集合中
      const formatRowLocs = async (locs) => {
        if (locs.length == 0) return;
        console.log("货位数据初始化", locs.value);
        let formatOneRowLocs = [];
        for (let i = 1; i <= trackInfo.value.maxLayer; i++) {
          let a = locs.filter(item => item.layer === i); //.sort((a,b)=>{a.Col>b.Col});
          formatOneRowLocs.push(a);
        }
        formatOneRowLocs.reverse(); //层数最高的在最前面
        //console.log("货位数据初始化，进行顺序倒置");
        console.log(formatOneRowLocs);
        trackInfo.value.formatTrackInfos = formatOneRowLocs;
        //console.log(formatLocationInfo);
      }
      //根据数组下标从格式化好的数组中获取货位
      const getCurrentLocFromList = function(colNumber, layerNumber) {
        let oneLoc = trackInfo.value.formatTrackInfos[layerNumber - 1].filter(
          item => item.col === colNumber
        )[0];
        return oneLoc;
      };
      //根据指定的货位信息获取所需要呈现的货位风格
      const getStyle = function(colNumber, layerNumber) {
        let locInfo = getCurrentLocFromList(colNumber, layerNumber);
        // console.log(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(colNumber, layerNumber) {
        //根据传入的x和y 找到具体的货位
        let locInfo = getCurrentLocFromList(colNumber, layerNumber);
        console.log("locInfo", locInfo)
        if (locInfo == undefined) return "非货位";
        switch (locInfo.locType) {
          case "Point": //货到入口
            return "货到";
          case "Area": //货道
            return "区域";
          case "Station": //站台
            return "站台";
          case "Loc": //货道
            switch (locInfo.storeStatus) { //载货状态
              case "Load": //载货
                return "载货" + "-" + locInfo.locStatus;
              case "Free": //空闲
                return locInfo.storeStatus + "-" + locInfo.locStatus;
              case "DoIn": //移入
                return locInfo.storeStatus + "-" + locInfo.locStatus;
              case "DoOut": //移出
                return "DoOut";
              case "Fault": //故障
                return "Fault";
              default:
                return "item";
            }
          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(colNumber, layerNumber) {
        console.log("colNumber", colNumber)
        console.log("layerNumber", layerNumber)
        let locInfo = getCurrentLocFromList(colNumber, layerNumber);
        if (locInfo == undefined) return;
        var palletCode = locInfo.palletCode;
        console.log()
        if (palletCode.length > 0) {
          //展示弹窗
        }
        //当前层数据
        let allLayerLocs = trackInfo.value.formatTrackInfos;
        console.log("allLayerLocs", allLayerLocs)
        let oneLayer = trackInfo.value.formatTrackInfos[layerNumber - 1];
        console.log("oneLayer", oneLayer)
        let oneLoc = trackInfo.value.formatTrackInfos[layerNumber - 1].filter(
          item => item.col === colNumber
        )[0];
        console.log("oneLoc", oneLoc)

      }
      return {
        getWapperStyle,
        trackInfo,
        formatRowLocs,
        getCurrentLocFromList,
        getStyle,
        getPropContent,
        showDialog,
        getName
      };
    },
  });
</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>
