<%--
  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">
  <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" disabled="true" onclick="addShelve('#detail_table')" title="新增"><i class="fa fa-plus"></i> 批量编辑货架</a>
</div>
<table id="detail_table" data-toolbar="#toolbar"></table>
<script>
  var selector = "#detail_table";
  function initTable(){
    var data = ${fns:toJson(storage.storageInfoList)};
    $(selector).bootstrapTable({
      data: data,
      columns:[{checkbox: true},
        {
          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: 'num',
          title: '货架',
          formatter: function (value,row,index){
            return Mustache.render($("#shelvesTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, ""),{
              row: row,
              idx: index
            })
          }
        },
        {
          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){
            var text = row.delFlag == 1 ? '撤销删除' : '删除';
            var result = ["<a href='javascript:void(0);' onclick=\"removeRow(" + index + ", '" + row.id + "',  '" + row.delFlag + "')\">"+text+"</a>" ]
            return result.join('');
          }
        }
      ]
    })
  }

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

  function addDetail(selector){

    if(!$("#batchNum").val()){
      jp.warning('请选择批次号！');
      return;
    }

    jp.openStorageSelectDialog(true,$("#batchNum").val(),function (){

    })

    // var row = {
    //   id: '',
    //   delFlag: 0,
    //   name: '',
    //   type: {
    //     id: '',
    //     name: ''
    //   },
    //   model: '',
    //   num: '',
    //   remarks: ''
    // }
    //
    // $(selector).bootstrapTable('append', [
    //   row
    // ])
  }
  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]
      })
    }
  }
  function updateRow(index, row){
    $(selector).bootstrapTable('updateRow', {
      index: index,
      row: row
    })
  }
  function onInputChange(rowIndex, elem , field){
    var obj = {};
    obj[field] = $(elem).val()
    var timer = null;
    clearTimeout(timer);
    timer = setTimeout(function (){
      updateRow(rowIndex, obj)
    }, 0)
  }

  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 addShelve(){
    jp.openShelvesSelectDialog(function (){

    })
  }
</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}}_shelvesId" name="storageInfoList[{{idx}}].shelves.id" type="hidden" value="{{row.shelves.id}}" readonly class="form-control" />

</script>

<script id="nameTpl" type="text/html">
  <input id="storageInfoList{{idx}}_name" name="storageInfoList[{{idx}}].name" type="text" 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  " 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}}" onchange="onInputChange('{{idx}}', this, 'model')"    class="form-control "/>
</script>
<script id="shelvesTpl" type="text/html">
 <input id="storageInfoList{{idx}}_shelvesName" name="storageInfoList[{{idx}}].shelves.name" type="text" value="{{row.shelves.name}}" readonly class="form-control" />
</script>
<script id="remarksTpl" type="text/html">
  <textarea id="storageInfoList{{idx}}_remarks" name="storageInfoList[{{idx}}].remarks" rows="4"  onchange="onInputChange('{{idx}}', this, 'remarks')"  class="form-control ">{{row.remarks}}</textarea>
</script>