<!-- 添加协作 -->
<template>
    <el-dialog title="合并客户" v-model="visible" width="850px">
        <div class="top_area">
            <div class="tip flex"><el-icon color="#1874FF">
                    <InfoFilled />
                </el-icon><span>特别提示</span></div>
            <div>
                <p>1 、合并后系统只保留目标客户，同时将另一个客户的联系人、商机、订单、附件、销售动态等迁移到目标客户。</p>
                <p>2 、红色字段表示两个客户该字段的值不同。</p>
            </div>
        </div>
        <div class="change_area">
            <span class='change_label'>选择客户:</span>
            <div class="change_select" v-loading="merageLoading">
                <!-- <el-select-v2
                    v-model="oneId"
                    :options="customerOption1"
                    placeholder="请选择客户"
                    filterable
                    remote
                    :remote-method="remoteMethod1"
                    @blur="blurCustomer(1,$event)"
                    @change="changeCustomer(1,$event)"
                    :loading="loading"
                /> -->
                <paginationSelect
                    v-model="oneId"
                    source="mergeCustomer1"
                    :listFn="listCustomer"
                    :params="customerParams"
                    @changeSelect="changeCustomer(1,$event)"
                    @blurSelect="blurCustomer(1,$event)"
                    :selectedName="selectedName1"
                    :clearable="false"
                />
                <el-icon @click="switchCustomer()" style="cursor: pointer;margin: 0 10px;"><Switch /></el-icon>
                <!-- <el-select-v2
                    v-model="twoId"
                    :options="customerOption2"
                    placeholder="请选择客户"
                    filterable
                    remote
                    :remote-method="remoteMethod2"
                    @blur="blurCustomer(2,$event)"
                    @change="changeCustomer(2,$event)"
                    :loading="loading"
                /> -->
                <paginationSelect
                    v-model="twoId"
                    source="mergeCustomer2"
                    :listFn="listCustomer"
                    :params="customerParams"
                    @changeSelect="changeCustomer(2,$event)"
                    @blurSelect="blurCustomer(2,$event)"
                    :selectedName="selectedName2"
                    :clearable="false"
                />
            </div>
        </div>
        <div>
            <p>请选择合并后需要保留的值：</p>
            <div class="merge_form" v-loading="formLoading">
                <div class="item flex">
                    <div :class="['label', customerOne?.customerName == customerTwo?.customerName ? '' : 'red']">目标客户
                    </div>
                    <el-radio-group v-model="initFormData.id">
                        <div class="value"><el-radio v-bind:value="customerOne?.id"
                                :label="customerOne?.customerName"></el-radio></div>
                        <div class="value"><el-radio v-bind:value="customerTwo?.id"
                                :label='customerTwo?.customerName'></el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div :class="['label', customerOne?.mnemonicName == customerTwo?.mnemonicName ? '' : 'red']">助记名称
                    </div>
                    <el-radio-group v-model="initFormData.mnemonicName"
                        :disabled="customerOne?.mnemonicName == customerTwo?.mnemonicName">
                        <div class="value"><el-radio :value="customerOne?.mnemonicName"
                                :label="customerOne?.mnemonicName"></el-radio></div>
                        <div class="value"><el-radio :value="customerTwo?.mnemonicName"
                                :label="customerTwo?.mnemonicName"></el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerTypeDictValue == customerTwo?.customerTypeDictValue ? '' : 'red']">
                        客户类型</div>
                    <el-radio-group v-model="initFormData.customerTypeDictValue"
                        :disabled="customerOne?.customerTypeDictValue == customerTwo?.customerTypeDictValue">
                        <div class="value"><el-radio :label="customerOne?.customerTypeDictValue">{{
                                customerOne?.customerTypeName }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerTypeDictValue">{{
                            customerTwo?.customerTypeName }}</el-radio></div>
                    </el-radio-group>
                </div>

                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerLevelDictValue == customerTwo?.customerLevelDictValue ? '' : 'red']">
                        客户等级</div>
                    <el-radio-group v-model="initFormData.customerLevelDictValue"
                        :disabled="customerOne?.customerLevelDictValue == customerTwo?.customerLevelDictValue">
                        <div class="value"><el-radio :label="customerOne?.customerLevelDictValue">{{
                            customerOne?.customerLevelName }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerLevelDictValue">{{
                            customerTwo?.customerLevelName }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerSourceDictValue == customerTwo?.customerSourceDictValue ? '' : 'red']">
                        客户来源</div>
                    <el-radio-group v-model="initFormData.customerSourceDictValue"
                        :disabled="customerOne?.customerSourceDictValue == customerTwo?.customerSourceDictValue">
                        <div class="value"><el-radio :label="customerOne?.customerSourceDictValue">{{
                            customerOne?.customerSourceName }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerSourceDictValue">{{
                            customerTwo?.customerSourceName }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerStatusDictValue == customerTwo?.customerStatusDictValue ? '' : 'red']">
                        客户状态</div>
                    <el-radio-group v-model="initFormData.customerStatusDictValue"
                        :disabled="customerOne?.customerStatusDictValue == customerTwo?.customerStatusDictValue">
                        <div class="value"><el-radio :label="customerOne?.customerStatusDictValue">{{
                            customerOne?.customerStatusName }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerStatusDictValue">{{
                            customerTwo?.customerStatusName }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.continent==customerTwo?.continent&&customerOne?.country==customerTwo?.country? '' : 'red']">
                        所在地区</div>
                    <el-radio-group v-model="regionValue" @change="getRegion"
                        :disabled="customerOne?.continent==customerTwo?.continent&&customerOne?.country==customerTwo?.country">
                        <div class="value"><el-radio :label="1">{{ customerOne?.continent }}<span
                                    v-if='customerOne?.country'>/{{ customerOne?.country }}</span></el-radio></div>
                        <div class="value"><el-radio :label="2">{{ customerTwo?.continent }}<span
                                    v-if='customerTwo?.country'>/{{ customerTwo?.country }}</span></el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div :class="['label', customerOne?.remark == customerTwo?.remark ? '' : 'red']">备注信息</div>
                    <el-radio-group v-model="initFormData.remark"
                        :disabled="customerOne?.remark == customerTwo?.remark">
                        <div class="value"><el-radio :label="customerOne?.remark">{{ customerOne?.remark }}</el-radio>
                        </div>
                        <div class="value"><el-radio :label="customerTwo?.remark">{{ customerTwo?.remark }}</el-radio>
                        </div>
                    </el-radio-group>
                </div>
                <!-- <div class="item flex">
                    <div :class="['label', (customerOne?.liaison?.id == customerTwo?.liaison?.id) ? '' : 'red']">首联系人
                    </div>
                    <el-radio-group v-model="initFormData.liaison.id"
                        :disabled="customerOne?.liaison?.id == customerTwo?.liaison?.id" @change="getLiaison">
                        <div class="value"><el-radio :label="customerOne?.liaison?.id">{{ customerOne?.liaison?.name
                                }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.liaison?.id">{{ customerTwo?.liaison?.name
                                }}</el-radio></div>
                    </el-radio-group>
                </div> -->
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.nextFollowUpTime == customerTwo?.nextFollowUpTime ? '' : 'red']">
                        下次跟进时间
                    </div>
                    <el-radio-group v-model="initFormData.nextFollowUpTime"
                        :disabled="customerOne?.nextFollowUpTime == customerTwo?.nextFollowUpTime">
                        <div class="value"><el-radio :label="customerOne?.nextFollowUpTime">{{
                                customerOne?.nextFollowUpTime }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.nextFollowUpTime">{{
                                customerTwo?.nextFollowUpTime }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div :class="['label', customerOne?.ownerBy == customerTwo?.ownerBy ? '' : 'red']">客户归属</div>
                    <el-radio-group v-model="initFormData.ownerBy"
                        :disabled="customerOne?.ownerBy == customerTwo?.ownerBy" @change="getoOnerBy">
                        <div class="value"><el-radio :label="customerOne?.ownerBy">{{ customerOne?.ownerByName
                                }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.ownerBy">{{ customerTwo?.ownerByName
                                }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.name == customerTwo?.customerCompany?.name ? '' : 'red']">
                        企业名称</div>
                    <el-radio-group v-model="initFormData.customerCompany.name"
                        :disabled="customerOne?.customerCompany?.name == customerTwo?.customerCompany?.name">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.name">{{
                                customerOne?.customerCompany?.name }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.name">{{
                                customerTwo?.customerCompany?.name }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.address == customerTwo?.customerCompany?.address ? '' : 'red']">
                        详细地址</div>
                    <el-radio-group v-model="initFormData.customerCompany.address"
                        :disabled="customerOne?.customerCompany?.address == customerTwo?.customerCompany?.address">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.address">{{
                                customerOne?.customerCompany?.address }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.address">{{
                                customerTwo?.customerCompany?.address }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.scaleDictValue == customerTwo?.customerCompany?.scaleDictValue ? '' : 'red']">
                        企业规模</div>
                    <el-radio-group v-model="initFormData.customerCompany.scaleDictValue"
                        :disabled="customerOne?.customerCompany?.scaleDictValue == customerTwo?.customerCompany?.scaleDictValue">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.scaleDictValue">{{
                                customerOne?.customerCompany?.scaleName }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.scaleDictValue">{{
                                customerTwo?.customerCompany?.scaleName }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.website == customerTwo?.customerCompany?.website ? '' : 'red']">
                        企业网址</div>
                    <el-radio-group v-model="initFormData.customerCompany.website"
                        :disabled="customerOne?.customerCompany?.website == customerTwo?.customerCompany?.website">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.website">{{
                                customerOne?.customerCompany?.website }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.website">{{
                                customerTwo?.customerCompany?.website }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.website1 == customerTwo?.customerCompany?.website1 ? '' : 'red']">
                        企业备用网址1</div>
                    <el-radio-group v-model="initFormData.customerCompany.website1"
                        :disabled="customerOne?.customerCompany?.website1 == customerTwo?.customerCompany?.website1">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.website1">{{
                                customerOne?.customerCompany?.website1 }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.website1">{{
                                customerTwo?.customerCompany?.website1 }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.website2 == customerTwo?.customerCompany?.website2 ? '' : 'red']">
                        企业备用网址2</div>
                    <el-radio-group v-model="initFormData.customerCompany.website2"
                        :disabled="customerOne?.customerCompany?.website2 == customerTwo?.customerCompany?.website2">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.website2">{{
                                customerOne?.customerCompany?.website2 }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.website2">{{
                                customerTwo?.customerCompany?.website2 }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.website3 == customerTwo?.customerCompany?.website3 ? '' : 'red']">
                        企业备用网址3</div>
                    <el-radio-group v-model="initFormData.customerCompany.website3"
                        :disabled="customerOne?.customerCompany?.website3 == customerTwo?.customerCompany?.website3">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.website3">{{
                                customerOne?.customerCompany?.website3 }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.website3">{{
                                customerTwo?.customerCompany?.website3 }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.industry == customerTwo?.customerCompany?.industry ? '' : 'red']">
                        所属行业</div>
                    <el-radio-group v-model="initFormData.customerCompany.industry"
                        :disabled="customerOne?.customerCompany?.industry == customerTwo?.customerCompany?.industry">

                        <div class="value"><el-radio :label="customerOne?.customerCompany?.industry">{{
                            customerOne?.customerCompany?.industry }}
                            </el-radio>
                        </div>
                        <div class="value">
                            <el-radio :label="customerTwo?.customerCompany?.industry">
                                {{ customerTwo?.customerCompany?.industry }}</el-radio>
                        </div>

                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.communicationAddress == customerTwo?.customerCompany?.communicationAddress ? '' : 'red']">
                        通信地址</div>
                    <el-radio-group v-model="initFormData.customerCompany.communicationAddress"
                        :disabled="customerOne?.customerCompany?.communicationAddress == customerTwo?.customerCompany?.communicationAddress">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.communicationAddress">{{
                                customerOne?.customerCompany?.communicationAddress }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.communicationAddress">{{
                                customerTwo?.customerCompany?.communicationAddress }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.postcode == customerTwo?.customerCompany?.postcode ? '' : 'red']">
                        邮政编码</div>
                    <el-radio-group v-model="initFormData.customerCompany.postcode"
                        :disabled="customerOne?.customerCompany?.postcode == customerTwo?.customerCompany?.postcode">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.postcode">{{
                                customerOne?.customerCompany?.postcode }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.postcode">{{
                                customerTwo?.customerCompany?.postcode }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.faxNumber == customerTwo?.customerCompany?.faxNumber ? '' : 'red']">
                        传真号码</div>
                    <el-radio-group v-model="initFormData.customerCompany.faxNumber"
                        :disabled="customerOne?.customerCompany?.faxNumber == customerTwo?.customerCompany?.faxNumber">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.faxNumber">{{
                                customerOne?.customerCompany?.faxNumber }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.faxNumber">{{
                                customerTwo?.customerCompany?.faxNumber }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.email == customerTwo?.customerCompany?.email ? '' : 'red']">
                        企业邮箱：</div>
                    <el-radio-group v-model="initFormData.customerCompany.email"
                        :disabled="customerOne?.customerCompany?.email == customerTwo?.customerCompany?.email">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.email">{{
                                customerOne?.customerCompany?.email }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.email">{{
                                customerTwo?.customerCompany?.email }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.email1 == customerTwo?.customerCompany?.email1 ? '' : 'red']">
                        企业备用邮箱1：</div>
                    <el-radio-group v-model="initFormData.customerCompany.email1"
                        :disabled="customerOne?.customerCompany?.email1 == customerTwo?.customerCompany?.email1">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.email1">{{
                                customerOne?.customerCompany?.email1 }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.email1">{{
                                customerTwo?.customerCompany?.email1 }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.email2 == customerTwo?.customerCompany?.email2 ? '' : 'red']">
                        企业备用邮箱2：</div>
                    <el-radio-group v-model="initFormData.customerCompany.email2"
                        :disabled="customerOne?.customerCompany?.email2 == customerTwo?.customerCompany?.email2">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.email2">{{
                                customerOne?.customerCompany?.email2 }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.email2">{{
                                customerTwo?.customerCompany?.email2 }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.email3 == customerTwo?.customerCompany?.email3 ? '' : 'red']">
                        企业备用邮箱3：</div>
                    <el-radio-group v-model="initFormData.customerCompany.email3"
                        :disabled="customerOne?.customerCompany?.email3 == customerTwo?.customerCompany?.email3">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.email3">{{
                                customerOne?.customerCompany?.email3 }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.email3">{{
                                customerTwo?.customerCompany?.email3 }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.customerCompany?.telephone == customerTwo?.customerCompany?.telephone ? '' : 'red']">
                        联系电话</div>
                    <el-radio-group v-model="initFormData.customerCompany.telephone"
                        :disabled="customerOne?.customerCompany?.telephone == customerTwo?.customerCompany?.telephone">
                        <div class="value"><el-radio :label="customerOne?.customerCompany?.telephone">{{
                                customerOne?.customerCompany?.telephone }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.customerCompany?.telephone">{{
                                customerTwo?.customerCompany?.telephone }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.openingBank == customerTwo?.openingBank ? '' : 'red']">
                        开户行</div>
                    <el-radio-group v-model="initFormData.openingBank"
                        :disabled="customerOne?.openingBank == customerTwo?.openingBank">
                        <div class="value"><el-radio :label="customerOne?.openingBank">{{
                                customerOne?.openingBank }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.openingBank">{{
                                customerTwo?.openingBank }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.taxNumber == customerTwo?.taxNumber ? '' : 'red']">
                        税号</div>
                    <el-radio-group v-model="initFormData.taxNumber"
                        :disabled="customerOne?.taxNumber == customerTwo?.taxNumber">
                        <div class="value"><el-radio :label="customerOne?.taxNumber">{{
                                customerOne?.taxNumber }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.taxNumber">{{
                                customerTwo?.taxNumber }}</el-radio></div>
                    </el-radio-group>
                </div>
                <div class="item flex">
                    <div
                        :class="['label', customerOne?.bankAccount == customerTwo?.bankAccount ? '' : 'red']">
                        银行账号</div>
                    <el-radio-group v-model="initFormData.bankAccount"
                        :disabled="customerOne?.bankAccount == customerTwo?.bankAccount">
                        <div class="value"><el-radio :label="customerOne?.bankAccount">{{
                                customerOne?.bankAccount }}</el-radio></div>
                        <div class="value"><el-radio :label="customerTwo?.bankAccount">{{
                                customerTwo?.bankAccount }}</el-radio></div>
                    </el-radio-group>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <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 { getCustomer, mergeCustomer,formateStringFieldData,listCustomer } from '@/api/customer';
