<template>
    <div class="detail_area" v-loading="loadingDetail">
        <div class="detail_header">
            <div class="detail_company flex">
                <div class="flex-center">
                    <div>
                        <div class="company_name">{{showDetailData?.customerName}}<span v-if="customerDetail?.mnemonicName">({{showDetailData?.mnemonicName}})</span></div>
                        <div class="company_user">
                            <span>客户归属：{{showDetailData?.ownerByName}}</span>
                            <span>首联系人：{{showDetailData?.liaison?.name}}</span>
                            <span>下次跟进：{{showDetailData?.nextFollowUpTime}}</span>
                        </div>
                    </div>
                </div>
                <div class="header_right flex" v-if="queryData.preNextScopeMenuId">
                    <div class="left" :class="customerDetail?.previousId?'':'btn-grey'" @click="changePage(customerDetail?.previousId)">
                        <el-icon><ArrowLeft /></el-icon>
                    </div>
                    <div class="right" :class="customerDetail?.nextId?'':'btn-grey'" @click="changePage(customerDetail?.nextId)">
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                </div>
            </div>
            <div>
                <el-dropdown style="margin-right: 12px;" trigger="click" @command="handleCommand">
                    <el-button type="primary">
                        <el-icon><Plus /></el-icon>添加<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="item in dropdownList" :command='item.value'>{{item.label}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <template v-for="item in operateBtn" :key="item.value">
                    <el-button v-if='item.show' @click="openDialog(item.value)" :type="(item.value=='concern'&&customerDetail?.hasFollowCustomer)?'primary':''" plain>
                        <el-icon v-if="item.value=='concern'"><StarFilled :color="customerDetail?.hasFollowCustomer?'#1874FF':''"/></el-icon>
                        {{item.label}}
                    </el-button>
                </template>

            </div>
        </div>
        <div class="detail_main">
            <div class="main_nav flex">
                <template v-for="(item,index) in navList"  v-key="item">
                    <div :class="['item',item.label==tabName?'on':'']" v-if='item.show' @click="changeTab(item.label)">
                        <span>{{ item.label }}</span>
                        <i></i>
                    </div>
                </template>
            </div>
            <div class="nav_detail" v-if="tabName=='概况信息'">
                <div class="nav_sec">
                    <div class="title flex">
                        <span class="bold">基本信息</span>
                        <span class="flex-center" @click="changeTab('资料详情')">查看详情<el-icon><ArrowRight /></el-icon></span>
                    </div>
                    <div class="form_area flex">
                        <div class="form_item">
                            <div class="flex"><div class="label">客户代码</div><div class="value">{{showDetailData?.dataCode}}</div></div>
                            <div class="flex"><div class="label">客户状态</div><div class="value">{{showDetailData?.customerStatusName}}</div></div>
                            <div class="flex"><div class="label">客户等级</div><div class="value">{{showDetailData?.customerLevelName}}</div></div>
                            <div class="flex"><div class="label">经济性质</div><div class="value">{{showDetailData?.customerEconomicNatureName}}</div></div>
                            <div class="flex"><div class="label">协助人</div><div class="value">{{showDetailData?.collaboratorName}}</div></div>
                        </div>
                        <div class="form_item">
                            <div class="flex"><div class="label">区域名称</div><div class="value">{{showDetailData?.continent}}<span v-if='customerDetail?.country'>/{{showDetailData?.country}}</span></div></div>
                            <div class="flex"><div class="label">意向产品</div><div class="value">{{showDetailData?.intendedProductsNames}}</div></div>
                            <div class="flex"><div class="label">客户来源</div><div class="value">{{showDetailData?.customerSourceName}}</div></div>
                            <div class="flex"><div class="label">信用等级</div><div class="value">{{showDetailData?.customerCreditLevelName}}</div></div>
                            <div class="flex"><div class="label">客户归属</div><div class="value">{{showDetailData?.ownerByName}}
                                <span v-if="!customerDetail?.hasPublicCustomer&&!countData?.orderFormCount">（保护到期时间{{showDetailData?.protectionDate}}）</span>
                            </div></div>
                        </div>
                    </div>
                </div>
                <div class="nav_sec">
                    <div class="title flex">
                        <span class="bold">首联系人</span>
                        <span class="flex-center" @click="changeTab('联系人')">查看更多<el-icon><ArrowRight /></el-icon></span>
                    </div>
                    <div class="form_area flex">
                        <div class="form_item">
                            <div class="flex"><div class="label">联系人姓名</div><div class="value flex-between">
                                <div>{{showDetailData?.liaison?.name}}</div>
                                <div>
                                    <el-button type="primary" link @click="router.push('/customer/liaison/add?type=edit&id=' + customerDetail?.liaison?.id)">编辑</el-button>
                                    <el-button type="primary" link @click="toLiaison">详情</el-button>
                                </div>
                            </div></div>
                            <div class="flex"><div class="label">角色</div><div class="value">{{showDetailData?.liaison?.liaisonRoleName}}</div></div>
                            <div class="flex"><div class="label">生日</div><div class="value">{{showDetailData?.liaison?.birthday}}</div></div>
                            <div class="flex"><div class="label">固定电话</div><div class="value">{{showDetailData?.liaison?.fixedLineTelephone}}</div></div>
                            <div class="flex"><div class="label">传真号码</div><div class="value">{{showDetailData?.liaison?.faxNumber}}</div></div>
                        </div>
                        <div class="form_item">
                            <div class="flex"><div class="label">手机号码</div><div class="value">{{showDetailData?.liaison?.telephone}}</div></div>
                            <div class="flex"><div class="label">部门职务</div><div class="value">{{showDetailData?.liaison?.departmentPosition}}</div></div>
                            <div class="flex"><div class="label">电子邮箱</div><div class="value flex-between">
                                <div>{{showDetailData?.liaison?.email}}</div>
                                <div class="flex-center">
                                    <el-icon><Message /></el-icon>
                                    <el-button type="primary" link @click="openDialog('email')">发邮件</el-button>
                                </div>
                            </div></div>
                            <div class="flex">
                                <div class="label">备用邮箱：</div>
                                <div class="value">{{ showDetailData?.liaison?.email1 }}<sapn v-if="customerDetail?.liaison?.email2">, {{ customerDetail?.liaison?.email2 }}</sapn><sapn v-if="customerDetail?.liaison?.email3">, {{ customerDetail?.liaison?.email3 }}</sapn></div>
                            </div>
                            <div class="flex"><div class="label"></div><div class="value"></div></div>
                        </div>
                    </div>
                </div>
                <div class="nav_sec">
                    <div class="title flex">
                        <span class="bold">相关数据</span>
                    </div>
                    <div class="company_data flex-between">
                        <div class="item"><div class="item_num">{{countData?.lisionCount}}条</div><div class="item_name">联系人</div></div>
                        <div class="item"><div class="item_num">{{countData?.followUpCount}}条</div><div class="item_name">跟进记录</div></div>
                        <div class="item"><div class="item_num">{{countData?.emailCount}}条</div><div class="item_name">邮件记录</div></div>
                        <div class="item"><div class="item_num">{{countData?.taskCount}}条</div><div class="item_name">任务记录</div></div>
                        <div class="item"><div class="item_num">{{countData?.sendRecordCount}}条</div><div class="item_name">寄样记录</div></div>
                        <!-- <div class="item"><div class="item_num">{{countData?.workOrderCount}}条</div><div class="item_name">工单记录</div></div> -->
                        <div class="item"><div class="item_num">{{countData?.businessCount}}条</div><div class="item_name">商机记录</div></div>
                        <div class="item"><div class="item_num">{{countData?.orderFormCount}}条</div><div class="item_name">订单记录</div></div>
                    </div>
                </div>
                <div class="nav_sec">
                    <div class="title flex">
                        <span class="bold">客户动态</span>
                        <span class="flex-center"><el-checkbox v-model="onlyFollow" size="large" /><span style="margin: 0 16px 0 4px;">只看跟进</span><el-button type="primary" @click="openDialog('AddFollow')">写跟进</el-button></span>
                    </div>
                    <div>
                        <Follow v-if="followParams.resourceTypeId" :btnRole='roleBtn' :onlyShowFollow="onlyFollow" :followParams="followParams" :showAll="false"></Follow>
                    </div>
                </div>
            </div>
            <Information perPrefix="customer" v-if="tabName=='资料详情'" :customerId="queryData.id" @handleEdit="openDialog('edit')"></Information>
            <Liaison perPrefix="customer" v-if="tabName=='联系人'" :customerId="queryData.id" :customerForm="10"></Liaison>
            <FollowUp perPrefix="customer" v-if="tabName=='跟进记录'" resourceType="10" :resourceTypeId="queryData.id"></FollowUp>
            <Task perPrefix="customer" v-if="tabName=='任务记录'" resourceType='10' :resourceTypeId="queryData.id"></Task>
            <OrderForm perPrefix="customer" v-if="tabName=='订单记录'" :customerId="queryData.id" ></OrderForm>
            <WorkOrder perPrefix="customer" v-if="tabName=='工单记录'" resourceType="10" :resourceTypeId="queryData.id"></WorkOrder>
            <sendRecord perPrefix="customer" v-if="tabName=='寄样记录'" :customerId="queryData.id" resourceType="10" :resourceTypeId="queryData.id" :customerName="customerDetail.customerName" :resourceName="customerDetail.customerName"></sendRecord>
            <businessList perPrefix="customer" v-if="tabName == '商机记录'" resourceType="10" :resourceTypeId="queryData.id"></businessList>
            <ResourceList perPrefix="customer" v-if="tabName=='相关附件'" resourceType="10" :resourceTypeId="queryData.id" :customerId="queryData.id"></ResourceList>
            <operationLog perPrefix="customer" v-if="tabName=='操作日志'" resourceType="10" :resourceTypeId="queryData.id"></operationLog>
            <EmailList perPrefix="customer" v-if="tabName=='邮件记录'" :customerId="queryData.id" resourceType="10"></EmailList>
            <QuotationForm perPrefix="customer" v-if="tabName=='报价记录'" :customerId="queryData.id"></QuotationForm>
            <OwerForm perPrefix="customer" v-if="tabName=='归属记录'" :customerId="queryData.id"></OwerForm>
        </div>
    </div>
    <Teleport to="body">
        <div
            class="drag_box"
            draggable="true"
            @dragstart="dragstart($event)"
            @dragend="dragend($event)"
            :style="`position: absolute;right:${elRight}px;bottom:${elBottom}px;z-index: 9999`"
        >
            <div class='follow_style' @click="toPanel">
                <img src="@/assets/images/follow_style.png"/>
                <p>跟进模式</p>
            </div>
        </div>
    </Teleport>
    <!-- 按钮弹窗 -->
    <component v-bind="componentProps" :is="dialogComponent" :ref="($event: any) => setItemRef($event)" @refresh='getDetail(queryData.id)'></component>
    <!-- 变更首联系人 -->
     <el-dialog
        v-model="visible"
        center
        width="680"
        class="list-dialog"
        title="变更首联系人"
    >
        <el-form-item label="首联系人：">
            <el-select-v2
                v-model="liaisonId"
                :options="liaisonOption"
                placeholder="请选择客户首联系人"
                filterable
            />
        </el-form-item>
        <div class="flex" style="justify-content: center;">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="saveLiaison()">提交</el-button>
        </div>
    </el-dialog>
</template>

<script setup lang="ts" >
    import { CustomerVO } from '@/api/customer/types';
    import { getCustomer,getNexCustomer, followCustomer, cancelCustomer,delCustomer,dataCount,formateNullFieldData,changeLialison} from '@/api/customer';
    import { listLiaison } from '@/api/customer/liaison';
    import Follow from '@/components/Follow/index.vue'
    import InSeas from '@/components/common/inSeas.vue'
    import CreateTask from '@/components/common/createTask.vue'
    import AddFollow from '@/components/Follow/add.vue'
    import TransferClue from '@/components/common/transferClue.vue'
    import AddCollaborate from '@/components/common/addCollaborate.vue'
    import Information from './components/Information.vue'
    import Liaison from '@/components/detailCommon/liaison.vue'
    import FollowUp from '@/components/detailCommon/followUp.vue'
    import Task from '@/components/detailCommon/task.vue'
    import AddOrder from '@/components/common/addOrder.vue'
    import OrderForm from '@/components/detailCommon/orderForm.vue'
    import WorkOrder from '@/components/detailCommon/workOrder.vue'
    import sendRecord from '@/components/detailCommon/sendRecord.vue'
    import businessList from '@/components/detailCommon/businessList.vue'
    import operationLog from '@/components/detailCommon/operationLog.vue'
    import EmailList from '@/components/detailCommon/emailList.vue'
    import ResourceList from '@/components/detailCommon/resourceList.vue'
    import OwerForm from '@/components/detailCommon/owerForm.vue'
    import QuotationForm from '@/components/detailCommon/quotationForm.vue'
    import auth from '@/plugins/auth'
    import useSettingsStore from '@/store/modules/settings'
    const useSetStore = useSettingsStore();

    const isDrag = ref(false)
    const startclientX = ref(0)
    const startclientY = ref(0)
    const elRight = ref(30)
    const elBottom = ref(100)
    // 拖拽开始事件
    const dragstart=(e)=>  {
        isDrag.value = true
        startclientX.value = e.clientX; // 记录拖拽元素初始位置
        startclientY.value = e.clientY;
    }
    // 拖拽完成事件
    const dragend=(e)=> {
        isDrag.value = false
        let x = e.clientX - startclientX.value; // 计算偏移量
        let y = e.clientY - startclientY.value;
        elRight.value -= x; // 实现拖拽元素随偏移量移动
        elRight.value = elRight.value < 0 ? 0 : elRight.value
        elRight.value = ((elRight.value + 72) > window.innerWidth) ? (window.innerWidth - 72) : elRight.value
        elBottom.value -= y;
        elBottom.value = elBottom.value < 0 ? 0 : elBottom.value
        elBottom.value = ((elBottom.value + 72) > window.innerHeight) ? (window.innerHeight - 72) : elBottom.value
    }

    const dropdownList = [
        {label:'联系人',value:'lxr'},
        {label:'商机',value:'sj'},
        {label:'订单',value:'dd'},
        // {label:'工单',value:'gd'},
        // {label:'费用',value:'fy'},
        // {label:'需求',value:'xq'},
    ]
    const handleCommand = (val:any) =>{
        console.log(val)
        const id = customerDetail.value?.id
        if(val=='lxr'){
            router.push('/customer/liaison/add?type=add&customerId=' + id)
        }else if(val =='sj'){
            router.push('/business_opportunity/addbus?customerId=' + id)
        }else if(val =='dd'){
            router.push('/order/add?type=add&customerId=' + id)
        }else if(val =='gd'){
            openDialog('order')
        }
    }
    const navList = [
        {label: '概况信息', value: 'gkxx', show: auth.hasPermi('customer:detail:tab_gkxx')},
        {label: '资料详情', value: 'zlxq', show: auth.hasPermi('customer:detail:tab_zlxq')},
        {label: '联系人', value: 'lxr', show: auth.hasPermi('customer:detail:tab_lxr')},
        {label: '跟进记录', value: 'gjjl', show: auth.hasPermi('customer:detail:tab_gjjl')},
        {label: '邮件记录', value: 'yjjl', show: auth.hasPermi('customer:detail:tab_yjjl')},
        {label: '任务记录', value: 'rwjl', show: auth.hasPermi('customer:detail:tab_rwjl')},
        {label: '寄样记录', value: 'jyjl', show: auth.hasPermi('customer:detail:tab_jyjl')},
        // {label: '工单记录', value: 'gdjl', show: auth.hasPermi('customer:detail:tab_gdjl')},
        {label: '商机记录', value: 'sjjl', show: auth.hasPermi('customer:detail:tab_sjjl')},
        {label: '订单记录', value: 'ddjl', show: auth.hasPermi('customer:detail:tab_gldd')},
        {label: '报价记录', value: 'bjjl', show: auth.hasPermi('customer:detail:tab_bjjl')},
        {label: '相关附件', value: 'xgfj', show: auth.hasPermi('customer:detail:tab_xgfj')},
        {label: '归属记录', value: 'gsjl', show: auth.hasPermi('customer:detail:tab_gsjl')},
        {label: '操作日志', value: 'czrz', show: auth.hasPermi('customer:detail:tab_czrz')},
    ]
    const tabName = ref<string>('概况信息')
    const onlyFollow = ref<boolean>(false)
    const loadingDetail = ref(false)
    const changeTab = (name:string)=>{
        tabName.value = name
    }

     // 操作按钮弹窗
    let operateBtn = [
        { label: '写新跟进', value: 'AddFollow' , show: auth.hasPermi('customer:detail:xxgj') },
        { label: '发邮件', value: 'email' , show: auth.hasPermi('customer:detail:fyj') },
        { label: '新建任务', value: 'task' , show: auth.hasPermi('customer:detail:xjrw') },
        { label: '转移客户', value: 'transfer' , show: auth.hasPermi('customer:detail:zykh') },
        { label: '移入公海', value: 'inSeas' , show: auth.hasPermi('customer:detail:yrgh') },
        { label: '添加协作', value: 'collaborate' , show: auth.hasPermi('customer:detail:tjxz') },
        { label: '重点关注', value: 'concern' , show: auth.hasPermi('customer:detail:zdgz') },
        { label: '变更首联系人', value: 'liaison' , show: auth.hasPermi('customer:detail:bgslxr') },
        { label: '编辑客户', value: 'edit' , show: auth.hasPermi('customer:detail:bjkh') },
        { label: '删除客户', value: 'del' , show: auth.hasPermi('customer:detail:sckh') },
    ]
    const dialogComponent = shallowRef()
    const dialogRef = ref()
    const visible = ref(false)
    const setItemRef = (el: any) => {
        if (el) {
            dialogRef.value = el
        }
    }
    const componentProps = shallowRef()
    let propData:any = {}
    const openDialog = (val: string) => {
        if(val == 'email') {
            const { href } = router.resolve({
                path: '/email/send',
                query: {
                    email: customerDetail.value.liaison.email
                }
            })
            window.open(href, '_blank')
            return false
        }
        switch(val) {
            case 'order': // 添加订单
                dialogComponent.value = AddOrder
                propData.type='add'
                propData.customerId=customerDetail.value?.id
                break;
            case 'AddFollow': // 写新更进
                dialogComponent.value = AddFollow
                propData.type = 'add'
                propData.resourceType = 10
                propData.customerId = customerDetail.value?.id
                propData.resourceTypeId = customerDetail.value?.id
                propData.resourceName = customerDetail.value?.customerName
                propData.resourceStageName = customerDetail.value?.customerStatusName
                propData.resourceStageDictValue = customerDetail.value?.customerStatusDictValue
                propData.changeType = true
                break;
            case 'task': // 新建任务
                componentProps.value = { isCorrelation: false }
                propData = {
                    type: 'add',
                    obj: { resourceType: '10', resourceTypeIdls: [customerDetail.value?.id] }
                }
                dialogComponent.value = CreateTask
                break;
            case 'inSeas': // 移入公海
                propData = [customerDetail.value?.id]
                dialogComponent.value = InSeas
                break;
            case 'transfer': // 转移客户
                propData = {
                    resourceType: '10',
                    typeName: '客户',
                    idList: [customerDetail.value?.id]
                }
                dialogComponent.value = TransferClue
                break;
            case 'collaborate': // 添加协作
                dialogComponent.value = AddCollaborate
                propData.resourceType = 10
                propData.resourceIdList = [customerDetail.value?.id]
                break;
            case 'concern': // 重点关注
                focusCustomer()
                break;
            case 'edit': // 编辑客户
                let data = '?type=edit&id=' + customerDetail.value?.id
                if(queryData.form) {
                    data += '&form=' + queryData.form
                }
                router.push('../customer/addCustomer' + data)
                break;
            case 'del': // 删除客户
                ElMessageBox.confirm(
                    '是否确认删除当前客户？',
                    '确认提示',
                    { type: 'warning', confirmButtonText: '提交' }
                ).then(() => {
                    delCustomer(customerDetail.value?.id).then(res => {
                        if(res.success) {
                            ElMessage.success('删除成功')
                            router.go(-1)
                        }else{
                            ElMessage.error('删除失败')
                        }
                    })
                }).catch(() => { })
                break;
            case 'liaison': //变更首联系人
                visible.value = true
                getLiaison(customerDetail.value?.id)
                break
        }
        nextTick(() => {
            if(val!='concern'&&val!='edit'&&val!='del'&&val!='liaison'){
                dialogRef.value.open(propData)
            }
        })
    }
    const liaisonId = ref()
    const liaisonOption = ref([])
    const getLiaison = (customerId: string) => {
        listLiaison({ pageIndex: 1, pageSize: 999999, 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 saveLiaison = ()=>{
        if(!liaisonId.value){
            ElMessage.error("请选择首联系人");
            return
        }
        changeLialison({ customerId:customerDetail.value?.id,id:liaisonId.value }).then(res => {
            if(res.success) {
                ElMessage.success("变更首联系人成功");
                visible.value = false
                getDetail(queryData.id)
            }
        })
    }

    const roleBtn = ref([
      { type: 'commit', hasPermi: `customer:detail:tab_gjjl_tj` },
      { type: 'detail', hasPermi: `customer:detail:tab_gjjl_xq` },
      { type: 'remove', hasPermi: `customer:detail:tab_gjjl_sc` },
      {type: 'edit', hasPermi: `customer:detail:tab_gjjl_bj`},
    ])

    const customerDetail = ref<any>()

    // 跟进参数
    const followParams:any = ref({
        resourceType:10,
        resourceTypeId:customerDetail.value?.id,
    })

    const router: any = useRouter();
    let queryData = router.currentRoute.value.query
    // 获取客户详情
    const showDetailData = ref<any>()
    const getDetail = (id:string)=>{
        loadingDetail.value = true
        if(queryData.preNextScopeMenuId){ // 列表进
            queryData.hasOrderForm = (queryData.hasOrderForm=='false'||queryData.hasOrderForm=='undefined')?0:queryData.hasOrderForm=='true'?1:queryData.hasOrderForm
            queryData.hasFollowMode = (queryData.hasFollowMode=='false'||queryData.hasFollowMode=='undefined')?false:queryData.hasFollowMode=='true'?true:queryData.hasFollowMode
            queryData.hasPublicCustomer = (queryData.hasPublicCustomer=='0'||queryData.hasPublicCustomer=='undefined')?false:queryData.hasPublicCustomer=='1'?true:queryData.hasPublicCustomer
            queryData.ownerByIds = (!queryData.ownerByIds||queryData.ownerByIds=='')?[]:queryData.ownerByIds.split(',')           
            console.log(queryData)
            getNexCustomer(queryData).then((res) => {
                detail(res)
            })
        }else{
            getCustomer(id,queryData.scopeMenuId).then((res) => {
                detail(res)
            })
        }

    }
    const detail = (res)=>{
        if(res.success) {
            showDetailData.value = formateNullFieldData(JSON.parse(JSON.stringify(res.result)))
            customerDetail.value = res.result
            useSetStore.setTitle(res.result.customerName)
            followParams.value.resourceTypeId = res.result.id
        }
        loadingDetail.value = false
    }

    let countData:any = ref()
    const getCount = ()=>{
        dataCount(queryData.id).then((res) => {
            if(res.success) {
                countData.value = res.result
            }
        })
    }

    // 详情切换
    const changePage = (id?:string)=>{
        if(id){
            if(queryData.preNextScopeMenuId){
                router.replace('/customer/customerDetail?id=' + id+'&preNextScopeMenuId='+queryData.preNextScopeMenuId+'&scopeMenuId='+router.currentRoute.value?.meta?.menuId+'&resourceType=10&blurry='+queryData.blurry+'&customerForm=10&customerStatusDictValue='+queryData.customerStatusDictValue+'&customerTypeDictValue='+queryData.customerTypeDictValue+'&customerLevelDictValue='+queryData.customerLevelDictValue+'&lastFollowUpTime='+queryData.lastFollowUpTime+'&queryRangeType='+queryData.queryRangeType+'&hasOrderForm='+queryData.hasOrderForm+'&hasPublicCustomer='+queryData.hasPublicCustomer+'&ownerByIds='+queryData.ownerByIds+'&hasFollowMode='+queryData.hasFollowMode+'&customerName='+queryData.customerName+'&liaisonName='+queryData.liaisonName+'&country='+queryData.country)       
            }else{
                router.replace('/customer/customerDetail?id=' + id+'&scopeMenuId='+router.currentRoute.value?.meta?.menuId)
            }
        }
        changeTab('概况信息')
    }
    const toPanel=()=>{
        if(queryData.preNextScopeMenuId){
            router.replace('/customer/followPanel?id=' + queryData.id+'&preNextScopeMenuId='+queryData.preNextScopeMenuId+'&scopeMenuId='+router.currentRoute.value?.meta?.menuId+'&resourceType=10&blurry='+queryData.blurry+'&customerForm=10&customerStatusDictValue='+queryData.customerStatusDictValue+'&customerTypeDictValue='+queryData.customerTypeDictValue+'&customerLevelDictValue='+queryData.customerLevelDictValue+'&lastFollowUpTime='+queryData.lastFollowUpTime+'&queryRangeType='+queryData.queryRangeType+'&hasOrderForm='+queryData.hasOrderForm+'&hasPublicCustomer='+queryData.hasPublicCustomer+'&ownerByIds='+queryData.ownerByIds+'&hasFollowMode='+queryData.hasFollowMode+'&customerName='+queryData.customerName+'&liaisonName='+queryData.liaisonName+'&country='+queryData.country)
        }else{
            router.replace('/customer/followPanel?id=' + queryData.id+'&scopeMenuId='+router.currentRoute.value?.meta?.menuId)
        }
        
    }
    const init = async ()=>{
        getDetail(queryData.id)
        getCount()
    }
    const route = useRoute();
    watch(route, (newRoute, oldRoute) => {
        let queryDataNew: any = router.currentRoute.value.query
        if (queryDataNew.id) {
            queryData.id = queryDataNew.id
            init()
        }
    });


    // 关注客户
    const focusCustomer = ()=>{
        const hasFollow = customerDetail.value?.hasFollowCustomer
        if(hasFollow){
            cancelCustomer(customerDetail.value?.id).then((res) => {
                if(res.success) {
                    ElMessage.success("取消关注成功");
                    customerDetail.value.hasFollowCustomer=false
                }
            })
        }else{
            followCustomer(customerDetail.value?.id).then((res) => {
                if(res.success) {
                    ElMessage.success("关注成功");
                    customerDetail.value.hasFollowCustomer=true
                }
            })
        }
    }

    const toLiaison = () =>{
        const { href } = router.resolve({
            path: '/customer/liaison/detail',
            query: {
                id:customerDetail.value.liaison.id,
            }
        })
        window.open(href, '_blank')
    }

    onMounted(() => {
        console.log(323,queryData)
        init()
    })

</script>

<style lang="scss" scoped>

.follow_style{
    background: #1874FF;
    color: #fff;
}
</style>
