<template>
    <el-form-item :label="labelCust" prop="customerId">
        <paginationSelect
            v-model="customerId"
            :disabled="$props.disabled"
            :selectedName="props.selectedName"
            @changeSelect="changeCustomer"
            source="business"
            :listFn="listCustomer"
            :params="customerParams"
        />
    </el-form-item>
    <el-form-item :label="labelLiaison" prop="liaisonId" v-if="isLiaison">
        <el-select-v2
            v-model="tempLiaisonId"
            :disabled="$props.disabled"
            :options="liaisonOption"
            placeholder="请选择关联客户联系人"
            filterable
            v-loading="isLoading"
            @change="changeLiaisonId"
        />
    </el-form-item>
</template>

<script setup lang="ts" name="correlationSelect">
    import { listLiaison } from '@/api/customer/liaison';
    import paginationSelect from './paginationSelect.vue';
    import { listCustomer } from '@/api/customer';
    const emits = defineEmits(['custChange'])
    const props = defineProps({
        isLiaison: {
            type: Boolean,
            default: true
        },
        labelCust: {
            type: String,
            default: '关联客户：'

        },
        labelLiaison: {
            type: String,
            default: '关联客户联系人：'
        },
        disabled:{
            type: Boolean,
            default: false
        },
        selectedName: {
            type: String
        },
        selectedId: {
            type: String || Number
        }
    })

    const customerId = defineModel<string | number>({ required: true })
    const liaisonId = defineModel('liaisonId')
    const isLoading = ref(false)

    const tempLiaisonId = ref();
    watch(liaisonId, (val: string) => {
        tempLiaisonId.value = val

    })
    watch(customerId, (val: string) => {
        getLiaison(val)
    })

    const liaisonOption = ref([])
    const getLiaison = (customerId: string | number) => {
        isLoading.value = true
        listLiaison({ pageIndex: 1, pageSize: 999999, customerId, commonScope: 1, commonScopeType: '20' }).then(res => {
            if(res.success) {
                liaisonOption.value = res.result.records.map((item: { name: string, id: number }) => {
                    let obj = { label: item.name, value: item.id }
                    return obj
                })
            }
            isLoading.value = false
        })
    }

    const customerParams = {
        commonScope: 1,
        commonScopeType: '10',
        customerForm: 10,
        hasPublicCustomer: 0,
        hasGarbageCustomer:0,
        customerName: '',
        id: props.selectedId
    }

    if(props.isLiaison && customerId.value) {
        getLiaison(customerId.value)
    }

    const changeCustomer = (obj) => {
        if(props.isLiaison) {
            tempLiaisonId.value = null
            liaisonId.value = null
        }
        emits('custChange', obj.id)
    }
    const changeLiaisonId = (val) =>{
        liaisonId.value = val
        // emits('liaisonChange', val)
    }
    onMounted(()=>{
        tempLiaisonId.value = liaisonId.value
    })
</script>