import { CustomerForm, CustomerVO } from '@/api/customer/types';
import paginationSelect from '@/components/common/paginationSelect.vue';
const emits = defineEmits(['refresh'])

const visible = ref(false)
const buttonLoading = ref(false)
const initFormData = ref<CustomerForm>({})
const customerOne = ref<any>()
const customerTwo = ref<any>()
const oneId = ref()
const twoId = ref()
const customerParams = ref()
const formLoading = ref(false)
const refreshFormData = ()=>{
    initFormData.value = {
        fromId: undefined,
        id: undefined,
        customerName: undefined,
        customerCode: undefined,
        ownerBy: undefined,
        continent: undefined,
        country: undefined,
        customerLevelDictValue: undefined,
        customerSourceDictValue: undefined,
        customerStatusDictValue: undefined,
        customerTypeDictValue: undefined,
        remark: undefined,
        openingBank: undefined,
        taxNumber: undefined,
        bankAccount: undefined,
        customerCompany: {
            industry: undefined,
            address: undefined,
            name: undefined,
            communicationAddress: undefined,
            customerId: undefined,
            email: undefined,
            email1: undefined,
            email2: undefined,
            email3: undefined,
            faxNumber: undefined,
            postcode: undefined,
            scaleDictValue: undefined,
            telephone: undefined,
            website: undefined,
            website1: undefined,
            website2: undefined,
            website3: undefined,
        },
        liaison: {
            id: undefined,
            name: undefined,
            ownerBy: undefined,
            ownerByName:undefined,
        },
    }
}

