<template>
  <el-dialog
    title="详情"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
  >
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      v-if="detailType == 1"
      :columns="columns"
      cache-key="detailsTable"
      height="calc(100vh - 350px)"
    >
      <template v-slot:totalCount="{ row }">
        {{ row.totalCount }}{{ row.measuringUnit }}
      </template>
    </ele-pro-table>

    <ele-pro-table
      ref="table2"
      v-if="detailType == 2"
      :columns="columns2"
      cache-key="detailsTable2"
      height="calc(100vh - 350px)"
    >
      <template v-slot:totalCount="{ row }">
        {{ row.totalCount }}{{ row.measuringUnit }}
      </template>
    </ele-pro-table>
  </el-dialog>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        visible: false,
        detailType: null
      };
    },

    computed: {
      // 表格列配置
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },

          {
            prop: 'categoryCode',
            label: '编码',
            align: 'center'
          },
          {
            prop: 'categoryName',
            label: '名称',
            align: 'center'
          },

          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center'
          },

          {
            prop: 'modelType',
            label: '型号',
            align: 'center'
          },

          {
            prop: 'specification',
            label: '规格',
            align: 'center'
          },

          {
            slot: 'totalCount',
            label: '数量',
            align: 'center'
          }
        ];
      },

      columns2() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },

          {
            prop: 'categoryCode',
            label: '编码',
            align: 'center'
          },
          {
            prop: 'categoryName',
            label: '名称',
            align: 'center'
          },

          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center'
          },

          {
            prop: 'modelType',
            label: '型号',
            align: 'center'
          },

          {
            prop: 'specification',
            label: '规格',
            align: 'center'
          },

          {
            label: '物料代号',
            prop: 'extInfo.materielCode',
            align: 'center'
          },
          {
            label: '客户代号',
            prop: 'extInfo.clientCode',
            align: 'center'
          },
          {
            label: '刻码',
            prop: 'extInfo.engrave',
            align: 'center'
          },
          {
            label: '重量',
            prop: 'extInfo.newWeight',
            align: 'center'
          },

          {
            slot: 'totalCount',
            label: '数量',
            align: 'center'
          }
        ];
      },

      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    watch: {},
    methods: {
      open(row) {
        this.visible = true;
        if (row.detailType == 1) {
          this.detailType = 1;
          this.$nextTick(() => {
            this.$refs.table.setData([...row.detailList]);
          });
        } else if (row.detailType == 2) {
          this.detailType = 2;
          this.$nextTick(() => {
            this.$refs.table2.setData([...row.detailList]);
          });
        }
      },

      handleClose() {
        this.visible = false;
      }
    }
  };
</script>

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