<template>
  <div>
    <el-card shadow="never" v-loading="loading">
      <div class="switch">
        <div class="switch_left">
          <ul>
            <li
              v-for="item in tabOptions"
              :key="item.key"
              :class="{ active: activeComp == item.key }"
              @click="handleCard(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </el-card>
    <component
      :is="pageName"
      :key="key"
      :innerOuterBoth="innerOuterBoth"
      ref="componentRef"
      :isShowReturnOrder="isShowReturnOrder"
      :taskDefinitionKey="taskDefinitionKey"
      :activeComp="activeComp"
      :businessId="businessId"
      :permissionType="permissionType"
    />
  </div>
</template>

<script>
  import { EventBus } from './eventBus.js';
  import {
    getOutInByIdAPI,
    saleReturnGetByIdAPI
  } from '@/api/bpm/components/saleManage/saleorder';
  import { deepClone } from '@/utils';

  export default {
    name: 'customerReturnOrderDialog',
    props: {
      taskDefinitionKey: {
        type: String,
        default: 'stater'
      },
      businessId: {
        type: String,
        default: ''
      }
    },
    components: {
      repairTabsPage: () => import('./repair-tabs-page'),
      customerReturnOrder: () => import('./customerReturnOrder')
    },

    data() {
      //innerOuterBoth 1 只有内部  2 只有外部 9 都有
      return {
        dialogType: 'add',
        pageName: '',
        repairTabsOptions: [
          {
            label: '内部生产物品入库',
            name: 'innerStoremanIn',
            isOutOrIn: 'innerStore'
          },
          {
            label: '填写重量',
            name: 'innerFillWeight',
            isOutOrIn: 'innerStore'
          },
          {
            label: '内部生产入库质检',
            name: 'innerInQC',
            isOutOrIn: 'innerStore'
          },
          {
            label: '物品出库给外协',
            name: 'outerStoremanOut',
            isOutOrIn: 'outerStore'
          },
          {
            label: '外协返修物品入库',
            name: 'outerStoremanIn',
            isOutOrIn: 'outerStore'
          },
          {
            label: '填写重量',
            name: 'outerFillWeight',
            isOutOrIn: 'outerStore'
          },
          {
            label: '外协返修入库质检',
            name: 'outerInQC',
            isOutOrIn: 'outerStore'
          }
        ],
        activeComp: '',
        permissionType: '',
        isShowReturnOrder: '',
        warehousingMaterialList: [],
        materialCodeReqList: [],
        metaList: [],
        form: {},
        innerOuterBoth: '',
        loading: false,
        key: 1
      };
    },
    computed: {
      tabOptions() {
        let list = [
          {
            key: 'stater',
            permissionType: 'update',
            isShowReturnOrder: false,
            name: '发起人申请',
            isShow: true
          },
          {
            key: 'deptLeader',
            permissionType: 'view',
            isShowReturnOrder: false,
            name: '销售主管审批',
            isShow: true
          },
          {
            key: 'storeman',
            permissionType: 'update',
            isShowReturnOrder: true,
            name: '仓管入库',
            isShow: true
          },
          {
            key: 'QCLeader',
            permissionType: 'view',
            isShowReturnOrder: false,
            name: '质量部主管指派',
            isShow: true
          },
          {
            key: 'QCApprove',
            permissionType: 'update',
            isShowReturnOrder: false,
            name: '质检员审核',
            isShow: true
          },
          {
            key: 'techLeader',
            permissionType: 'view',
            isShowReturnOrder: false,
            name: '技术部主管指派',
            isShow: true
          },
          {
            key: 'techApprove',
            permissionType: 'update',
            isShowReturnOrder: false,
            name: '技术员审核',
            isShow: true
          },
          {
            key: 'produceLeader',
            permissionType: 'view',
            isShowReturnOrder: false,
            name: '生产部主管指派',
            isShow: true
          },
          {
            key: 'produceApprove',
            permissionType: 'update',
            isShowReturnOrder: false,
            name: '生产员审核',
            isShow: true
          },
          {
            key: 'outerStore',
            permissionType: 'update',
            isShowReturnOrder: false,
            name: '外部处理',
            isShow: [2, 9].includes(this.innerOuterBoth)
          },
          {
            key: 'innerStore',
            permissionType: 'update',
            isShowReturnOrder: false,
            name: '内部处理',
            isShow: [1, 9].includes(this.innerOuterBoth)
          },
          {
            key: 'QCApprove2',
            permissionType: 'update',
            isShowReturnOrder: false,
            name: '质检员反馈',
            isShow: true
          }
        ];
        return list.filter((item) => item.isShow);
      }
    },
    async created() {
      //返修节点中有可能多流程
      let find = this.repairTabsOptions.find((item) => item.name == this.taskDefinitionKey)?.isOutOrIn || '';
      let optionKey = find || this.taskDefinitionKey;
      this.activeComp = optionKey || 'stater';
      //获取当前流程标签信息
      let currentTab = this.tabOptions.find((item) => item.key == this.activeComp) || {};
      this.permissionType = currentTab?.permissionType;
      this.isShowReturnOrder = currentTab?.isShowReturnOrder;
      //
      await this.getReturnInfo(this.businessId)
      this.pageName = ['outerStore', 'innerStore'].includes(this.activeComp) ? 'repairTabsPage' : 'customerReturnOrder';
    },
    mounted() {
      setTimeout(() => {
        this.getActiveCompValue();
      }, 400);
    },
    methods: {
      getTableValue() {
        return this.$refs.componentRef.getTableValue();
      },
      handleCard(val) {
        this.activeComp = val.key;
        this.pageName = ['outerStore', 'innerStore'].includes(this.activeComp)
          ? 'repairTabsPage'
          : 'customerReturnOrder';
        this.permissionType = val.permissionType;
        this.isShowReturnOrder = val.isShowReturnOrder;
        console.log(this.isShowReturnOrder, 'this.isShowReturnOrder');
        this.key++;
        this.getActiveCompValue();
      },
      getActiveCompValue() {
        EventBus.$emit('getActiveCompValue', {
          activeComp: this.activeComp,
          permissionType: this.permissionType
        });
      },
      async getReturnInfo(businessId) {
        this.form = await saleReturnGetByIdAPI(businessId);
        this.innerOuterBoth = this.form.innerOuterBoth;
        // this.$nextTick(() => {
        //   this.$refs.table.reRenderTable();
        // });
      }
    }
  };
</script>
<style scoped lang="scss"></style>
