<template>
  <ele-modal
    :visible.sync="visible"
    title="在制品列表"
    v-if="visible"
    width="65vw"
    append-to-body
    :maxable="true"
  >
    <ele-pro-table
      ref="entrustCreateTable"
      :columns="columns"
      :datasource="workinProgress"
      :selection.sync="selection"
      :current.sync="current"
      highlight-current-row
      row-key="id"
      height="40vh"
      :row-click-checked="true"
      :row-click-checked-intelligent="false"
      @update:selection="handleSelectionChange"
    >
      <template v-slot:quantity="{ row }">
        <span>{{ row.quantity }}{{ row.measuringUnit }}</span>
      </template>

      <template v-slot:weight="{ row }">
        <span>{{ row.weight }}{{ row.weightUnit }}</span>
      </template>

      <template v-slot:rootCategoryLevelId="{ row }">
        <el-tag>{{ typeName[Number(row.rootCategoryLevelId)] }}</el-tag>
      </template>
    </ele-pro-table>

    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save"> 确定 </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import { pleaseEntrustAllGoodsDetail } from '@/api/entrust';

  import { typeName } from '@/views/produce/components/common.js';
  export default {
    data() {
      return {
        visible: false,
        workinProgress: [],
        selection: [],
        current: null,
        id: '',
        typeName,
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'categoryName',
            label: '名称',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },

          {
            prop: 'quantity',
            slot: 'quantity',
            label: '数量',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },

          {
            prop: 'workOrderCode',
            label: '生产工单号',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },

          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },

          {
            prop: 'categoryCode',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'weight',
            slot: 'weight',
            label: '重量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'rootCategoryLevelId',
            slot: 'rootCategoryLevelId',
            label: '类型',
            align: 'center',
            showOverflowTooltip: true
          }
        ],
        allSelection: []
      };
    },

    methods: {
      open(id, list) {
        this.visible = true;
        this.getDetail(id);

        console.log('list', list);

        this.allSelection = list || [];
        this.$nextTick(() => {
          this.allSelection.forEach((item) => {
            this.$refs.entrustCreateTable.toggleRowSelection(item, true);
          });
        });
      },

      async getDetail(id) {
        await pleaseEntrustAllGoodsDetail({
          id
        }).then((res) => {
          this.workinProgress = res.data;
        });
      },

      handleSelectionChange(data) {
        this.allSelection = data;
      },

      save() {
        if (this.allSelection.length == 0) {
          return this.$message.warning('请至少选择一条在制品数据');
        }

        this.$emit('chooseData', this.allSelection);
        this.visible = false;
      },

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

<style></style>
