<template>
    <div class="page-container">
        <n-card :title="title" >
            <n-tabs type="card" animated>
            <n-tab-pane name="合格" tab="合格" style="width: 50%;">
                <SubmitDetailPage
                    key="ok"
                    :disabled="false"
                    :formDetailData="formDetailOKData"
                    :showTraceCode="true"
                    @update:formDetailData= handleFormDetailOKData
                />
            </n-tab-pane>
            <n-tab-pane name="报废" tab="报废" style="width: 50%;">
                 <SubmitDetailPage
                 key="scrap"
                :disabled="false"
                :formDetailData="formDetailScrapData"
                :showTraceCode="true"
                @update:formDetailData= handleFormDetailScrapData
                />
            </n-tab-pane>
            <n-tab-pane name="返工" tab="返工" style="width: 50%;">
                <SubmitDetailPage
                  key="rework"
                :disabled="false"
                :formDetailData="formDetailReworkData"
                :showTraceCode="true"
                @update:formDetailData= handleFormDetailReworkData
                />
            </n-tab-pane>
             <n-tab-pane name="让步接收" tab="让步接收" style="width: 50%;">
             
                <SubmitDetailPage
                 key="conession"
                :disabled="false"
                :formDetailData="formDetailConcessionData"
                :showTraceCode="true"
                @update:formDetailData= handleFormDetailConcessionData
                />
            </n-tab-pane>
            </n-tabs>


             <n-space justify="center" style="width: 100%; margin-top: 16px;">
                <n-button size="small" @click="handleReset">重置</n-button>
                <n-button type="primary" size="small" @click="handleSubmitResultDetail">提交</n-button>
            </n-space>
        </n-card>

    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import {
  NButton, NSpace, NIcon, NUpload, useMessage
} from 'naive-ui'

import {useRoute} from "vue-router";

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

const message = useMessage()
const route = useRoute()
const qcId =ref( Number(route.params.id))
const traceCode = ref(String(route.params.traceCode))



const submitFlag = ref(route.params.submitFlag === 'true')


const title = ref(`质检编号: ${route.params.qcNo}`)


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) {
    Object.assign(formDetailOKData, formDetailData)
    
}

function handleFormDetailScrapData(formDetailData:QcResultDetail) {
     Object.assign(formDetailScrapData, formDetailData)
}

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

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


    
async function handleSubmitResultDetail() {

  formDetailOKData.qcId = qcId.value
  formDetailScrapData.qcId = qcId.value
  formDetailReworkData.qcId = qcId.value
  formDetailConcessionData.qcId =qcId.value


  const submitParam = [
    formDetailOKData,
    formDetailScrapData,
    formDetailReworkData,
    formDetailConcessionData]

    console.log(submitParam);
    
  
  await qualityTestingApi.submit(submitParam) 
  
  message.success('提交成功')
  router.go(-1)
 
}
  


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("表单已重置")
}


async function loadData() {

    if(qcId.value != null || qcId.value != '') {
        //根据qcId查询明细
      const resultList = await qcResultDetailApi.selectlistByqcId(qcId.value);
      Object.assign(formDetailOKData,{...resultList.formDetailOKData})
      Object.assign(formDetailScrapData,{...resultList.formDetailScrapData})
    }
}

onMounted(()=>{
  loadData()
}) 
</script>
<style>
</style>    