const selectedName1 = ref('')
const selectedName2 = ref('')
const open = (data: any) => {
    customerOne.value= {}
    customerTwo.value= {}
    refreshFormData()
    getCustomerData(data)
    oneId.value = data.ids[0]?data.ids[0]:''
    twoId.value = data.ids[1]?data.ids[1]:''
    customerParams.value = JSON.parse(JSON.stringify(data.querys))
    customerParams.value.scopeMenuId = data.scopeMenuId
    customerParams.value.hasGarbageCustomer = 0
    // getData(0)
    visible.value = true
    setTimeout(() => {
        selectedName1.value = data.ids[0]?data.selectedData[0].customerName:''
        selectedName2.value = data.ids[1]?data.selectedData[1].customerName:''
    }, 0)
}
const regionValue = ref(1)
const getCustomerData = (data: any) => {
    let ids = data.ids
    if(ids[0]){
        getOneCustomer(1,ids[0])
    }
    if(ids[1]){
        getOneCustomer(2,ids[1])
    }
}
const getOneCustomer = (index,id) =>{
    formLoading.value = true
    if(index==1){
        getCustomer(id).then((res) => {
            if (res.success) {
                formLoading.value = false
                customerOne.value = formateStringFieldData(res.result);
                if (!customerOne.value.customerCompany) {
                    customerOne.value.customerCompany = {
                        industry: undefined,
                        address: undefined
                    }
                }
                initFormData.value = JSON.parse(JSON.stringify(res.result))
            }
        })
    }else{
        getCustomer(id).then((res) => {
            if (res.success) {
                formLoading.value = false
                customerTwo.value = formateStringFieldData(res.result);
                if (!customerTwo.value.customerCompany) {
                    customerTwo.value.customerCompany = {
                        industry: undefined,
                        address: undefined
                    }
                }

            }
        })
    }

}
const getRegion = (value) => {
    let customer=value==1?customerOne.value:customerTwo.value
    initFormData.value.continent = customer.continent
    initFormData.value.country = customer.country
}

