<template>
  <el-dialog
    title="选择"
    :visible.sync="materialdialog"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :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.trim="searchKey"
                  placeholder="输入编码或名称"
                  size="small"
                ></el-input>
              </el-col>
              <el-col :span="6" style="margin-left: 10px">
                <el-button type="primary" size="small" @click="searchByKeyWords"
                  >搜索</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"
            @setRootId="setRootId"
            :id="id"
            ref="treeList"
          />
        </el-col>
        <el-col :span="18" class="table_col">
          <ele-pro-table
            ref="table"
            :columns="columns"
            @done="handleDone"
            @update:selection="selectionChange"
            row-key="id"
            :initLoad="false"
            :selection.sync="selectionList"
            :datasource="datasource"
            height="45vh"
          >
          </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';
  import { getList } from '@/api/classifyManage/itemInformation';
  export default {
    props: {
      id: {
        type: String,
        default: '1'
      }
    },
    components: {
      AssetTree
    },
    data () {
      return {
        materialdialog: false,
        selectionList: [],
        total: 0,
        searchKey: null,
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            fixed: 'left',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '物品编码',
            align: 'center'
          },
          {
            prop: 'name',
            label: '物品名称',
            align: 'center'
          },
          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center'
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center'
          },
  
          {
            type: 'selection',
            width: 55,
            align: 'center',
            fixed: 'right',
            reserveSelection: true
          }
        ]
      };
    },
    watch: {
      selectionList (newVal, oldVal) {
        console.log(newVal, oldVal);
        if (newVal.length < oldVal.length) {
          const arr = oldVal.filter(
            (item) => !newVal.find((p) => p.id === item.id)
          );

          this.memoList = this.memoList.filter(
            (item) => !arr.find((p) => p.id === item.id)
          );
        }
      }
    },
    methods: {
      open (memoList) {
        this.memoList = memoList;
        this.materialdialog = true;
        if (this.current?.id) {
          this.reload();
        }
      },
      handleNodeClick (info) {
        this.current = info;
        this.reload();
      },
      // 获取根节点id
      setRootId (id) {
        this.rootId = id;
      },
      handleDone ({ data }) {
        if (this.memoList.length && data.length) {
          this.$nextTick(() => {
            this.$refs.table.setSelectedRowKeys(
              this.memoList.map((i) => i.materialId)
            );
          });
        }
      },
      selectionChange (...rest) {
        console.log(rest);
      },
      handleClose () {
        this.materialdialog = false;
        this.searchKey = '';
      },

      datasource ({ page, limit }) {
        return getList({
          pageNum: page,
          size: limit,
          searchKey: this.searchKey
        });
      },
      reload () {
        this.$refs.table.reload();
      },
      // 弹窗 - 按关键字搜索
      searchByKeyWords () {
        this.reload();
      },
      // 重置
      reset () {
        this.searchKey = '';
        this.reload();
      },
      selected () {
        if (!this.selectionList.length) {
          return this.$message.error('请选择物料！');
        }

        this.$emit('success', [...this.selectionList, ...this.memoList]);

        this.handleClose();
      }
    }
  };
</script>

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