<template>
  <a-card :bordered="false">
      <form id="container-form">
        <div class="select-list">
          <ul id="select_info">
            <li>
              <a-select
                show-search
                placeholder="请选择库区"
                option-filter-prop="children"
                v-model="zoneCode"
                @change="refresh"
                style="width: 200px">
                <a-select-option selected="0" id="zoneCode" v-for="item in zoneList" :key="item.name" :value="item.code">{{ item.name }}
                </a-select-option>
              </a-select>
            </li>
            <li>第
              <a-select
                show-search
                option-filter-prop="children"
                v-model="num"
                style="width: 70px">
                <a-select-option id="num" v-for="num in nums" :key="num" :value="num">{{ num }}
                </a-select-option>
              </a-select>
            </li>
            <li>
              <a-select
                show-search
                option-filter-prop="children"
                v-model="col"
                @change="refresh"
                style="width: 70px">
                <a-select-option id="col" v-for="item in colList" :key="item.name" :value="item.code">{{ item.name }}
                </a-select-option>
              </a-select>
            </li>
            <li>
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="search()" icon="search" style="margin-left: 8px;">查询</a-button>
                <a-button @click='expressDelivery()' v-if="expressDeliveryVisible" type='primary' style="margin-left: 8px;">快速出库</a-button>
                <a-button @click="expressStorage()" type="primary" v-if="expressStorageVisible" style="margin-left: 8px;">快速入库</a-button>
              </span>
            </li>
          </ul>
        </div>
      </form>
    <div class="col-sm-12 select-info">
      <form id="receiptHeader-form">
        <div class="select-list">
          <ul id="img_list">
            <li style="font-size: 12px">空柜空闲：<img src="~@/assets/icon/grid_rest.png"></li>
            <li style="font-size: 12px">空盘空闲：<img src="~@/assets/icon/grid_empty.png" alt=""></li>
            <li style="font-size: 12px">整盘空闲：<img src="~@/assets/icon/grid_all.png"></li>
            <li style="font-size: 12px">空柜锁定：<img src="~@/assets/icon/grid_emp_lock.png"></li>
            <li style="font-size: 12px">空盘锁定：<img src="~@/assets/icon/grid_empty_lock.png"></li>
            <li style="font-size: 12px">整盘锁定：<img src="~@/assets/icon/grid_all_lock.png"></li>
          </ul>
          <ul id="info_list">
            <li>
              <span style="font-size: 12px">库位统计情况：</span>
              <input style="width: 600px; font-size: 12px; border: none;" type="text" id="zone" disabled/>
            </li><br><br>
            <li><span>库位：</span><input type="text" style="width: 100px; font-size: 12px; border: none;" id="code" disabled/></li><br><br>
            <li><span>容器：</span><input type="text" style="width: 200px; font-size: 12px; border: none;" id="containerCode" disabled/></li><br><br>
            <li style="width: 100%;">
              <span style="height: 32px; line-height:26px;">物料信息：</span>
              <a-textarea v-model="materialInfo" auto-size style="width: 80%; font-size: 12px; resize: none; vertical-align:top; border: none;  box-shadow: none; outline:none;" readonly />
            </li>
          </ul>
        </div>
      </form>
    </div>
    <div class="col-sm-12 select-info">
      <div id="borderCol" style="overflow-y: auto;white-space:nowrap" v-show="showPrise">
        <div class="location" id="location"></div>
      </div>
      <a-spin tip="库位视图生成中..." :spinning="spinning">
        <a-skeleton active :loading="loading" :paragraph="{ rows: 5 }"/>
      </a-spin>
    </div>
    <ExpressStorageModal ref="ExpressStorageModal" @ok="search"></ExpressStorageModal>
    <ExpressDeliveryModal ref="ExpressDeliveryModal" @ok="search"></ExpressDeliveryModal>
  </a-card>
</template>

<script>

