<%--
  Created by IntelliJ IDEA.
  User: yangzi
  Date: 2023/2/21
  Time: 10:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/webpage/include/taglib.jsp" %>
<div id="toolbar" class="text-left">
  <c:if test="${mode == 'add' || mode == 'edit'}">
  <a class="btn btn-primary btn-sm" onclick="addDetail('#detail_table')" title="新增"><i class="fa fa-plus"></i> 手动添加</a>
  <a class="btn btn-primary btn-sm" onclick="addScan('#detail_table')" title="新增"><i class="fa fa-plus"></i> 扫码添加</a>
  <a id="editAll" class="btn btn-primary btn-sm"  onclick="addShelve('#detail_table')" title="新增"><i class="fa fa-plus"></i> 批量编辑货架</a>
  </c:if>
</div>
<table id="detail_table" data-toolbar="#toolbar"></table>
<script>
  var selector = "#detail_table";
  function initTable(){
    var data = ${fns:toJson(storage.storageInfoList)};
    if(data.length){
      data = data.map(function(item){
        item.delFlag = 0;
        item.readonly = item.qrCode && item.qrCode.state === '2'
        return item;
      })
    }
    $(selector).bootstrapTable({
      data: data,
      //是否显示分页（*）
      pagination: true,
      //排序方式
      sortOrder: "asc",
      //初始化加载第一页，默认第一页
      pageNumber:1,
      //每页的记录行数（*）
      pageSize: 10,
      sidePagination: "client",
      columns:[{checkbox: true, formatter: function(vlaue,row){return {disabled:  row.qrCode && row.qrCode.state === '2' }}},
        {
          field: 'no',
          title: '序号',
          align: 'center',
          width: 60,
          formatter: function (value, row, index){
            var tpl = $("#hideTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");
            var html = Mustache.render(tpl, {
              idx: index,
              row: row
            })

            return html + '<span>'+(index+1)+'</span>'
          }
        },
        {
          field: 'name',
          title: '名称',
          formatter: function (value,row,index){
            return Mustache.render($("#nameTpl").html(),{
              row: row,
              idx: index
            })
          }
        },
        {
          field: 'type.name',
          title: '品名代码',
          formatter: function (value,row,index){
            return Mustache.render($("#typeTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, ""),{
              row: row,
              idx: index
            })
          }
        },
        {
          field: 'model',
          title: '型号',
          formatter: function (value,row,index){
            return Mustache.render($("#modelTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, ""),{
              row: row,
              idx: index
            })
          }
        },
        {
          field: 'shelves',
          title: '货架',
          formatter: function (value,row,index){
            return Mustache.render($("#shelvesTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, ""),{
              row: row,
              idx: index
            })
          }
        },
        {
          field: 'warehouse.name',
          title: '仓库',
          formatter: function (value,row,index){
            return Mustache.render($("#warehouseTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, ""),{
              row: row,
              idx: index
            })
          }
        },
        {
          field: 'qrCode.state',
          title: '&nbsp;&nbsp;状态&nbsp;&nbsp;',
          formatter: function (value,row,index){
             if(value === '2'){
               return '已入库'
             }else{
               return '未入库'
             }
          }
        },
        {
          field: 'remarks',
          title: '备注',
          formatter: function (value,row,index){
            return Mustache.render($("#remarksTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, ""),{
              row: row,
              idx: index
            })
          }
        },
        {
          field: '',
          title: '操作',
          formatter: function (value,row,index){
            if(row.qrCode && row.qrCode.state === '2') return ' ';
            var text = row.delFlag == 1 ? '撤销删除' : '删除';
            var result = ["<a href='javascript:void(0);' onclick=\"removeRow(" + index + ", '" + row.id + "',  '" + row.delFlag + "')\">"+text+"</a>" ]
            return result.join('');
          }
        }
      ]
    });
    $(selector).on('check.bs.table uncheck.bs.table load-success.bs.table ' +
            'check-all.bs.table uncheck-all.bs.table', function () {
      $('#editAll').prop('disabled', !getSelections().length);
    });
  }

  function getSelections(){
    return $(selector).bootstrapTable('getSelections');
  }

  /**
   * 手动添加明细
   * @param selector
   */
  function addDetail(selector){
    // 选择该批次号下的货品明细
    if(!$("#batchNum").val()){
      jp.warning('请选择批次号！');
      return;
    }
    jp.openStorageSelectDialog({batchNum:$("#batchNum").val(),state: 0, isMultiSelect: true },function (items){
        if(Array.isArray(items)){
          /***
           * 重复的物资编码去重
           */
          var newItems = [];
          items.forEach(function(item){
              var fined = getTableData().find(function(v){
                return v.qrCode.id === item.qrCode.id
              });
              if(!fined){
                newItems.push(item)
              }else{
                jp.warning('有物资重复不能入库！');
              }
          })
          var data = newItems.map(function (item){
            item[0] = false;
            if(item.goodsInfo && !item.goodsInfo.amount){
              item.goodsInfo.amount = 0;
            }
            return {
              id: '',
              delFlag: 0,
              remarks: '',
              ...item
            }
          });
          $(selector).bootstrapTable('append', data)
        }
    })
  }

  /**
   * 删除明细
   * @param index
   * @param rowId
   * @param rowDelFlag
   */
  function removeRow(index, rowId, rowDelFlag){
    if(rowId){
      var delFlag = rowDelFlag == 1 ? 0 : 1
      updateRow(index, {
        delFlag: delFlag
      })
    }else{
      $(selector).bootstrapTable("remove", {
        field: '$index',
        values: [index]
      })
    }
  }

  /**
   * 更新行
   * @param index 下标
   * @param row  更新对象
   */
  function updateRow(index, row){
    $(selector).bootstrapTable('updateRow', {
      index: index,
      row: row
    })
  }

  /**
   * 监听input值，并更新行
   * @param rowIndex 更新行的下标
   * @param elem  元素
   * @param field 属性
   */
  function onInputChange(rowIndex, elem , field){
    var obj = {};
    obj[field] = $(elem).val()
    var timer = null;
    clearTimeout(timer);
    timer = setTimeout(function (){
      updateRow(rowIndex, obj)
    }, 0)
  }

  /**
   * 监听类型选择回调并更新行
   * @param nodes 选中数据
   * @param rowIndex 行下标
   */
  function onSelectType(nodes, rowIndex){
    if(Array.isArray(nodes) && nodes.length === 1){
      var node = nodes[0];
      var obj = {
        type: {
          id: node.id,
          name: node.text
        }
      };
      updateRow(rowIndex, obj)
    }
  }

  function onSelectShelves(nodes, rowIndex){
    if(Array.isArray(nodes) && nodes.length === 1){
      var node = nodes[0];
      var obj = {
        shelves: {
          id: node.id,
          name: node.name
        },
        warehouse: node.warehouse
      };
      updateRow(rowIndex, obj)
    }
  }

  /**
   * 获取所有明细数据
   * @returns {*|jQuery}
   */
  function getTableData(){
    return $(selector).bootstrapTable('getData');
  }

  /**
   * 批量添加货架
   */
  function addShelve(){
    jp.openShelvesSelectDialog(function (items){
       setTimeout(function(){
         var Shelve = items[0]; // 货架对象
         updateTask(getSelections(), 10, function(index){
           updateRow(index,{
             shelves: {
               id: Shelve.id,
               name: Shelve.name
             },
             warehouse: Shelve.warehouse
           });
         });
       },200)
        // getSelections().forEach(function (item){
        //   var index = getTableData().findIndex(function (current){
        //     return current.qrCode.id === item.qrCode.id;
        //   }); // 需更新的行的下标
        //   // updateRow(index,{
        //   //   shelves: {
        //   //     id: Shelve.id,
        //   //     name: Shelve.name
        //   //   },
        //   //   warehouse: Shelve.warehouse
        //   // })
        // })
    })
  }

  function updateTask(allList, count, updateCallback){
     var list = allList.slice(0, count);
     list.forEach(function (item){
      var index = getTableData().findIndex(function (current){
        return current.qrCode.id === item.qrCode.id;
      }); // 需更新的行的下标
       updateCallback(index);
      });
     setTimeout(function(){
       var newList = allList.slice(count);
       if(newList.length > 0){
         updateTask(newList,count,updateCallback);
       }
     },300)
  }

  /**
   * 点击扫码显示扫码窗口
   */
  function addScan(){
    layer.open({
      type: 1,
      title: '扫码',
      auto: true,
      area: ['500','300'],
      content: $("#scanResultTpl").html(),
      success: function (){
        $("#scanResult").focus();
      },
      btn:['关闭']
    })
  }

  /**
   * 扫码
   * 一、获取扫码结果
   * 二、请求后台接口获取结果
   * 三、增一条明细数据
   * 四、清空扫码结果
   * @param elem
   */
  function onScanChange(elem){
     try{
        var json = JSON.parse($(elem).val());
        var qrCodeId = json.code;
        var goodsInfoId = json.infoId;
        jp.get('${ctx}/warehouse/goods/goods/getGIAndQCByTwoId?goodsInfoId='+goodsInfoId+"&qrCodeId="+qrCodeId, function (res){
            var qrCode = res.body.qrCode;
            var fined = getTableData().find(function(v){
              return v.qrCode.id === qrCode.id
            });
            if(fined){
              jp.warning('有物资重复不能入库!');
              return;
            }
           $(selector).bootstrapTable('append',[
             {
               qrCode: qrCode,
               goodsInfo: qrCode.goodsInfo,
               ...qrCode.goodsInfo,
               id: '',
               delFlag: 0,
               remarks: ''
             }
           ]);
          $(elem).val('').focus();
        })

     }catch (e){
       console.log(e);
     }
  }
