<template>
  <ele-modal
    :visible.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    :maxable="true"
    append-to-body
    width="85%"
    :title="title"
  >
    <ele-pro-table
      ref="sourceTable"
      :columns="cloums"
      :datasource="datasource"
      row-key="id"
      :cache-key="cacheKeyUrl"
      :need-page="false"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:weight="{ row, $index }">
        <span>{{ row.weight || 0 }}{{ row.weightUnit }}</span>
      </template>
    </ele-pro-table>

    <template slot="footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button
        size="mini"
        type="primary"
        :loading="loadingBtn"
        @click="save()"
        >确 定</el-button
      >
    </template>
  </ele-modal>
</template>

<script>
  import { feedOutInOrder } from '@/api/produce/feeding';
  export default {
    data() {
      return {
        visible: false,
        title: '出库单',
        outList: [],
        workOrderId: '',
        taskId: '',
        selection: [],
        cacheKeyUrl: 'feeding-outboundOrderDialog',
        loadingBtn: false,
        chooseData: []
      };
    },
    computed: {
      cloums() {
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            fixed: 'left',
            reserveSelection: true
          },
          {
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号',
            width: 55,
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'batchNo',
            label: '批次号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '名称',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '编码',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'feedQuantity',
            label: '数量',
            width: 90,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'unit',
            label: '单位',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'extInfo.engrave',
            label: '刻码',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'weight',
            slot: 'weight',
            label: '重量',
            width: 120,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建日期',
            width: 200,
            align: 'center',
            showOverflowTooltip: true
          }
        ];
      }
    },
    methods: {
      handleClose() {
        this.visible = false;
      },

      async datasource({ page, limit, where }) {
        const res = await feedOutInOrder({
          workOrderId: this.workOrderId,
          taskId: this.taskId,
          pageNum: page,
          size: limit
        });
        return res;
      },

      open(id, item) {
        this.workOrderId = id;
        this.taskId = item.currentTaskDiagram.taskId;
        this.visible = true;
      },

      handleSelectionChange(item) {
        this.chooseData = item;
      },

      handleClose() {
        this.visible = false;
      },

      save() {
        if (!this.chooseData || this.chooseData.length === 0) {
          this.$message.warning('请选择出库物料');
          return;
        }

        this.$emit('chooseData', this.chooseData);
        this.visible = false;
      }
    }
  };
</script>

<style></style>