import huahengUI from '@/assets/css/huahengUI.css'
import $ from '../../../assets/js/jquery-1.11.1.min'
import grid_rest from '@/assets/icon/grid_rest.png'
import grid_empty from '@/assets/icon/grid_empty.png'
import grid_half from '@/assets/icon/grid_half.png'
import grid_all from '@/assets/icon/grid_all.png'
import grid_emp_waing from '@/assets/icon/grid_emp_waing.png'
import grid_empty_waring from '@/assets/icon/grid_empty_waring.png'
import grid_half_waring from '@/assets/icon/grid_half_waring.png'
import grid_all_waring from '@/assets/icon/ContainerDisabled.png'
import grid_emp_lock from '@/assets/icon/grid_emp_lock.png'
import grid_empty_lock from '@/assets/icon/grid_empty_lock.png'
import grid_half_lock from '@/assets/icon/grid_half_lock.png'
import grid_all_lock from '@/assets/icon/grid_all_lock.png'
import rel_empty from '@/assets/icon/rel_empty.png'
import {getInventoryDetailByLocationCode, getZoneList} from '@/api/api'
import ExpressDeliveryModal from "@views/system/monitor/modules/ExpressDeliveryModal";
import ExpressStorageModal from "@views/system/monitor/modules/ExpressStorageModal";
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getAction, postAction} from "@api/manage";


