<template>
  <div class="ele-body">
    <el-card shadow="never">
      <EquipmentSearch @search="reload" />
      <ele-split-layout
        width="244px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="ele-border-lighter split-layout-right-content">
          <AssetTree
            ref="assetTreeRef"
            id="4"
            @handleNodeClick="handleNodeClick"
          />
        </div>
        <!-- 表格 -->
        <template v-slot:content>
          <ele-pro-table
            ref="table"
            :columns="columns"
            :datasource="datasource"
            height="calc(100vh - 350px)"
            :initLoad="false"
            :current.sync="current"
            highlight-current-row
            class="dict-table"
            tool-class="ele-toolbar-actions"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button type="primary" @click="handleLink('5')"
                >关联模具</el-button
              >
              <el-button type="primary" @click="handleLink('6')"
                >关联备品备件</el-button
              >
            </template>
          </ele-pro-table>
        </template>
      </ele-split-layout>
    </el-card>
    <linkMaterialDialog ref="linkMaterialDialogRef" @success="success" />
  </div>
</template>

<script>
  import AssetTree from '@/components/AssetTree';
  import EquipmentSearch from './components/equipment-search.vue';
  import linkMaterialDialog from './components/link-material-dialog.vue';
  import { getList } from '@/api/classifyManage/itemInformation';

  export default {
    name: 'SystemDictionary',
    components: { AssetTree, EquipmentSearch, linkMaterialDialog },
    data () {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            reserveSelection: true,
            label: '序号'
          },
          {
            prop: 'code',
            label: '设备编码'
          },
          {
            prop: 'name',
            label: '设备名称',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号'
          },
          {
            prop: 'modelType',
            label: '型号'
          },
          {
            prop: 'measuringUnit',
            label: '计量单位'
          },
          {
            prop: 'packingUnit',
            label: '包装单位'
          }
        ],
        categoryLevelId: '9',
        current: null
      };
    },

    methods: {
      /* 表格数据源 */
      datasource ({ page, where, limit }) {
        return getList({
          ...where,
          pageNum: page,
          size: limit,
          categoryLevelId: this.categoryLevelId
        });
      },
      success () {
        this.reload();
      },
      handleLink (type) {
        if (!this.current) {
          return this.$message.error('请选择设备！');
        }

        this.$refs.linkMaterialDialogRef.open(type, this.current);
      },
      /* 刷新表格 */
      reload (where) {
        this.$refs.table.reload({ where: where });
      },
      handleNodeClick (data) {
        this.categoryLevelId = data.id;
        this.reload();
      }
    }
  };
</script>

<style lang="scss" scoped></style>