const customerOption1 = ref<any>([])
const customerOption2 = ref<any>([])
const loading = ref(false)
const getData = (index) => {
    loading.value = true
    listCustomer(customerParams.value).then(res => {
        loading.value = false
        merageLoading.value = false
        formLoading.value = false
        if(res.success) {
            const listData = res.result.records.map((item: { customerName: string, id: number }) => {
                let obj = { label: item.customerName, value: item.id }
                return obj
            })
            if(index==1||index==0){
                customerOption1.value = listData
            }
            if(index==2||index==0){
                customerOption2.value = listData
            }

        }
    })
}


const remoteMethod1 = (query: string) => {
    inputCustomer(1,query)
}
const remoteMethod2 = (query: string) => {
    inputCustomer(2,query)
}
const blurCustomer =  (index,val) => {
    // customerParams.value.customerName = ''
    // getData(index)
}
const inputCustomer = (index,val) => {
    customerParams.value.customerName = val
    getData(index)
}

const changeCustomer = (index,obj) =>{
    if(oneId.value==twoId.value){
        ElMessage.error("合并客户不能为同一个客户");
        if(index==1){
            oneId.value=''
        }else{
            twoId.value=''
        }
    }else{
        getOneCustomer(index,obj.id)
        if(index == 1) {
            selectedName1.value = obj.name
        }
        if(index == 2) {
            selectedName2.value = obj.name
        }
    }
}
const merageLoading = ref(false)
const switchCustomer = ()=>{
    if(!oneId.value||!twoId.value){
        ElMessage.error("请先选择客户")
        return false
    }
    // merageLoading.value = true
    // formLoading.value = true
    customerParams.value.customerName = ''
    // getData(0)
    nextTick(() => {
        [customerOne.value,customerTwo.value] = [customerTwo.value,customerOne.value];
        [selectedName1.value,selectedName2.value] = [selectedName2.value,selectedName1.value]
        oneId.value = customerOne.value.id
        twoId.value = customerTwo.value.id
        initFormData.value = JSON.parse(JSON.stringify(customerOne.value))
	})
}

