<template>
        <n-tabs type="card" animated>
            <n-tab-pane name="合格" tab="合格"  v-if="showOkTab">
                <SubmitDetailPage
                    key="ok"
                    :disabled="false"
                    :formDetailData="formDetailOKData"
                    :showTraceCode="showTraceCode"
                    @update:formDetailData= "handleFormDetailOKData"
                />
            </n-tab-pane>
            <n-tab-pane name="报废" tab="报废"  v-if="showScrapTab">
                 <SubmitDetailPage
                 key="scrap"
                :disabled="false"
                :formDetailData="formDetailScrapData"
                :showTraceCode="showTraceCode"
                @update:formDetailData= "handleFormDetailScrapData"
                />
            </n-tab-pane>
            <n-tab-pane name="返工" tab="返工"  v-if="showReworkTab">
                <SubmitDetailPage
                  key="rework"
                :disabled="false"
                :formDetailData="formDetailReworkData"
                :showTraceCode="showTraceCode"
                @update:formDetailData= "handleFormDetailReworkData"
                />
            </n-tab-pane>
             <n-tab-pane name="让步接收" tab="让步接收"  v-if="showConnessionTab">
             
                <SubmitDetailPage
                 key="conession"
                :disabled="false"
                :formDetailData="formDetailConcessionData"
                :showTraceCode="showTraceCode"
                @update:formDetailData= "handleFormDetailConcessionData"
                />
            </n-tab-pane>
        </n-tabs>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import {
  NButton, NSpace, useMessage
} from 'naive-ui'

import {useRoute} from "vue-router";

import {QcResultDetail} from "@/api/qcResultDetail.ts";
import { qualityTestingApi} from '@/api/qualityTesting'
import router from '@/router';
import SubmitDetailPage from '@/components/SubmitDetailPage.vue';

const props = defineProps({
    showOkTab:Boolean,
    showScrapTab:Boolean,
    showReworkTab:Boolean,
    showConnessionTab:Boolean,
    showTraceCode:Boolean,

})

const message = useMessage()
const route = useRoute()

const traceCode = ref(String(route.params.traceCode))


const emit = defineEmits(['updateSubmitDetail'])

const submitDetail = reactive<any>({})

const defaultFormDetailData:QcResultDetail  = {
  qcId: undefined,
  resultType: undefined,
  qty:  0,
  traceCode: undefined,
  defectCode: undefined,
  handleAction: undefined,
  actionStatus: undefined,
  remark: '',
  title:undefined,
  images:[],
  attachments:[]
}

const formDetailOKData = reactive<QcResultDetail>({ ...defaultFormDetailData,traceCode:traceCode.value, resultType: 1,handleAction:'下一道工序',actionStatus:1 })

const formDetailScrapData = reactive<QcResultDetail>({ ...defaultFormDetailData,traceCode:traceCode.value,resultType: 2,handleAction:'报废次品',actionStatus:1 })
const formDetailReworkData = reactive<QcResultDetail>({ ...defaultFormDetailData,traceCode:traceCode.value,resultType: 3,handleAction:'返工',actionStatus:1 })
const formDetailConcessionData = reactive<QcResultDetail>({ ...defaultFormDetailData,traceCode:traceCode.value,resultType: 4,handleAction:'让步接收',actionStatus:1  })

function handleFormDetailOKData(formDetailData:QcResultDetail) {
    console.log('===OK表单触发更新===', formDetailData)
    Object.assign(formDetailOKData, formDetailData)
    submitDetail.okData = formDetailOKData
}

function handleFormDetailScrapData(formDetailData:QcResultDetail) {
    console.log('===报废表单触发更新===', formDetailData) 
    Object.assign(formDetailScrapData, formDetailData)
     submitDetail.scrapData = formDetailScrapData
}

function handleFormDetailReworkData(formDetailData:QcResultDetail) {
  Object.assign(formDetailReworkData, formDetailData)
}

function handleFormDetailConcessionData(formDetailData:QcResultDetail){
  Object.assign(formDetailConcessionData, formDetailData)
}



watch(
    submitDetail,
    (newVal)=>{
        console.log(newVal);
        
        emit('updateSubmitDetail',{...newVal})
    },{ deep: true }
)




function handleReset() {
        Object.assign(formDetailOKData, { ...defaultFormDetailData, resultType: 1, handleAction: '下一道工序', actionStatus: 1 })
        Object.assign(formDetailScrapData, { ...defaultFormDetailData, resultType: 2, handleAction: '报废次品', actionStatus: 1 })
        Object.assign(formDetailReworkData, { ...defaultFormDetailData, resultType: 3, handleAction: '返工', actionStatus: 1 })
        Object.assign(formDetailConcessionData, { ...defaultFormDetailData, resultType: 4, handleAction: '让步接收', actionStatus: 1 })

        message.info("表单已重置")
}


</script>