</script>

<script id="hideTpl" type="text/html">
  <input id="storageInfoList{{idx}}_id" name="storageInfoList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
  <input id="storageInfoList{{idx}}_delFlag" name="storageInfoList[{{idx}}].delFlag" type="hidden" value="{{row.delFlag}}"/>
  <input id="storageInfoList{{idx}}_goodsInfoId" name="storageInfoList[{{idx}}].goodsInfo.id" type="hidden" value="{{row.goodsInfo.id}}"/>
  <input id="storageInfoList{{idx}}_goodsInfoName" name="storageInfoList[{{idx}}].goodsInfo.name" type="hidden" value="{{row.goodsInfo.name}}"/>
  <input id="storageInfoList{{idx}}_goodsInfoAmount" name="storageInfoList[{{idx}}].goodsInfo.amount" type="hidden" value="{{row.goodsInfo.amount}}"/>
  <input id="storageInfoList{{idx}}_warehouseId" name="storageInfoList[{{idx}}].warehouse.id" type="hidden" value="{{row.warehouse.id}}" readonly class="form-control" />
  <input id="storageInfoList{{idx}}_amount" name="storageInfoList[{{idx}}].amount" type="hidden" value="{{row.amount}}" readonly class="form-control" />
  <input id="storageInfoList{{idx}}_qrCodeId" name="storageInfoList[{{idx}}].qrCode.id" type="hidden" value="{{row.qrCode.id}}" readonly class="form-control" />

