<template>
  <ele-pro-table
    ref="table"
    :columns="columns"
    :datasource="list"
    tool-class="ele-toolbar-form"
    :needPage="false"
    height="calc(100vh - 220px)"
    full-height="calc(100vh - 120px)"
  >
    <template v-slot:code="{ row }">
      <el-link type="primary" :underline="false" @click="handDetailed(row)">
        {{ row.code }}
      </el-link>
    </template>

    <template v-slot:joinWorkOrderCode="{ row }">
      <el-tag type="warning" v-if="row.type == 1">自建领料单</el-tag>
      <div v-else>{{ row.joinWorkOrderCode }}</div>
    </template>

    <template v-slot:type="{ row }">
      <el-tag type="warning" v-if="row.type == 1">自建领料</el-tag>
      <el-tag type="success" v-if="row.type == 2">工单领料</el-tag>
      <el-tag type="info" v-if="row.type == 3">委外领料</el-tag>
    </template>

    <template v-slot:status="{ row }">
      <el-tag
        :type="['info', 'success', 'warning', 'danger'][row.status]"
        effect="dark"
        >{{ statusList[row.status] }}</el-tag
      >
    </template>
    <detailed
      @detailedClose="detailedClose"
      v-if="detailedShow"
      :detailedObj="detailedObj"
    ></detailed>

    <selfDetailed
      @detailedClose="detailedClose"
      v-if="selfDetailedShow"
      :detailedObj="detailedObj"
    ></selfDetailed>
  </ele-pro-table>
</template>

<script>
  import detailed from './detailed.vue';
  import selfDetailed from './selfDetailed.vue';
  export default {
    props: {
      list: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        detailedShow: false,
        detailedObj: null,
        selfDetailedShow: false,
        statusList: ['未领料', '领料中', '已出库', '已驳回'],
        columns: [
          {
            prop: 'code',
            slot: 'code',
            label: '领料单编号',
            align: 'center',
            align: 'left'
          },

          {
            prop: 'joinWorkOrderCode',
            slot: 'joinWorkOrderCode',
            label: '关联工单编号',
            align: 'center'
          },

          {
            prop: 'joinWarehouseName',
            label: '领料仓库名称',
            align: 'center'
          },

          {
            prop: 'joinReviewerName',
            label: '关联审核人',
            align: 'center'
          },

          {
            prop: 'executorName',
            label: '领料人',
            align: 'center'
          },

          {
            prop: 'createTime',
            label: '领料时间',
            align: 'center'
          },
          {
            prop: 'type',
            slot: 'type',
            label: '类型',
            align: 'center'
          },
          {
            prop: 'status',
            slot: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true
          }
        ]
      };
    },
    components: {
      detailed,
      selfDetailed
    },
    methods: {
      handDetailed(row) {
        this.detailedObj = JSON.stringify(row);
        if (row.type == 1) {
          this.selfDetailedShow = true;
        } else {
          this.detailedShow = true;
        }
      },

      detailedClose() {
        this.detailedShow = false;
        this.selfDetailedShow = false;
      }
    }
  };
</script>
