<template>
    <n-form  ref="pauseformRef" :model="pauseform" label-placement="left" label-width="80" >
        <n-form-item label="派工编号">
        <n-input v-model:value="pauseform.assingCode" disabled  />
        </n-form-item>
        <n-form-item label="工序名称">
        <n-input v-model:value="pauseform.processName" disabled  />
        </n-form-item>
        <n-form-item label="报检数量" path="qcNum">
            <n-input v-model:value="pauseform.qcNum" 
            :disabled = "qcNumDisabled" 
             @input="handleQcNumChange"
            />
        </n-form-item>
    </n-form>
</template>

<script setup lang="ts">

import { ref, reactive, h, defineProps, onMounted, watch} from 'vue';
import {  info } from '@/api/production'

const props = defineProps<{
  id: number;
  num: number;
  qcNumDisabled:boolean
}>();

const emit = defineEmits(['updateWidth','updateQcNum'])


let pauseform = reactive<any>({
  id:'',
  processName:'',
  qcNum:''
})  

async function loadData(){
    info(props.id).then((rps:any) => {
         Object.assign(pauseform, rps)
        pauseform.qcNum = props.num
    })

}

function handleQcNumChange(){
    emit('updateQcNum', pauseform.qcNum)
}

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

onMounted(() => {
    emit('updateWidth', "width:20%");
  loadData()
})

</script>