<template>
        <n-form ref="formRef" :model="formDetailData"  label-placement="left" label-width="80">
            <n-form-item label="批次号/SN码" path="traceCode" label-width="100" v-show="showTraceCode">
                    <n-input v-model:value="formDetailData.traceCode" disabled  />
            </n-form-item>
            <n-form-item label="判定数量" path="qty" label-width="100" >
                    <n-input-number v-model:value="formDetailData.qty"
                        placeholder="请输入判定数量" :min="0" 
                        :disabled="disabled"
                        />
            </n-form-item>     
            <n-form-item label="备注"  label-width="100">
                    <n-input
                        v-model:value="formDetailData.remark"
                        type="textarea"
                        placeholder="输入备注原因"
                        :disabled="disabled"
                    />
            </n-form-item>   

            </n-form>
</template>
<script setup lang="ts">
    import { onMounted, ref, watch } from 'vue';

    import {qcResultDetailApi,QcResultDetail} from "@/api/qcResultDetail.ts";


    

    const emit = defineEmits(['update:formDetailData'])


    const props = defineProps({
        id:Number,
        formDetailData:Object as () => QcResultDetail,
        disabled:Boolean,
        showTraceCode:Boolean
    })

    let formDetailData = ref({...props.formDetailData})
    let isInitLoading = true
   

    watch(
        ()=> props.formDetailData,
        (newVal)=>{
            formDetailData.value = {...newVal}
        },
        { deep: true, immediate: true }
    )

    watch(
        formDetailData,
        (newVal)=>{
            //  if (isInitLoading) {
            //     isInitLoading = false
            //     return
            // }
            emit('update:formDetailData',{...newVal})
        },
        { deep: true, flush: 'post' }
    )

    async function loadData() {
        if(!props.id) return
        qcResultDetailApi.detail(props.id).then((res:any)=>{
            formDetailData.value = { ...formDetailData.value, ...res }         
        })
    }

    // watch(() => props.id, (val: Number)=>{
    //     loadData();
    // })

    watch(() => props.id, (val: number)=>{
        loadData();
    })

    onMounted(()=>{
        loadData()
    })

</script>