<template>
  <ele-modal
    width="80vw"
    :visible.sync="visible"
    :close-on-click-modal="false"
    row-key="code"
    custom-class="ele-dialog-form"
    :title="title"
    :maxable="true"
  >
    <div class="form-wrapper">
      <headerTitle :title="type == 1 ? '原数据' : ''"> </headerTitle>
      <ele-pro-table
        ref="table"
        :needPage="false"
        :columns="columns"
        :datasource="List"
      >
      <template v-slot:code="{ row }">
          <el-link  :underline="false" >
            {{ row.code }}
          </el-link>
        </template>

      </ele-pro-table>


      <headerTitle v-if="type == 1" title="拆批数据明细" class="mt20">
      </headerTitle>
      <ele-pro-table
        v-if="type == 1 && List.length > 0"
        ref="unpackTable"
        :needPage="false"
        :columns="columns"
        :datasource="List[0].childList"
      >

      <template v-slot:code="{ row }">
          <el-link v-if="rowObj.code == row.code" type="primary" :underline="false">
            {{ row.code }}
          </el-link>
          <span v-else>  {{ row.code }}</span>
        </template>
      
      </ele-pro-table>
    </div>
  </ele-modal>
</template>

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

        List: [],
        rowObj: {},
        title: '',
        type: 1
      };
    },

    computed: {
      // 表格列配置
      columns() {
        return [
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },

          {
            prop: 'code',
            label: '计划编号',
            align: 'center',
            minWidth: 200,
            slot:'code'
          },

          {
            prop: 'productCode',
            label: '产品编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'productName',
            label: '产品名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },

          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            minWidth: 150,

            showOverflowTooltip: true
          },
          {
            prop: 'model',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'produceRoutingName',
            label: '工艺路线',
            align: 'center',
            minWidth: 120
          },
          {
            prop: 'requiredFormingNum',
            label: '要求生产数量',
            align: 'center',
            minWidth: 200
          },

          {
            prop: 'reqMoldTime',
            label: '要求完成日期',
            align: 'center',
            minWidth: 200
          }
        ];
      }
    },
    methods: {
      open(type, row) {
        this.type = type;
        this.title = type == 1 ? '拆批详情' : '合批详情';
        this.rowObj = row;
        this.List = row.childList || [];
        this.visible = true;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .form-wrapper {
    margin-bottom: 10px;
  }
  .mt20 {
    margin-top: 20px;
  }
</style>
