<template>
    <div>
        <n-grid>
            <n-gi :span="10">
                <n-form-item
                    label="指派工段"
                    :path="`${listname}[${index}].sectionId`"
                >
                <n-select
                    v-model:value="obj.sectionId"
                    filterable
                    placeholder="请选择工段"
                    :options="sectionList"
                    :loading="loadingRef"
                    disabled
                    remote
                    :clear-filter-after-select="false"
                    />
                 </n-form-item>
            </n-gi>   
             <n-gi :span="10">
                <n-form-item
                    label="指派工位"
                    :path="`${listname}[${index}].deviceId`"
                    :rule="{
                        required:true,
                        message:`请选择工位`,
                        trigger: 'blur' 
                    }"
                >
                <n-select
                    v-model:value="obj.deviceId"
                    filterable
                    placeholder="请选择工位"
                    :options="deviceList"
                    :loading="loadingRef"
                    clearable
                    remote
                    :clear-filter-after-select="false"
                    />
                </n-form-item>
            </n-gi>
          
        </n-grid>
        <n-grid>
        
        <n-gi :span="10">
            <n-form-item 
                label="数量"
                :path="`${listname}[${index}].quantity`"
                :rule="{
                    required: true,
                    message: `请输入数量`,
                    trigger: 'blur',
                }"
            >
                <n-input v-model:value="obj.quantity"  />
            </n-form-item>
        </n-gi>
        <n-gi :span="4" style="padding-left:10px;">
            <n-icon 
                v-if="index == 0" 
                size="25" 
                style="padding-top: 5px;cursor: pointer;" color="#1060c9"
                @click="addpgnum"
            >
                <AddOutline />
            </n-icon>

            <n-icon 
                v-else 
                size="18" 
                style="padding:7px 0 0 2px;cursor: pointer;" color="#d03050"
                @click="deletenum(index)"
            >
                <TrashOutline />
            </n-icon>
        </n-gi>
    </n-grid>
    </div>

    
</template>
<script setup lang="ts">
    import { ref,reactive } from 'vue'
    import { userApi } from '@/api/system'
    import {sectionApi, type Section} from '@/api/section'
    import {  
        AddOutline, 
        TrashOutline, 
    } from '@vicons/ionicons5'

    const props = withDefaults(defineProps<{
        listname:any
        obj:any,
        index:any
        section:string
    }>(), {
        obj:{}
    })
    const emit = defineEmits<{
        addhand:[],
        delehand:[index:any],
        update: [index:any,obj:any]
    }>()

    

    //  function updatehand() {
    //     emit('update')
    // }

    function addpgnum() {
        emit('addhand')
    }
    function deletenum(index:any){
        emit('delehand',index)
    }

    let sectionList = reactive<{label:string,value:any}[]>([])
    let yglist = ref<any>([])

    let loadingRef = ref(false)

    let deviceList = ref<any>([])
  

    function slehand(v?:any) {
        loadingRef.value = true
        yglist.value.splice(0)
        // dispatchform.userlist = [{
        //     id:'',
        //     num:''
        // }]
        userApi.page({
            page: 1,
            pageSize: 100,
            username: v,
            }).then((rps:any) =>{
            if(rps.list && rps.list.length > 0){
                yglist.value = rps.list.map((n:any) => {
                return {
                    label:n.username,
                    value:n.id+''
                }
                })
            }
            console.log(yglist.value,'12')
            loadingRef.value = false
            }).catch(() => {
            loadingRef.value = false
            })
        }

        //加载工段
        async function loadSection() {
            //根据section 进行匹配
            const res = await sectionApi.list({sectionName:props.section})
            const mesSection  = res.MesSection;
            const mesDevice = res.MesDevice
            console.log(mesSection);
            
            sectionList.push({
                label:mesSection.sectionName,
                value:mesSection.id
            })  
            props.obj.sectionId = mesSection.id   
            
            deviceList.value = mesDevice.map((n:any)=>{
                    return {
                        label:n.deviceName,
                        value:n.id+''
                    }
                 })         
        }

        // function searchSection(sectionId?:number){
        //     if(!sectionId) return
        //     props.obj.deviceId = ''
        //     deviceList.value = []
        //     deviceApi.list(sectionId).then(res=>{
        //         deviceList.value = res.map((n:any)=>{
        //             return {
        //                 label:n.name,
        //                 value:n.id+''
        //             }
        //          })           
        //      })
        // }

        loadSection()
        slehand()
        // handleDevice()
</script>