<template>
  <div class="add-table">
    <el-dialog
      :append-to-body="true"
      top="15vh"
      :title="dialogParams.title"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div class="main">
        <div class="left">
          <el-input
            size="small"
            v-model="item"
            placeholder="输入物品编码或名称"
          ></el-input>
          <div class="tree-layout">
            <AssetTree
              ref="assetTreeRef"
              :id="localCategoryLevelId"
              @handleNodeClick="handleNodeClick"
            />
          </div>
        </div>
        <div class="right">
          <div class="but">
            <el-button size="small" type="primary">查询</el-button>
            <el-button size="small">重置</el-button>
          </div>
          <div class="table">
            <ele-pro-table
              ref="table"
              :columns="columns"
              :datasource="datasource"
              height="calc(100vh - 500px)"
              class="dict-table"
              @selection-change="handleSelectionChange"
            >
            </ele-pro-table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import AssetTree from '@/components/AssetTree';
  import { getList, pageSubstance } from '@/api/classifyManage/itemInformation';
  export default {
    components: { AssetTree },
    props: {
      categoryLevelId: {
        typeof: String,
        default: ''
      }
    },
    data() {
      return {
        localCategoryLevelId: '',
        dialogVisible: false,
        loading: false,
        item: '',
        columns: [
          {
            type: 'selection',
            width: '55px',
            align: 'center'
          },
          {
            prop: 'code',
            label: '物品编码',
            minWidth: 100
          },
          {
            prop: 'name',
            label: '物品名称',
            showOverflowTooltip: true,
            minWidth: 130
          },
          {
            prop: 'modelType',
            label: '型号',
            minWidth: 130
          }
        ],
        dialogParams: {},
        selectData: []
      };
    },
    watch: {
      categoryLevelId(newValue) {
        // 监听 categoryLevelId 的变化，并更新本地的 localCategoryLevelId
        this.localCategoryLevelId = newValue;
      }
    },
    methods: {
      submit() {
        try {
          this.loading = true;
          this.$emit('successTable', this.selectData);
          this.dialogVisible = false;
        } finally {
          this.loading = false;
        }
      },
      handleSelectionChange(row) {
        this.selectData = row;
      },
      /* 表格数据源 */
      datasource({ page, where, limit }) {
        return getList({
          ...where,
          pageNum: page,
          size: limit,
          isProduct: false,
          categoryLevelId: this.localCategoryLevelId,
          rootCategoryLevelId: 4
        });
      },
      open(row, data) {
        this.dialogVisible = true;
        this.dialogParams = row;
        this.localCategoryLevelId = this.categoryLevelId;

        this.$nextTick(() => {
          this.$refs.table.reload();
          this.$refs.table.clearSelection();
          if (data.length != 0) {
            // this.$refs.tablesetSelection([1])
            const arr = data.map((item) => {
              return item.id;
            });
          } else {
            this.selectData = [];
          }
        });
      },
      handleClose() {
        this.dialogVisible = false;
      },
      handleNodeClick(data) {
        this.localCategoryLevelId = data.id;
        this.$refs.table.reload();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .main {
    display: flex;
    .left {
      width: 30%;
      margin-right: 5px;
      .tree-layout {
        margin-top: 10px;
        border: 1px solid #ededed;
        height: calc(100vh - 453px);
      }
    }
    .right {
      width: 70%;
      margin-left: 5px;
      .table {
        margin-top: 10px;
      }
    }
  }
</style>
