<template>
  <MesBox v-model="model" :lazy="true" title="选择工装夹具" :height="700" :width="1500" :padding="15">
    <!-- 设置查询条件 -->
    <div style="padding-bottom: 10px">
      <span style="margin-right: 10px">工装夹具编码：</span>
      <el-input placeholder="请输入工装夹具编码" style="width: 200px" v-model="ToolCode" />
      <span style="margin-right: 10px;margin-left: 10px">工装夹具名称：</span>
      <el-input placeholder="请输入工装夹具名称" style="width: 200px" v-model="ToolName" />
      <el-button type="primary" style="margin-left:20px" size="medium" @click="search"><i class="el-icon-search"></i>搜索
      </el-button>
    </div>

    <!-- imes-table配置的这些属性见MesTable组件api文件 -->
    <mes-table ref="mytable" :loadKey="true" :columns="columns" :pagination="pagination" :pagination-hide="false"
      :max-height="600" :url="url" :index="true" :single="false" :defaultLoadPage="defaultLoadPage"
      @loadBefore="loadTableBefore" @loadAfter="loadTableAfter"></mes-table>
    <!-- 设置弹出框的操作按钮 -->
    <template #footer>
      <div>
        <el-button size="mini" type="primary" @click="addRow()"><i class="el-icon-plus"></i>添加选择的数据</el-button>
        <el-button size="mini" icon="el-icon-close" @click="model = false">关闭</el-button>
      </div>
    </template>
  </MesBox>
</template>
<script>
  import MesBox from "@/components/basic/MesBox.vue";
  import MesTable from "@/components/basic/MesTable.vue";
  import { thisTypeAnnotation } from "@babel/types";
  export default {
    components: {
      MesBox: MesBox,
      MesTable: MesTable,
    },
    data() {
      return {
        model: false,
        defaultLoadPage: false, //第一次打开时不加载table数据，openDemo手动调用查询table数据
        UserTrueName: "", //查询条件字段
        UserName: "", //查询条件字段
        modelType: "",
        url: "api/Tools_Tool/getSelectorTools",//加载数据的接口
        columns: [{field:'ToolId',title:'工装夹具主键',type:'guid',width:110,hidden:true,readonly:true,require:true,align:'left'},
                       {field:'ToolName',title:'工装夹具名称',type:'string',link:true,sort:true,width:120,require:true,align:'left',sort:true},
                       {field:'ToolCode',title:'工装夹具编码',type:'string',sort:true,width:120,align:'left'},
                       {field:'Brand',title:'品牌',type:'string',width:120,align:'left'},
                       {field:'Spec',title:'型号',type:'string',width:120,align:'left'},
                       {field:'ToolTypeId',title:'工装夹具类型',type:'guid',bind:{ key:'ToolTypeList',data:[]},width:110,align:'left'},
                       {field:'Quantity',title:'数量',type:'int',width:110,require:true,align:'left'},
                       {field:'QuantityAvail',title:'可用数量',type:'int',width:110,align:'left'},
                       {field:'MaintenType',title:'保养维护方式',type:'string',bind:{ key:'MaintenTypeList',data:[]},width:120,align:'left'},
                       {field:'NextMaintenDate',title:'下次保养日期',type:'date',sort:true,width:110,align:'left'},
                       {field:'Status',title:'状态',type:'string',bind:{ key:'ToolStatusList',data:[]},width:120,align:'left'},
                       {field:'Remark',title:'备注',type:'string',width:220,align:'left'},
                       {field:'CreateID',title:'创建人编号',type:'int',width:80,hidden:true,align:'left'},
                       {field:'Creator',title:'创建人',type:'string',width:130,align:'left'},
                       {field:'CreateDate',title:'创建时间',type:'datetime',sort:true,width:110,align:'left',sort:true},
                       {field:'ModifyID',title:'修改人编号',type:'int',width:80,hidden:true,align:'left'},
                       {field:'Modifier',title:'修改人',type:'string',width:130,align:'left'},
                       {field:'ModifyDate',title:'修改时间',type:'datetime',sort:true,width:110,align:'left',sort:true}],
        pagination: {}, //分页配置，见mestable组件api
      };
    },
    methods: {
      open() {
        this.model = true;
        //打开弹出框时，加载table数据
        this.$nextTick(() => {
          this.$refs.mytable.load();
        });
      },
      search() {
        //点击搜索
        this.$refs.mytable.load();
      },
      getFieldDicValue(fieldName, fieldValue) {
        this.columns.forEach(item => {
          if (item.field == fieldName) {
            var result = item.bind.data.find(val => val.key == fieldValue)
            return result;
          }
        })
      },
      addRow() {
        var rows = this.$refs.mytable.getSelected();
        if (!rows || rows.length == 0) {
          return this.$message.error("请选择行数据");
        }
        //获取回写到明细表的字段
        let _rows = rows.map((row) => {
          return {
            ToolId: row.ToolId,
            ToolName: row.ToolName,
            ToolCode: row.ToolCode,
            Spec: row.Spec,
            Brand: row.Brand
          };
        });
        this.$emit('parentCall', ($parent) => {
          $parent.$refs.detail.rowData.unshift(..._rows);
        });
        //关闭当前窗口
        this.model = false;
      },
      //这里是从api查询后返回数据的方法
      loadTableAfter(row) { },
      loadTableBefore(params) {
        //查询前，设置查询条件
        if (this.ToolName) {
          params.wheres.push({ name: "ToolName", value: this.ToolName, displayType: "like" });
        }
        if (this.ToolCode) {
          params.wheres.push({ name: "ToolCode", value: this.ToolCode, displayType: "like" });
        }
        return true;
      },
    },
  };
</script>