<!-- 添加协作 -->
<template>
    <el-dialog title="添加联系人" v-model="visible" width="600px">
        <el-form ref="formRef" :model="form" label-width="120px">
            <el-form-item label="选择联系人：" prop="liaisonId"
                :rule="{required: true, message: '请选择联系人', trigger: 'change'}">
                <el-select-v2 v-model="form.liaisonId" :options="liaisonOption" placeholder="请选择客户联系人" filterable />
            </el-form-item>


        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addConcatRouter">新增客户联系人</el-button>
                <el-button @click="cancel">取消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {listLiaison, addLiaison, liaisonResourceAdd} from "@/api/customer/liaison";
    import { updateConcat} from '@/api/business/allBusiness'
    import {LiaisonForm} from "@/api/customer/liaison/types";

    const emit = defineEmits(['onOk'])
    const visible = ref(false)
    const formRef = ref()
    const buttonLoading = ref(false)
    const router = useRouter()
    const form = ref<LiaisonForm>({
        id: '',
        customerId: '',
        hasPrimaryLialison: 0,
        liaisonId: '',
        resourceType: '30',
        resourceTypeId: '',
    })
    const resourceName = ref('')
    const open = (customerId: string,resourceTypeId: string,title?: string ) => {
        form.value.resourceTypeId = resourceTypeId
        form.value.customerId = customerId
        resourceName.value = title
        getLiaison()
        visible.value = true
    }



    const rules = reactive({
        liaisonId:[{required: true, message: '请选择联系人', trigger: 'change'}],
        type:[{required: true, message: '请选择联系人角色', trigger: 'change'}],
    })

    const liaisonOption = ref([])
    const getLiaison = () => {
        listLiaison({ pageIndex: 1, pageSize: 999999, customerId: form.value.customerId }).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
                })
            }
        })
    }

    const addConcatRouter = () => {
        router.push(`/customer/liaison/add?type=add&resourceType=30&resourceTypeId=${ form.value.resourceTypeId }&resourceName=${ resourceName.value }&customerId=${ form.value.customerId }`)
    }

    const submitForm = async () => {
        formRef.value?.validate(async (valid: boolean) => {
            if (valid) {
               let res = await liaisonResourceAdd(form.value)
                emit('onOk', 'addConcat')
                reset()
                visible.value = false

            }
        })

    }

    const cancel = () => {
        visible.value = false
    }
    /** 表单重置 */
    const reset = () => {

        Object.assign(form.value, {
            id: '',
            customerId: '',
            hasPrimaryLialison: '',
        })
        formRef.value?.resetFields();
    }

    defineExpose({
        open
    })
</script>

<style lang="scss" scoped>
.tips{
    padding-left: 120px;
    margin-bottom: 2px;
}
</style>