const form = reactive({
    checkList: []
})

const getLiaison = (val)=>{
    initFormData.value.liaison.name = customerOne.value.liaison.id==val?customerOne.value.liaison.name:customerTwo.value.liaison.name
}
const getoOnerBy = (val)=>{
    initFormData.value.liaison.ownerByName = customerOne.value.liaison.ownerBy==val?customerOne.value.liaison.ownerByName:customerTwo.value.liaison.ownerByName
}

/** 提交按钮 */
const router: any = useRouter();
const submitForm = () => {
        if(!oneId.value||!twoId.value){
            ElMessage.error("必须选择两位客户进行合并");
            return false
        }
        if(initFormData.value.id){
            initFormData.value.fromId = (initFormData.value.id==customerOne.value?.id)?customerTwo.value?.id:customerOne.value?.id
            initFormData.value.customerName = (initFormData.value.id==customerOne.value?.id)?customerOne.value?.customerName:customerTwo.value?.customerName
            initFormData.value.customerCode = (initFormData.value.id==customerOne.value?.id)?customerOne.value?.customerCode:customerTwo.value?.customerCode
        }
        initFormData.value.liaison = initFormData.value.liaison?initFormData.value.liaison:null
        initFormData.value.customerCompany = initFormData.value.customerCompany?initFormData.value.customerCompany:null

        mergeCustomer(initFormData.value).then((res) => {
            if(res.success) {
                ElMessage.success("合并成功");
                cancel()
                emits('refresh')
            }
        })
    }
    const cancel = () => {
        visible.value = false
    }

    defineExpose({
        open
    })
</script>

<style lang="scss" scoped>
.top_area{
    background-color: #F8FAFC;
    border:1px solid #DCDEE2;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    .tip{
        align-items: center;
        margin-bottom: 6px;
    }
    span{
        margin-left: 5px;
    }
}
.merge_form{
    border-top: 1px solid #DCDEE2;
    border-left: 1px solid #DCDEE2;
    margin-top: 10px;
    .item{
        border-bottom: 1px solid #DCDEE2;
        min-height: 45px;
    }
    .label{
        background-color: #F8FAFC;
        border-right: 1px solid #DCDEE2;
        width: 120px;
        text-align: center;
        line-height: 45px;
    }
    .value{
        flex: 1;
        width: 344px;
        border-right: 1px solid #DCDEE2;
        padding-left: 10px;
        min-height: 45px;
        padding-top: 7px;
        label{
            white-space: normal;
        }
    }
    .red{
        color:#EF352B;
    }

}
.change_area{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .change_label{
        width: 120px;
        text-align: center;
        line-height: 45px;
        font-weight: bold;
    }
    .change_select{
        flex:1;
        display: flex;
        align-items: center;
    }
}
</style>