</script>

<script id="nameTpl" type="text/html">
  <input id="storageInfoList{{idx}}_name" name="storageInfoList[{{idx}}].name" type="text" readonly value="{{row.name}}" onchange="onInputChange('{{idx}}', this, 'name')"   class="form-control "/>
</script>

<script id="typeTpl" type="text/html">//<!--
    <sys:treeselect id="storageInfoList{{idx}}_type" name="storageInfoList[{{idx}}].type.id" value="{{row.type.id}}" labelName="storageInfoList{{idx}}.type.name" labelValue="{{row.type.name}}"
							title="品名代码" url="/warehouse/materialtype/materialType/treeData" cssClass="form-control  " disabled="disabled" allowClear="true" allowSearch="true" callback="onSelectType" />//-->
</script>

<script id="modelTpl" type="text/html">
  <input id="storageInfoList{{idx}}_model" name="storageInfoList[{{idx}}].model" type="text" value="{{row.model}}" readonly onchange="onInputChange('{{idx}}', this, 'model')"    class="form-control "/>
</script>
<script id="shelvesTpl" type="text/html">//<!--
  {{#row.readonly}}
  <sys:shelvesselect id="storageInfoList{{idx}}_shelves" name="storageInfoList[{{idx}}].shelves.id" value="{{row.shelves.id}}" labelName="storageInfoList[{{idx}}].shelves.name" labelValue="{{row.shelves.name}}"
                   cssClass="form-control required" iframeUrl="/warehouse/storage/storage/form" disabled="disabled"></sys:shelvesselect>
  {{/row.readonly}}
  {{^row.readonly}}
  <sys:shelvesselect id="storageInfoList{{idx}}_shelves" name="storageInfoList[{{idx}}].shelves.id" value="{{row.shelves.id}}" labelName="storageInfoList[{{idx}}].shelves.name" labelValue="{{row.shelves.name}}"
                     cssClass="form-control required" iframeUrl="/warehouse/storage/storage/form" callback="onSelectShelves"></sys:shelvesselect>//-->
  {{/row.readonly}}
</script>
<script id="remarksTpl" type="text/html">
  {{#row.readonly}}
  <textarea id="storageInfoList{{idx}}_remarks" name="storageInfoList[{{idx}}].remarks" rows="2"  readonly class="form-control ">{{row.remarks}}</textarea>
  {{/row.readonly}}
  {{^row.readonly}}
  <textarea id="storageInfoList{{idx}}_remarks" name="storageInfoList[{{idx}}].remarks" rows="2"  onchange="onInputChange('{{idx}}', this, 'remarks')"  class="form-control ">{{row.remarks}}</textarea>
  {{/row.readonly}}
</script>
<script id="warehouseTpl" type="text/html">
  <input id="storageInfoList{{idx}}_warehouseName" name="storageInfoList[{{idx}}].warehouse.name" type="text" value="{{row.warehouse.name}}" readonly  class="form-control "/>
</script>
<script id="scanResultTpl" type="text/html">
  <br>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-2 text-right">
        <label>扫码结果:</label>
      </div>
      <div class="col-xs-10">
        <input type="text" id="scanResult" class="form-control" onchange="onScanChange(this)">
        <span class="text-danger">请切换英文输入法</span>
      </div>
    </div>
  </div>
  <br>
</script>