export default {
  name: "locationStatus",
  mixins: [JeecgListMixin],
  components: {
    ExpressStorageModal,
    ExpressDeliveryModal
  },
  data() {
    return {
      spinning: true,
      loading: true,
      showPrise: false,
      expressDeliveryVisible: false,
      expressStorageVisible: false,
      col: "row",
      materialInfo: "",
      colList: [
        {code: "row", name: "行"},
        {code: "line", name: "列"},
        {code: "layer", name: "层"}
      ],
      zoneCode: '',
      zoneList: [],
      num: 1,
      nums: [],
      model: {},
      url: {
        getStatus: "/location/locationMonitor/getStatus",
        getLocationInfo: "/location/locationMonitor/getLocationInfo",
        getAllLocation: "/location/locationMonitor/getAllLocation"
      },
      grid_row: null,
      grid_line: null,
      grid_layer: null,
      list_info: null,
      currentLocationCode: 0,
    }
  },
  created() {
    this.loadFrom()
    window.gridMsg = this.gridMsg
    window.mClose = this.mClose
    window.lays = this.lays
  },
  mounted() {
    // 方法一：确保 .location 元素存在且已渲染
    const locationElement = document.querySelector('.location');
    if (locationElement) {
      const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          this.changeMargin();
        }
      });
      resizeObserver.observe(locationElement);
      setTimeout(() => {
        this.refresh(); // 使用箭头函数，this 指向 Vue 组件实例
      }, 1000);
    }
  },
  methods: {
    loadData() {
      // 空方法，为了覆盖混入文件中的方法，解决报错
    },
    loadFrom() {
      getZoneList().then((res) => {
        if (res.success) {
          this.zoneList = res.result;
          if (this.zoneList.length > 0) {
            this.zoneCode = this.zoneList[0].code;
          }
        }
      })
    },
    handleNumsSelect() {
      let col = this.col;
      if (col === "row") {
        this.nums = this.grid_row;
      } else if (col === "line") {
        this.nums = this.grid_line;
      } else if (col === "layer") {
        this.nums = this.grid_layer;
      } else {
        this.$message.warning("错误");
      }
    },
    refresh() {
      let url = this.url.getAllLocation
      getAction(url, {zoneCode: this.zoneCode}).then(res => {
        if (res.success) {
          this.grid_row = res.result.maxRow;
          this.grid_line = res.result.maxLine;
          this.grid_layer = res.result.maxLayer;
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.handleNumsSelect();
        this.search();
      })
      this.locationStatistics();
    },
    //格子宽度
    changeMargin() {
      let box_width = 0;
      if (document.getElementById("location") != null) {
        box_width = document.getElementById("location").offsetWidth;
      }
      box_width = box_width - 80;
      let num = this.col;
      let grid_width;
      if (num === "layer" || num === "row") {
        grid_width = box_width / this.grid_line;
      } else if (num === "line") {
        grid_width = box_width / this.grid_row;
      }
      if (grid_width >= 50) {
        $(".grid").css({"width": "50px", "height": "50px"});
      } else if (grid_width <= 20) {
        $(".grid").css({"width": "20px", "height": "20px"});
      } else {
        $(".grid").css({"width": grid_width, "height": grid_width});
      }
    },
    //tips信息
    lays(x) {
      let $j = $(x);
      let row = $j.attr("data-i");
      let line = $j.attr("data-j");
      let layers = $j.attr("data-k");
      row = parseInt(row);
      line = parseInt(line);
      layers = parseInt(layers);
      if (this.list_info) {
        for (const element of this.list_info) {
          if (element.row === row && element.icolumn === line && element.layer === layers) {
            let str_info = '';
            let container_code = '';
            if (element.containerCode) {
              container_code = "\n容器编码：" + element.containerCode + "";
              if (element.materialName) {
                for (let j = 0; j < element.materialName.length; j++) {
                  let list_batch = element.batch[j].length == 0 ? "无" : element.batch[j];
                  let list_qty = element.qty[j];
                  str_info += "\n物料信息：批次->" + list_batch + "，物料名称->" + element.materialName[j] + "，物料编码->" + element.materialCode[j] + "，数量->" + list_qty + ""
                }
              }
            }
            let code = element.code === null ? "无" : element.code;
            $("[data-i='" + row + "']" + "[data-j='" + line + "']" + "[data-k='" + layers + "']").attr({"title": "第" + row + "行，第" + line + "列，第" + layers + "层\n库位：" + code + container_code + str_info});
          }
        }
      } else {
        return ""
      }
    },
    // 快速入库
    expressStorage() {
      let json = {
        "containerCode": this.currentContainerCode,
        "locationCode": this.currentLocationCode
      }
      this.$refs.ExpressStorageModal.edit(json);
    },
    // 获取库存信息
    getInventory(locationCode) {
      let params = {
        locationCode: locationCode
      }
      getInventoryDetailByLocationCode(params).then((res) => {
        if (res.success) {
          let parameter = [];
          let newArr = res.result.records;
          for (let i of newArr) {
            let param = {
              materialCode: i.materialCode,
              shipQty: i.qty,
              inventoryDetailId: i.id,
              containerCode: i.containerCode
            }
            parameter.push(param);
          }
          this.$refs.ExpressDeliveryModal.edit(parameter);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //快速出库
    expressDelivery() {
      this.getInventory(this.currentLocationCode);
    },
    // 显示快速出库
    revealExpressDelivery(code, materialCode) {
      this.expressDeliveryVisible = !!materialCode;
    },
    // 显示快速入库
    revealExpressStorage(code) {
      this.expressStorageVisible = !!code;
    },
    //关闭tips
    mClose(x) {
      //关闭
      // Vue.prototype.$Jnotification.error({message: '系统提示', description: "鼠标拿走了", duration: 4})
    },
    //库位信息请求和状态显示
    ajaxGrid(x, info) {
      let _this = this
      let url = this.url.getLocationInfo;
      postAction(url, info).then(res => {
        if (res.success) {
          if (x === "row") {
            for (let i = 0; i < res.result.length; i++) {
              let index = res.result[i].icolumn + ((res.result[i].layer - 1) * this.grid_line);
              index = index - 1;
              _this.resShow(res, index, i);
            }
            _this.clearLocation(this.grid_line, this.grid_layer);
          } else if (x === "line") {
            for (let i = 0; i < res.result.length; i++) {
              let index = res.result[i].row + ((res.result[i].layer - 1) * this.grid_row);
              index = index - 1;
              _this.resShow(res, index, i);
            }
            _this.clearLocation(this.grid_row, this.grid_layer);
          } else if (x === "layer") {
            for (let i = 0; i < res.result.length; i++) {
              let index = res.result[i].icolumn + ((res.result[i].row - 1) * this.grid_line);
              index = index - 1;
              _this.resShow(res, index, i);
            }
            _this.clearLocation(this.grid_line, this.grid_row);
          }
        } else {
          this.$message.error(res.message);
        }
        this.list_info = res.result;
      }).finally(() => {

      })
    },
    //库位请求的结果显示
    resShow(res, index, i) {
      let row = res.result[i].row;
      let jColumn = res.result[i].icolumn;
      let kLayer = res.result[i].layer;
      if (res.result[i].locationAttribute === "1") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_rest,
          "isTrue": 1
        });
      } else if (res.result[i].locationAttribute === "2") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_empty,
          "isTrue": 1
        });
      } else if (res.result[i].locationAttribute === "3") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_half,
          "isTrue": 1
        });
      } else if (res.result[i].locationAttribute === "4") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_all,
          "isTrue": 1
        });
      } else if (res.result[i].locationAttribute === "5") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_emp_lock,
          "isTrue": 1
        });
      } else if (res.result[i].locationAttribute === "6") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_empty_lock,
          "isTrue": 1
        });
      } else if (res.result[i].locationAttribute === "7") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_half_lock,
          "isTrue": 1
        });
      } else if (res.result[i].locationAttribute === "8") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_all_lock,
          "isTrue": 1
        });
      } else if (res.result[i].locationAttribute === "9") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_emp_waing,
          "isTrue": 1
        });
      } else if (res.result[i].locationAttribute === "10") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_empty_waring,
          "isTrue": 1
        });
      } else if (res.result[i].locationAttribute === "11") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_half_waring,
          "isTrue": 1
        });
      } else if (res.result[i].locationAttribute === "12") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_all_waring,
          "isTrue": 1
        });
      }
    },
    //清除将数据库中没有的库位
    clearLocation(x, y) {
      for (let j = 0; j < x * y; j++) {
        let $grid = $(".grid");
        let sta = $grid.eq(j).attr("isTrue");
        if (sta !== "1") {
          $grid.eq(j).attr({"src": rel_empty, "onmouseover": "", "onclick": ""});
        }
      }
      this.spinning = false;
      this.showPrise = true;
      this.loading = false;
    },
    //点击显示当前库位信息
    gridMsg(msg) {
      let $j = $(msg);
      let row = $j.attr("data-i");
      let line = $j.attr("data-j");
      let layers = $j.attr("data-k");
      row = parseInt(row);
      line = parseInt(line);
      layers = parseInt(layers);
      if (this.list_info) {
        for (const element of this.list_info) {
          if (element.row === row && element.icolumn === line && element.layer === layers) {
            let materialCode = '';
            //let $material = $("#material");
            if (element.materialName) {
              //$material.children().remove();
              let str_info = '';
              for (let j = 0; j < element.materialName.length; j++) {
                let list_batch = element.batch[j].length === 0 ? "无" : element.batch[j];
                let list_qty = element.qty[j];
                str_info += "批次->" + list_batch + "，物料名称->" + element.materialName[j] + "，物料编码->" + element.materialCode[j] + "，数量->" + list_qty;
                materialCode = element.materialCode[j];
                if (j !== element.materialName.length -1) {
                  str_info += "\r\n"
                }
              }
              this.materialInfo = str_info
            } else {
              this.materialInfo = "无"
            }
            let $code = $("#code");
            $code.val(element.code);
            $("#containerCode").val(element.containerCode === "" ? "无" : element.containerCode);
            this.currentContainerCode = element.containerCode;
            this.currentLocationCode = $code.val()
            this.revealExpressDelivery(element.code, materialCode);
            this.revealExpressStorage(element.code);
            break;
          }
        }
      } else {
        return ""
      }
    },
    //搜索平面库位
    search() {
      this.spinning = true;
      this.showPrise = false;
      this.loading = true;
      let col = this.col;
      let num = this.num;
      let data;

      $("#location").children().remove();
      let $location = $(".location");
      if (col === "row") {
        data = {zoneCode: this.zoneCode, row: num};
        for (let i = this.grid_layer; i > 0; i--) {
          if (i != this.grid_layer) {
            $location.append("<br>")
          }
          $location.append("<span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第" + i + "层</span>");
          for (let j = 1; j <= this.grid_line; j++) {
            $location.append("<img data-i=" + num + " data-j=" + j + " data-k=" + i + " class='grid' onmouseover='lays(this)' onmouseout='mClose(this)' onclick='gridMsg(this)'>");
          }
        }
      } else if (col === "line") {
        data = {zoneCode: this.zoneCode, line: num};
        for (let k = this.grid_layer; k > 0; k--) {
          if (k != this.grid_layer) {
            $location.append("<br>")
          }
          $location.append("<span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第" + k + "层</span>");
          for (let l = 1; l <= this.grid_row; l++) {
            $location.append("<img data-i=" + l + " data-j=" + num + " data-k=" + k + " class='grid' onmouseover='lays(this)' onmouseout='mClose(this)' onclick='gridMsg(this)'>");
          }
        }
      } else if (col === "layer") {
        data = {zoneCode: this.zoneCode, layer: num};
        for (let m = 1; m <= this.grid_row; m++) {
          if (m != 1) {
            $location.append("<br>")
          }
          $location.append("<span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第" + m + "行</span>");
          for (let n = 1; n <= this.grid_line; n++) {
            $location.append("<img data-i=" + m + " data-j=" + n + " data-k=" + num + " class='grid' onmouseover='lays(this)' onmouseout='mClose(this)' onclick='gridMsg(this)'>");
          }
        }
      }
      this.ajaxGrid(col, data);
    },
    locationStatistics() {
      let url = this.url.getStatus;
      getAction(url, {zoneCode: this.zoneCode}).then(res => {
        if (res.success) {
          $("#zone").val("库位总数：" + res.result.location + "，空库位：" + res.result.emptyLocation +
            "，空托盘库位：" + res.result.haveContainLocation + "，有货库位：" + res.result.haveInventoryLocation)
        } else {
          this.$message.warning(res.message)
        }
      }).finally()
    }
  }
}
</script>