<template>
  <div class="container-div">
    <div class="row">
      <div class="col-sm-12 select-info">
        <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>第
                <select id="editable-num" name="num" style="width: 70px" />
              </li>
              <li>
                <select id="editable-select" name="col" @click="show" style="width: 70px">
                  <option value="row" selected>行</option>
                  <option value="line">列</option>
                  <option value="layer">层</option>
                </select>
              </li>
              <li>
                <a-button type="primary" @click="Search()" icon="search">查询</a-button>
              </li>
            </ul>
          </div>
        </form>
      </div>
      <div class="col-sm-12 select-info">
        <form id="receiptHeader-form">
          <div class="select-list">
            <ul id="img_list" style="">
              <li>空柜空闲：<img src="~@/assets/icon/grid_rest.png"></li>
              <li>空盘空闲：<img src="~@/assets/icon/grid_empty.png"></li>
<!--              <li>半盘空闲：<img src="~@/assets/icon/grid_half.png"></li>-->
              <li>整盘空闲：<img src="~@/assets/icon/grid_all.png"></li>
              <li>空柜锁定：<img src="~@/assets/icon/grid_emp_lock.png"></li>
              <li>空盘锁定：<img src="~@/assets/icon/grid_empty_lock.png"></li>
<!--              <li>半盘锁定：<img src="~@/assets/icon/grid_half_lock.png"></li>-->
              <li>整盘锁定：<img src="~@/assets/icon/grid_all_lock.png"></li>
<!--              <li>空柜禁用：<img src="~@/assets/icon/grid_emp_waing.png"></li>-->
<!--              <li>空盘禁用：<img src="~@/assets/icon/grid_empty_waring.png"></li>-->
<!--              <li>半盘禁用：<img src="~@/assets/icon/grid_half_waring.png"></li>-->
<!--              <li>整盘禁用：<img src="~@/assets/icon/ContainerDisabled.png"></li>-->
              <li>
                <span style="font-size: 12px">库位统计情况：</span>
                <input style="width: 400px;  font-size: 12px" type="text" id="zone" disabled/>
              </li>
            </ul>
            <br><br>
            <ul id="info_list">
              <li><span>库位：</span><input type="text" id="code" disabled/></li>
              <li><span>容器编码：</span><input type="text" id="containerCode" disabled/></li>
              <li><span>物料信息：<select id="material" style="width: auto; min-width: 200px;padding: 0px 8px;appearance: none;pointer-events: none;"><option>无</option></select></span></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>


    </div>
  </div>
</template>

<script>
var prefix = "/location/locationMonitor";
var grid_row;
var grid_line;
var grid_layer;
var list_info;
var grid_num_1 = 0;
var grid_num_2 = 0;
var grid_num_3 = 0;
var grid_num_4 = 0;
var grid_num_5 = 0;
var grid_num_6 = 0;
var grid_num_7 = 0;
var grid_num_8 = 0;
var grid_num_9 = 0;
var grid_num_10 = 0;
var grid_num_11 = 0;
var grid_num_12 = 0;
var currentContainerCode;
var currentLocationCode = 0;
var currentMaterialCode = 0;

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 Vue from 'vue'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import {getZoneList} from '@/api/api'

