<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabOption"
        :label="item.label"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
    <component
      v-if="activeName && isValidComponent(activeName)"
      :is="activeName"
      :key="cKey"
      type="sourceBizNo"
      ref="componentRef"
      :taskDefinitionKey="taskDefinitionKey"
      :activeComp="activeComp"
      :businessId="activeName === 'tab4' ? form.code : businessId"
      :infoData="{ ...form }"
      :permissionType="permissionType"
    />
  </div>
</template>

<script>
  import { getPSaleEntrustedReceiveDetailAPI } from '@/api/bpm/components/saleManage/entrustedReceive';
  export default {
    name: 'boxTabPage',
    components: {
      tab1: () => import('./detailDialog.vue'),
      tab2: () => import('./entrustedStorage.vue'),
      tab3: () => import('./procurementWarehousing.vue'),
      tab4: () => import('../../inoutBound/detailDialog.vue')
    },
    props: {
      taskDefinitionKey: {
        type: String,
        default: ''
      },
      activeComp: {
        type: String,
        default: ''
      },
      permissionType: {
        type: String,
        default: 'view'
      },
      businessId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        form: {},
        activeName: 'tab1',
        cKey: 1,
        tabOption: [
          {
            label: '收货单详情',
            name: 'tab1',
            isShow: true
          }
        ]
      };
    },
    async created() {
      await this.getSendSaleOrderDetail(this.businessId);
      switch (this.taskDefinitionKey) {
        case 'storeManagerApprove':
          this.tabOption.push({
            label: '入库',
            name: 'tab2',
            isShow: true
          });
          break;
        case 'qualityInspection':
          this.tabOption.push({
            label: '入库质检',
            name: 'tab3',
            isShow: true
          });
          break;
        case 'QCLeaderApprove':
          this.tabOption.push({
            label: '入库详情',
            name: 'tab4',
            isShow: true
          });
          break;
        case 'qualityInspectionFeedback':
          this.tabOption.push({
            label: '质检详情',
            name: 'tab3',
            isShow: true
          });
          break;
      }
    },
    methods: {
      isValidComponent(componentName) {
        const validComponents = ['tab1', 'tab2', 'tab3', 'tab4'];
        return validComponents.includes(componentName);
      },
      handleClick(val) {
        console.log(val.name);
        this.activeName = val.name;
        if (val.name == 'tab2') {
          setTimeout(() => {
            console.log(this.$refs.componentRef);
            this.$refs.componentRef.pickerSuccess(this.form);
          }, 500);
        }
      },
      async getTableValue() {
        console.log(this.$refs.componentRef);
        return {
          form: this.$refs.componentRef.form,
          returnStorageData: this.$refs.componentRef.getReturnStorage
            ? await this.$refs.componentRef.getReturnStorage()
            : '',
          isAllChecked:
            this.$refs.componentRef.getStatus &&
            this.$refs.componentRef.getStatus(),
          qualityInspector:
            (this.$refs.componentRef.getQualityFile &&
              this.$refs.componentRef.getQualityFile()) ||
            {}
        };
      },
      //发货单详情
      async getSendSaleOrderDetail(id) {
        const data = await getPSaleEntrustedReceiveDetailAPI(id);
        if (data) {
          this.form = data;
        }
      }
    }
  };
</script>
<style scoped lang="scss"></style>
