<template>
  <el-dialog
    title="选择产品"
    :visible.sync="equipmentdialog"
    :before-close="handleClose"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    append-to-body
    width="60%"
  >
    <div>
      <el-row>
        <el-col :span="24" class="topsearch">
          <el-form>
            <el-row>
              <el-col :span="6">
                <el-input
                  v-model="code"
                  placeholder="请输入物料编码"
                  size="small"
                ></el-input>
              </el-col>
              <el-col :span="6" style="margin-left: 10px">
                <el-button type="primary" size="small" @click="reload"
                  >搜索</el-button
                >
                <el-button size="small" @click="reset">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="6" class="tree_col">
          <AssetTree
            @handleNodeClick="handleNodeClick"
            :treeIds="['9', '1']"
            ref="treeList"
          />
        </el-col>
        <el-col :span="18" class="table_col" v-if="equipmentdialog">
          <ele-pro-table
            ref="equiTable"
            :columns="columns"
            :datasource="datasource"
            :selection.sync="selection"
          
            cache-key="systemRoleTable3"
            row-key="id"
            height="50vh"
            @done="setSelect"
          >
          </ele-pro-table>
        </el-col>
      </el-row>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import AssetTree from '@/components/AssetTree/treeIndex.vue';
  import { getList } from '@/api/classifyManage/itemInformation';
  export default {
    components: {
      AssetTree
    },
    props: {
    
    },
    data() {
      return {
        equipmentdialog: false,
        selectIds: [],
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            selectable: (row, index) => {
            return !this.selectIds.some((it) => it == row.id);
          },
            align: 'center',

            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '物品编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            slot: 'code'
          },
          {
            prop: 'name',
            label: '物品名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          }
        ],
        tableList: [],
        categoryLevelId: null,
        code: null,
        selection: []
      };
    },

    watch: {},
    methods: {
      async datasource({ page, limit }) {
        const params = {
          code: this.code,
          pageNum: page,
          size: limit,
          categoryLevelId: this.categoryLevelId,
          isProduct: true,
          isEnable: 1
        };
        const data = await getList(params);
        this.tableList = data.list;
        return data;
      },
      open(ids) {
        this.selectIds = ids;
        console.log( this.selectIds)
        this.equipmentdialog = true;
 
      },
      handleNodeClick(data) {
        this.categoryLevelId = data.id;
        this.reload();
      },
      reload() {
        this.$refs.equiTable.reload();
      },
      setSelect() {},
      handleClose() {
        this.equipmentdialog = false;
        this.code = '';
        this.$refs.equiTable.clearSelection();
      },
      reset() {
        this.code = null;
        this.reload();
      },

      // 选择
      selected() {
        this.$emit('choose', this.selection);
        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    max-height: 530px;
    overflow: auto;
  }
  .table_col {
    padding-left: 10px;
    ::v-deep .el-table th.el-table__cell {
      background: #f2f2f2;
    }
  }
  .pagination {
    text-align: right;
    padding: 10px 0;
  }
  .btns {
    text-align: center;
    padding: 10px 0;
  }
  .topsearch {
    margin-bottom: 15px;
  }
</style>
