<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"
                  style="width: 200px">
                  <a-select-option selected="0" id="zoneCode" v-for="item in locationTypeList" :key="item.name" :value="item.code">{{item.name}}
                  </a-select-option>
                </a-select>
              </li>
              <li>第
                <select id="editable-num" name="num" style="width: 70px">
                </select>
              </li>
              <li>
                <select id="editable-select" name="col" 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/空柜空闲.png">
              </li>
              <li>
                空盘空闲:<img src="~@/assets/icon/空盘空闲.png">
              </li>
              <li>
                半盘空闲:<img src="~@/assets/icon/半盘空闲.png">
              </li>
              <li>
                整盘空闲:<img src="~@/assets/icon/整盘空闲.png">
              </li>
              <li>
                空柜锁定:<img src="~@/assets/icon/空柜锁定.png">
              </li>
              <li>
                空盘锁定:<img src="~@/assets/icon/空盘锁定.png">
              </li>
              <li>
                半盘锁定:<img src="~@/assets/icon/半盘锁定.png">
              </li>
              <li>
                整盘锁定:<img src="~@/assets/icon/整盘锁定.png">
              </li>
              <li>
                空柜禁用:<img src="~@/assets/icon/空柜禁用.png">
              </li>
              <li>
                空盘禁用:<img src="~@/assets/icon/空盘禁用.png">
              </li>
              <li>
                半盘禁用:<img src="~@/assets/icon/半盘禁用.png">
              </li>
              <li>
                整盘禁用:<img src="~@/assets/icon/整盘禁用.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"><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_row_first;
  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/空柜空闲.png'
  import grid_empty  from '@/assets/icon/空盘空闲.png'
  import grid_half  from '@/assets/icon/半盘空闲.png'
  import grid_all  from '@/assets/icon/整盘空闲.png'
  import grid_emp_waing  from '@/assets/icon/空柜禁用.png'
  import grid_empty_waring  from '@/assets/icon/空盘禁用.png'
  import grid_half_waring  from '@/assets/icon/半盘禁用.png'
  import grid_all_waring  from '@/assets/icon/整盘禁用.png'
  import grid_emp_lock  from '@/assets/icon/空柜锁定.png'
  import grid_empty_lock  from '@/assets/icon/空盘锁定.png'
  import grid_half_lock  from '@/assets/icon/半盘锁定.png'
  import grid_all_lock  from '@/assets/icon/整盘锁定.png'
  import rel_empty  from '@/assets/icon/空.png'
  import Vue from 'vue'
  import {ACCESS_TOKEN} from "@/store/mutation-types"
  import {getLocationTypeList} from '@/api/api'

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

    // setup() {
    //   const spinning = ref<boolean>(false);
    //
    //   const changeSpinning = () => {
    //     spinning.value = !spinning.value;
    //   };

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

    mounted() {
      //监听浏览器宽度的改变
      // window.onresize = function(){
      //   _this.changeMargin();
      //   _this.border()
      // };
      //
      // this.changeMargin();
      //
      // this.border()
    },
    methods: {
      loadFrom() {
        getLocationTypeList().then((res) => {
          if (res.success) {
            this.locationTypeList = res.result;
            if (this.locationTypeList.length > 0) {
              this.zoneCode = this.locationTypeList[0].code;
              let _this=this;
              this.resetAjax(this.zoneCode);
            }
          }
        })
      },
      initEvent() {
        //库位类型和行列层选择
        $("#editable-select").change(function () {
          let num=$("#editable-select").val();
          $("#editable-num").children().remove();
          if (num === "row") {
            for (let i = grid_row_first; 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 type=$("#zoneCode").val();
          this.resetAjax(type);
        });
      },
      //边框高度
      border() {
        let box_height=$("#borderCol").offset().top;
        let window_height=$(window).height()-20;
        $("#borderCol").css({"height":window_height-box_height});
      },

      //格子宽度
      changeMargin(){
        let 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;
          }
        // }
        // else if (res.result[i].deleted === true) {
        //   $(".grid").eq(i).attr({"src": rel_empty, "onmouseover": "", "onclick": ""});
        // }
      },

      //清除将数据库中没有的库位
      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(type){
        var _this=this;
        $.ajax({
          url:window._CONFIG['domianURL']+prefix+"/getAllLocation",
          type:"post",
          data:{
            type:type
          },
          headers:{
            "X-Access-Token":Vue.ls.get(ACCESS_TOKEN)
          },
          success:function (res) {
            grid_row=res.result.maxRow;
            grid_row_first = res.result.minRow;
            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 = grid_row_first; 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.changeMargin();
            _this.Search();
          }
        });
      },


      //搜索平面库位
      Search(){
        this.spinning=true;
        this.showPrise=false;
        this.loading=true;
        let index=$("#editable-select").val();
        let num=$("#editable-num").val();

        let zoneCode="";

        if ($("#zoneCode").val()==null)
        {
          zoneCode=this.locationTypeList[0].zoneCode;
        }else
        {
          zoneCode=this.locationTypeList[$("#zoneCode").val()].zoneCode;
        }


        $("#code").val("");
        $("#containerCode").val("");
        $("#material").children().remove();
        $("#material").append("<option>无</option>");
        let data;
        this.seachZone();
        if (index === "row") {
          data={type: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={type: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={type: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
        let zoneCode="";
        if ($("#zoneCode").val()==null)
        {
          zoneCode=this.locationTypeList[0].zoneCode;
        }else
        {
          zoneCode=this.locationTypeList[$("#zoneCode").val()].zoneCode;
        }
        $.ajax({
          url:window._CONFIG['domianURL']+prefix+"/getStatus",
          data:{
            zoneCode: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>