<template>
    <n-grid>
        <n-gi :span="10">
            <n-form-item 
                label="指派员工"
                :path="`${listname}[${index}].userId`"
                :rule="{ 
                    required: true, 
                    message: '请选择员工', 
                    trigger: 'blur' 
                }"
            >
                <!--multiple-->
                <n-select
                v-model:value="obj.userId"
                filterable
                placeholder="请输入用户名称搜索"
                :options="yglist"
                :loading="loadingRef"
                clearable
                remote
                :clear-filter-after-select="false"
                @search="slehand"
                />
            </n-form-item>
        </n-gi>
        <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>
    
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    import { userApi } from '@/api/system'
    import {  
        AddOutline, 
        TrashOutline, 
    } from '@vicons/ionicons5'
    const props = withDefaults(defineProps<{
        listname:any
        obj:any,
        index:any
    }>(), {
        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 yglist = ref<any>([])

    let loadingRef = ref(false)

    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
            })
        }

        slehand()
</script>