<template>
    <el-autocomplete
        v-model="customer"
        :fetch-suggestions="customerSearch"
        @select="handleSelect"
        @input="handleInput"
        clearable
        class="inline-input w-50"
        placeholder="客户名关键字或手机号"
        :style="{width: props.width + 'px','font-size': props.font + 'px'}"
    />
</template>

<script setup>
    import { ref,watch } from 'vue'
    import { memberInfo,searchMember } from '@/api'
    import _ from 'lodash'
    const props = defineProps({
        modelValue: {
            type: String,
            default: ''
        },
        width: {
            type: Number,
            default: 160
        },
        font: {
            type: Number,
            default: 12
        }
    })
    const emits = defineEmits(['update:modelValue','selected'])

    const customer = ref(props.modelValue)
    watch(()  => props.modelValue, (newValue) => {
        if(newValue == '') {
            code.value = ''
        }
    })

    const enableCustomerEdit = ref(false)
    const handleCustomerEdit = () => {
        enableCustomerEdit.value = true
        customer.value = ''
    }

    const customerSearch = async (qs, cb) => {
        if(qs && qs.length >= 2) {
            try {
                const {data:clist} = await searchMember(qs)
                var list = clist.data
                if (list.length == 0) {
                    list.push({
                        id: '-1',
                        value: '无匹配结果'
                    })
                    cb(list);
                } else {
                    list = list.map(item => {
                        return {
                            value:`${item.username} ${item.true_name ?? ''} ${item.mobile ?? ''}`,
                            id: `${item.id}`
                        }
                    })
                    cb(list);
                }
            } catch (error) {
                console.log(error)
            }
        }
    }
    const handleSelect = (item) => {
        if(item.id != -1) {

            const {data:user} = await memberInfo(item.id)
            emits('selected',{
                id: item.id,
                value: item.value,
            })
            customer.value = item.id
        } else {
            emits('selected',{
                id: 0, value: customer.value
            })
        }
    }

    const handleInput = (val) => {
        emits('update:modelValue',val)
    }

    const updateCustomer = async (item) => {
        if(item.id != -1 && item.id != userInfo.value.id) {
            const {data:user} = await memberInfo(item.id)
            if(user.data) {
                userInfo.value = {...user.data}
            }
            customer.value = ''
            await handleCustomerChange()
        }
        enableCustomerEdit.value = false
    }

    const handleCustomerSelect = async (item) => {
        if(item.id != -1) {
            const {data:user} = await memberInfo(item.id)
            if(user.data) {
                userInfo.value = {...user.data}
            }
            customer.value = ''
        }
    }

    const handleCustomerChange = async () => {
        if(order_id.value) {
            const {data: res} = await update(order_id.value,{user_id: userInfo.value.id})
            await addLog(order_id.value,`${user_store.userName}(${user_store.userId})`,'修改订单客户信息',`${userInfo.value.username}(${userInfo.value.id})`)
            ElMessage({
                message: '成功修改订单客户!',
                type: 'success',
            })
            emit('status-change',order_id.value)
        }
    }
</script>