<template>
  <ele-modal
    width="60%"
    :visible.sync="visible"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    append-to-body
    :maxable="true"
    :resizable="true"
  >
    <!-- <div class="ele-body" style="height:60vh;overflow: auto;"> -->
    <!-- <el-card shadow="never" v-loading="loading"> -->
    <!-- <ele-split-layout
        width="210px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
          <div class="ele-border-lighter sys-organization-list">
            <el-tree
              ref="tree"
              :data="data"
              highlight-current
              :draggable="true"
              node-key="id"
              :expand-on-click-node="false"
              :default-expand-all="true"
              @node-click="onNodeClick"
            >
            </el-tree>
          </div> -->
    <!-- <template v-slot:content> -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="useList"
      tool-class="ele-toolbar-form"
      :needPage="false"
      row-key="id"
      :selection.sync="selection"
    >
      <template v-slot:toolbar v-if="type != 'detail'">
        <el-button type="primary" @click="fileShow = true"
          >选择质检工具</el-button
        >
      </template>
      <template v-slot:action="{ row }">
        <el-popconfirm
          class="ele-action"
          title="确定要删除吗？"
          @confirm="remove(row)"
        >
          <template v-slot:reference v-if="type != 'detail'">
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <!-- </template> -->
    <!-- </ele-split-layout> -->
    <!-- </el-card> -->

    <!-- </div> -->
    <template v-slot:footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="addUserToolList"> 确认 </el-button>
    </template>

    <ele-modal
      width="60%"
      :visible.sync="fileShow"
      :close-on-click-modal="false"
      custom-class="ele-dialog-form"
      append-to-body
      :maxable="true"
      :resizable="true"
    >
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        tool-class="ele-toolbar-form"
        height="500px"
        :needPage="false"
        row-key="id"
        :selection.sync="selection"
        :toolbar="false"
      >
      </ele-pro-table>
      <template v-slot:footer>
        <el-button @click="fileShow = false">取消</el-button>
        <el-button type="primary" @click="addTemplate"> 确认 </el-button>
      </template>
    </ele-modal>
  </ele-modal>
</template>

<script>
  export default {
    data() {
      return {
        selection: [],
        loading: false,
        fileShow: false,
        visible: false,
        datasource: [],
        useList: [],
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            label: '序号',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            label: '物品编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            slot: 'name',
            prop: 'name',
            label: '物品名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryModel',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
          // {
          //     prop: 'measureQuantity',
          //     label: '计量数量',
          //     sortable: 'custom',
          //     showOverflowTooltip: true,
          //     width: 130,
          //     align: 'center'
          // },
          // {
          //     prop: 'measureUnit',
          //     label: '计量单位',
          //     align: 'center'
          // },
          // {
          //     prop: 'weight',
          //     label: '重量',
          //     showOverflowTooltip: true
          // },
          // {
          //     prop: 'weightUnit',
          //     label: '重量单位',
          //     showOverflowTooltip: true
          // },
        ],
        data: []
      };
    },
    methods: {
      open(val, type, sList) {
        this.visible = true;
        this.type = type;
        this.useList = val;
        this.datasource = sList;
      },
      addUserToolList() {
        // if (this.selection.some((item) =>
        //     this.useList.some((i) => i.code == item.code))) {
        //     return this.$message.error('选择的物品已经存在列表了');
        // }

        this.$emit('success', this.useList);
        this.visible = false;
        this.init();
      },
      addTemplate() {
        this.useList = this.selection;
        this.fileShow = false;
      },
      remove(row) {
        this.useList = this.useList.filter((item) => item.code != row.code);
      },
      init() {
        this.selection = [];
      }
    }
  };
</script>
