<template>
  <ele-modal
    width="80vw"
    :visible.sync="visible"
    custom-class="ele-dialog-form"
    :before-close="cancel"
    title="出库详情"
    :maxable="true"
    append-to-body
  >
    <ele-pro-table
      ref="table"
      :columns="outColumns"
      :datasource="outList"
      row-key="id"
      cache-key="entrust_list_data"
      :height="tableHeight"
      :pageSize="20"
      @fullscreen-change="fullscreenChange"
    >
      <template #quantity="{ row }">
        <span>{{ row.quantity }}{{ row.measuringUnit }}</span>
      </template>

      <template #sourceType="{ row }">
        <el-tag size="small">{{ typeMap[row.sourceType] }}</el-tag>
      </template>

      <template #weight="{ row }">
        <span>{{ row.weight }}{{ row.weightUnit }}</span>
      </template>
    </ele-pro-table>
  </ele-modal>
</template>

<script>
  import { getOutOrderList } from '@/api/requirementListPlan';

  const TYPE_MAP = {
    1: '领料单',
    2: '领用单',
    3: '下料单'
  };

  export default {
    data() {
      return {
        form: {},
        outList: [],
        rules: {},
        id: '',
        submitting: false,

        tableHeight: 'calc(100vh - 595px)',
        detailList: [],
        selection: [],
        visible: false,
        title: '',

        typeMap: TYPE_MAP
      };
    },

    computed: {
      outColumns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'batchNo',
            label: '批次号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryCode',
            label: '物品编码',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '物品名称',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryLevelName',
            label: '物品分类名称',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'materialRequirements',
            label: '物料需求单号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'planCode',
            label: '生产计划单号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'quantity',
            slot: 'quantity',
            label: '数量',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'weight',
            slot: 'weight',
            label: '重量',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'sourceCode',
            label: '来源编码',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'sourceType',
            slot: 'sourceType',
            label: '来源类型',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'substanceCode',
            label: '物品资产编码',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'supplierCode',
            label: '供应商编码',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'supplierName',
            label: '供应商名称',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'warehouseName',
            label: '来源仓库名称',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createUserName',
            label: '创建人',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          }
        ];
      }
    },

    methods: {
      open(item, sourceCode) {
        this.visible = true;

        this.outDataDetailData(item.categoryCode, sourceCode);
      },

      async outDataDetailData(categoryCode, sourceCode) {
        const res = await getOutOrderList({
          categoryCode,
          sourceCode
        });
        this.outList = res.list || [];
      },

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

      fullscreenChange(fullscreen) {
        this.tableHeight = fullscreen
          ? 'calc(100vh - 120px)'
          : 'calc(100vh - 595px)';
      }
    }
  };
</script>

<style scoped>
  ::v-deep .el-form-item {
    margin-bottom: 15px !important;
  }

  .btn_box {
    margin-bottom: 6px;
  }
</style>