export default {
  name: "locationStatus",
  zoneCode: "",
  data() {
    return {
      spinning: true,
      loading: true,
      showPrise: false,
      // loading:true,
      zoneCode: '',
      zoneList: [],
      model: {},
      locationContent: ''
    }
  },


  created() {
    let _this = this
    _this.loadFrom()
    window.gridMsg = _this.gridMsg
    window.Mclose = _this.Mclose
    window.lays = _this.lays
  },

  mounted() {
    // 监听浏览器宽度的改变
    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        this.changeMargin();
      }
    });
    resizeObserver.observe(document.querySelector('.location'));
  },
  methods: {
    loadFrom() {
      getZoneList().then((res) => {
        if (res.success) {
          this.zoneList = res.result;
          if (this.zoneList.length > 0) {
            this.zoneCode = this.zoneList[0].code;
            let _this = this;
            this.resetAjax(this.zoneCode);
          }
        }
      })
    },
    refresh: function () {
      $.ajax({
        url: window._CONFIG['domianURL'] + prefix + "/getAllLocation",
        type: "post",
        data: {
          zoneCode: this.zoneCode
        },
        headers: {
          "X-Access-Token": Vue.ls.get(ACCESS_TOKEN)
        },
        success: function (res) {
          grid_row = res.result.maxRow;
          grid_line = res.result.maxLine;
          grid_layer = res.result.maxLayer;
        }
      });
      let num = $("#editable-select").val();
      $("#editable-num").children().remove();
      if (num === "row") {
        for (let i = 1; i <= grid_row; i++) {
          $("#editable-num").append("<option value='" + i + "'>" + i + "</option>")
        }
      } else if (num === "line") {
        for (let i = 1; i <= grid_line; i++) {
          $("#editable-num").append("<option value='" + i + "'>" + i + "</option>")
        }
      } else if (num === "layer") {
        for (let i = 1; i <= grid_layer; i++) {
          $("#editable-num").append("<option value='" + i + "'>" + i + "</option>")
        }
      }

      let zoneCode = $("#zoneCode").val();
      this.resetAjax(this.zoneCode);
      // this.show();
    },
    show: function () {
      //库位类型和行列层选择
      $("#editable-select").change(function () {
        let num = $("#editable-select").val();
        $("#editable-num").children().remove();
        if (num === "row") {
          for (let i = 1; i <= grid_row; i++) {
            $("#editable-num").append("<option value='" + i + "'>" + i + "</option>")
          }
        } else if (num === "line") {
          for (let i = 1; i <= grid_line; i++) {
            $("#editable-num").append("<option value='" + i + "'>" + i + "</option>")
          }
        } else if (num === "layer") {
          for (let i = 1; i <= grid_layer; i++) {
            $("#editable-num").append("<option value='" + i + "'>" + i + "</option>")
          }
        }
      });

      $("#zoneCode").change(function () {
        let zoneCode = $("#zoneCode").val();
        this.resetAjax(this.zoneCode);
      });
    },

    //边框高度
    border() {
      let box_height = $("#borderCol").offset().top;
      let window_height = $(window).height() - 20;
      $("#borderCol").css({"height": window_height - box_height});
    },

    //格子宽度
    changeMargin() {
      let box_width = 0;
      if (document.getElementById("location") != null) {
        box_width = document.getElementById("location").offsetWidth;
      }
      box_width = box_width - 80;
      let num = $("#editable-select").val();
      let grid_width;
      if (num === "layer" || num === "row") {
        grid_width = box_width / grid_line;
      } else if (num === "line") {
        grid_width = box_width / 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 (list_info) {
        for (let i = 0; i < list_info.length; i++) {
          if (list_info[i].row === row && list_info[i].icolumn === line && list_info[i].layer === layers) {
            let str_info = '';
            let container_code = '';
            let list_qty = 0;
            if (list_info[i].containerCode) {
              container_code = "\n容器编码：" + list_info[i].containerCode + "";
              if (list_info[i].materialName) {
                for (let j = 0; j < list_info[i].materialName.length; j++) {
                  let list_batch = list_info[i].batch[j] === null ? "无" : list_info[i].batch[j] === "" ? "无" : list_info[i].batch[j];
                  list_qty += list_info[i].qty[j];
                  if (j == list_info[i].materialName.length - 1) {
                    str_info = str_info + "\n物料信息：批次->" + list_batch + "，物料名称->" + list_info[i].materialName[j] + "，物料编码->" + list_info[i].materialCode[j] +
                      "，数量->" + list_qty + ""
                  }


                }
              }
            }
            let code = list_info[i].code === null ? "无" : list_info[i].code;
            $("[data-i='" + row + "']" + "[data-j='" + line + "']" + "[data-k='" + layers + "']").attr({"title": "第" + row + "行，第" + line + "列，第" + layers + "层\n库位：" + code + container_code + str_info});
            // Vue.prototype.$Jnotification.success({message: '系统提示', description: "第"+row+"行,第"+line+"列,第"+ layers +"层<br>库位："+ code + container_code + str_info, duration: 4})

          }
        }
      } else {
        return ""
      }
    },


    //关闭tips
    Mclose(x) {
      //关闭
      // Vue.prototype.$Jnotification.error({message: '系统提示', description: "鼠标拿走了", duration: 4})
    },

    //库位信息请求和状态显示
    ajaxGrid(x, info) {
      let _this = this
      // let load=layer.msg('加载中', {icon: 16,shade: 0.4,time: false});
      $.ajax({
        url: window._CONFIG['domianURL'] + prefix + "/getLocationInfo",
        type: "post",
        headers: {
          "X-Access-Token": Vue.ls.get(ACCESS_TOKEN)
        },
        data: info,
        success: function (res) {
          if (res.code === 200 || res.result) {
            grid_num_1 = 0;
            grid_num_2 = 0;
            grid_num_3 = 0;
            grid_num_4 = 0;
            grid_num_5 = 0;
            grid_num_6 = 0;
            grid_num_7 = 0;
            grid_num_8 = 0;
            grid_num_9 = 0;
            grid_num_10 = 0;
            grid_num_11 = 0;
            grid_num_12 = 0;
            if (x === "row") {
              for (let i = 0; i < res.result.length; i++) {
                let index = res.result[i].icolumn + ((res.result[i].layer - 1) * grid_line);
                index = index - 1;
                _this.resShow(res, index, i);
              }
              _this.clearLocation(grid_line, grid_layer);
              // layer.close(load);
            } else if (x === "line") {
              for (let i = 0; i < res.result.length; i++) {
                let index = res.result[i].row + ((res.result[i].layer - 1) * grid_row);
                index = index - 1;
                _this.resShow(res, index, i);
              }
              _this.clearLocation(grid_row, grid_layer);
              // layer.close(load);
            } else if (x === "layer") {
              for (let i = 0; i < res.result.length; i++) {
                let index = res.result[i].icolumn + ((res.result[i].row - 1) * grid_line);
                index = index - 1;
                _this.resShow(res, index, i);
              }
              _this.clearLocation(grid_line, grid_row);
              // layer.close(load);
            }
          } else if (res.code !== 200) {
            // layer.close(load);
            // layer.open({
            //   title: '错误',
            //   content: res.msg
            // });
          }
          list_info = res.result;
        },
        error: function (req, msg) {
          console.log(msg);
        }
      })
    },
    //库位请求的结果显示
    resShow(res, index, i) {
      // if (res.result[i].deleted === false) {
      var row = res.result[i].row;
      var jColumn = res.result[i].icolumn;
      var 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
        });
        grid_num_1 = grid_num_1 + 1;
      } else if (res.result[i].locationAttribute === "2") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_empty,
          "isTrue": 1
        });
        grid_num_2 = grid_num_2 + 1;
      } else if (res.result[i].locationAttribute === "3") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_half,
          "isTrue": 1
        });
        grid_num_3 = grid_num_3 + 1;
      } else if (res.result[i].locationAttribute === "4") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_all,
          "isTrue": 1
        });
        grid_num_4 = grid_num_4 + 1;
      } else if (res.result[i].locationAttribute === "5") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_emp_lock,
          "isTrue": 1
        });
        grid_num_5 = grid_num_5 + 1;
      } else if (res.result[i].locationAttribute === "6") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_empty_lock,
          "isTrue": 1
        });
        grid_num_6 = grid_num_6 + 1;
      } else if (res.result[i].locationAttribute === "7") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_half_lock,
          "isTrue": 1
        });
        grid_num_7 = grid_num_7 + 1;
      } else if (res.result[i].locationAttribute === "8") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_all_lock,
          "isTrue": 1
        });
        grid_num_8 = grid_num_8 + 1;
      } else if (res.result[i].locationAttribute === "9") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_emp_waing,
          "isTrue": 1
        });
        grid_num_9 = grid_num_9 + 1;
      } else if (res.result[i].locationAttribute === "10") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_empty_waring,
          "isTrue": 1
        });
        grid_num_10 = grid_num_10 + 1;
      } else if (res.result[i].locationAttribute === "11") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_half_waring,
          "isTrue": 1
        });
        grid_num_11 = grid_num_11 + 1;
      } else if (res.result[i].locationAttribute === "12") {
        $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({
          "src": grid_all_waring,
          "isTrue": 1
        });
        grid_num_12 = grid_num_12 + 1;
      }

    },

    //清除将数据库中没有的库位
    clearLocation(x, y) {
      for (let j = 0; j < x * y; j++) {
        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 (list_info) {//缓存查询
        for (let i = 0; i < list_info.length; i++) {
          if (list_info[i].row === row && list_info[i].icolumn === line && list_info[i].layer === layers) {
            if (list_info[i].materialName) {
              let list_batch = '';
              let list_qty = 0;
              $("#material").children().remove();
              for (let j = 0; j < list_info[i].materialName.length; j++) {
                list_batch = list_info[i].batch[j] === null ? "无" : list_info[i].batch[j] === "" ? "无" : list_info[i].batch[j];
                list_qty += list_info[i].qty[j];
                let str_info = "批次->" + list_batch + "，物料名称->" + list_info[i].materialName[j] + "，物料编码->" + list_info[i].materialCode[j] +
                  "，数量->" + list_qty + "";
                if (j == list_info[i].materialName.length - 1) {
                  $("#material").append("<option>" + str_info + "</option>");
                }
                currentMaterialCode = list_info[i].materialCode[j]
              }
            } else {
              $("#material").children().remove();
              $("#material").append("<option>无</option>");
            }
            $("#code").val(list_info[i].code);
            $("#containerCode").val(list_info[i].containerCode === "" ? "无" : list_info[i].containerCode);
            currentContainerCode = $("#containerCode").val()
            currentLocationCode = $("#code").val()
          }
        }
      } else {
        return ""
      }
    },

    //页面初始化请求
    resetAjax(zoneCode) {
      var _this = this;
      $.ajax({
        url: window._CONFIG['domianURL'] + prefix + "/getAllLocation",
        type: "post",
        data: {
          zoneCode: zoneCode
        },
        headers: {
          "X-Access-Token": Vue.ls.get(ACCESS_TOKEN)
        },
        success: function (res) {
          grid_row = res.result.maxRow;
          grid_line = res.result.maxLine;
          grid_layer = res.result.maxLayer;
          //初始格子
          $("#location").children().remove();
          for (let i = 1; i <= grid_layer; i++) {
            // var index=i+1;<span style='margin-top:30px'>第"+ index +"行</span>
            $(".location").append("<br>");
            for (let j = 1; j <= grid_line; j++) {
              // $(".location").append("<img data-i='1' data-j="+j+" data-k="+ i +" class='grid'>");
              $(".location").append("<img v-html data-i='1' data-j=" + j + " data-k=" + i + " class='grid' onmouseove='lays(this)' onmouseout='Mclose(this)' onclick='gridMsg(this)'>");
            }
          }
          let num = $("#editable-select").val();
          $("#editable-num").children().remove();
          if (num === "row") {
            for (let i = 1; i <= grid_row; i++) {
              $("#editable-num").append("<option value='" + i + "'>" + i + "</option>")
            }
          } else if (num === "line") {
            for (let i = 1; i <= grid_line; i++) {
              $("#editable-num").append("<option value='" + i + "'>" + i + "</option>")
            }
          } else if (num === "layer") {
            for (let i = 1; i <= grid_layer; i++) {
              $("#editable-num").append("<option value='" + i + "'>" + i + "</option>")
            }
          }
          _this.Search();
        }
      });
    },
    //搜索平面库位
    Search() {
      this.spinning = true;
      this.showPrise = false;
      this.loading = true;
      let index = $("#editable-select").val();
      let num = $("#editable-num").val();
      let zoneCode = "";

      $("#code").val("");
      $("#containerCode").val("");
      $("#material").children().remove();
      $("#material").append("<option>无</option>");
      let data;
      this.seachZone();
      if (index === "row") {
        data = {zoneCode: this.zoneCode, row: num};
        $("#location").children().remove();
        for (let i = grid_layer; i > 0; i--) {
          $(".location").append("<br><span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第" + i + "层</span>");
          for (let j = 1; j <= 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)'>");
          }
        }
        // this.changeMargin();
        this.ajaxGrid(index, data);
      } else if (index === "line") {
        data = {zoneCode: this.zoneCode, line: num};
        $("#location").children().remove();
        for (let k = grid_layer; k > 0; k--) {
          $(".location").append("<br><span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第" + k + "层</span>");
          for (let l = 1; l <= 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)'>");
          }
        }
        // this.changeMargin();
        this.ajaxGrid(index, data);
      } else if (index === "layer") {
        data = {zoneCode: this.zoneCode, layer: num};
        $("#location").children().remove();
        for (let m = 1; m <= grid_row; m++) {
          $(".location").append("<br><span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第" + m + "行</span>");
          for (let n = 1; n <= 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.changeMargin();
        this.ajaxGrid(index, data);
      }
    },
    seachZone() {
      let _this = this

      $.ajax({
        url: window._CONFIG['domianURL'] + prefix + "/getStatus",
        data: {
          zoneCode: _this.zoneCode
        },
        headers: {
          "X-Access-Token": Vue.ls.get(ACCESS_TOKEN)
        },
        success: function (response) {
          if (response.code == 200) {
            $("#zone").val("库位总数：" + response.result.location + ", 空库位：" + response.result.emptyLocation +
              ", 空托盘库位：" + response.result.haveContainLocation + ", 有货库位：" + response.result.haveInventoryLocation)
          } else {
            alert(response.message)
          }
        },
        error: function () {
          alert("未知的错误")
        }
      })
    },
  }
}
</script>

<style scoped>
</style>