<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="equipmentdialog"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="65%"
  >
    <div>
      <el-row>
        <el-col :span="6" class="tree_col">
          <AssetTree
            :props="defaultProps"
            :default-expanded-keys="defaultExpandedKeys"
            :expand-on-click-node="false"
            node-key="id"
            paramsType="type"
            :type="typeValue"
            :init="false"
            ref="tree"
            :highlight-current="true"
            @handleNodeClick="handleNodeClick"
          />
        </el-col>
        <el-col :span="18" class="table_col">
          <ele-pro-table
            ref="table"
            :initLoad="false"
            :columns="columns"
            row-key="id"
            :datasource="datasource"
            :selection.sync="tableSelectionList"
            height="calc(100vh - 265px)"
            full-height="calc(100vh - 116px)"
            tool-class="ele-toolbar-form"
            cache-key="systemOrgUserTable"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-row>
                <el-col :span="6">
                  <el-input
                    v-model="searchForm.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>
            </template>
          </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 {
    components: { AssetTree },
    props: {
      typeValue: {
        type: String,
        default: ''
      },
      mapList: {
        type: Array,
        default: []
      },
      dialogTitle: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        treeLoading: false,
        equipmentdialog: false,
        defaultExpandedKeys: [],
        tableData: [],
        currentTreeData: {},
        pagination: {
          page: 1,
          size: 10,
          total: 0
        },
        searchForm: {},
        defaultProps: {
          children: 'children',
          value: 'code',
          label: 'name'
        },
        currentKey: null,
        tableSelectionList: []
      };
    },
    computed: {
      columns () {
        const privateList = [];
        if (
          this.dialogTitle != '选择设备' &&
          this.dialogTitle != '选择备品备件'
        ) {
          privateList.push({
            prop: 'brandNum',
            label: '牌号'
          });
        }
        if (this.dialogTitle != '选择物料') {
          privateList.push({
            prop: 'modelType',
            label: '型号'
          });
        }
        if (this.dialogTitle == '选择模具') {
          privateList.push({
            prop: 'shrinkageCoefficient',
            label: '收缩系数',
            formatter (_row, _column, cellValue) {
              return JSON.parse(_row.extendField).shrinkageCoefficient;
            }
          });
          privateList.push({
            prop: 'dieBodyModel',
            label: '大模体型号',
            formatter (_row, _column, cellValue) {
              return JSON.parse(_row.extendField).dieBodyModel;
            }
          });
        }

        return [
          {
            columnKey: 'selection',
            align: 'center',
            type: 'selection'
          },
          {
            prop: 'code',
            showOverflowTooltip: true,
            label: '物品编码'
          },
          {
            prop: 'name',
            label: '物品名称'
          },
          ...privateList
        ];
      }
    },
    watch: {
      equipmentdialog (val) {
        if (val) {
          this.$nextTick(() => {
            this.$refs.tree.getTreeData();
          });
          // if(this.tableData.length)  this.$refs.tableRef.clearSelection()
        }
      },
      typeValue (val) {
        if (val) {
          this.currentKey = null;
        }
      }
    },
    methods: {
      datasource ({ page, where, limit }) {
        return getList({
          ...this.searchForm,
          pageNum: page,
          size: limit
        }).then((res) => {
          setTimeout(() => {
            const keys = [];
            this.mapList.forEach((item) => {
              const row = res.list.find((i) => i.id === item.id);
              if (row) {
                keys.push(row.id);
              }
            });
            this.$refs.table.setSelectedRowKeys(keys);
          }, 100);

          return res;
        });
      },
      handleClose () {
        this.equipmentdialog = false;
        this.tableSelectionList = [];
      },

      handleCurrent (page) {
        this.pagination.page = page;
        this.handleList();
      },
      handleSize (size) {
        this.pagination.page = 1;
        this.pagination.size = size;
        this.handleList();
      },

      handleSelectionChange (val) {
        this.tableSelectionList = val;
      },

      toDelete (val) {
        console.log('触发删除', val);
      },

      getRowKeys (row) {
        return row.id;
      },

      // 确定
      selected () {
        this.$emit('submit', this.tableSelectionList);
        this.handleClose();
      },

      // 树点击事件
      handleNodeClick (data, node) {
        if (data.id === this.currentTreeData.id) return;
        this.currentTreeData = data;
        this.searchForm.categoryLevelId = data.id;
        this.$refs.table.reload();
      },

      // 弹窗 - 按关键字搜索
      searchByKeyWords () {
        if (!this.currentTreeData) {
          this.$message.warning('请先选择设备！');
          return;
        }
        this.pagination.page = 1;
        this.$refs.table.reload();
      },
      // 重置
      reset () {
        this.pagination.page = 1;
        this.searchForm.searchKey = '';
        this.$refs.table.reload();
      },

      // 设置默认高亮行
      setCurrentKey (id) {
        this.currentKey = id;
        this.$refs.tree.setCurrentKey(this.currentKey);
      }
    }
  };
</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;
    :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>
