<template>
    <div class="detail_area">
        <div class="detail_header">
            <div class="detail_company flex">
                <div class="flex-center">
                    <div>
                        <div class="company_name">{{ showDetailData?.name }}</div>
                        <div class="company_user">
                            <span>关联客户：{{ showDetailData?.customerName }}</span>
                            <span>电子邮箱：{{ showDetailData?.email }}</span>
                            <!-- <span>下次跟进：</span> -->
                        </div>
                    </div>
                </div>
                <!-- <div class="header_right flex" v-if="queryData.scopeMenuId">
                    <div class="left" :class="detailData?.previousId?'':'btn-grey'">
                        <el-icon @click="changeRoute(detailData?.previousId)"><ArrowLeft /></el-icon>
                    </div>
                    <div class="right" :class="detailData?.nextId?'':'btn-grey'">
                        <el-icon @click="changeRoute(detailData?.nextId)"><ArrowRight /></el-icon>
                    </div>
                </div> -->
            </div>
            <div>
                <template v-for="item in operateBtn" :key="item.value">
                    <el-button @click="openDialog(item.value)" v-if="item.show">{{ item.label }}</el-button>
                </template>
            </div>
        </div>
        <div class="detail_main">
            <div class="main_nav flex">
                <template v-for="item in navList" v-key="item">
                    <div v-if="item.show" :class="['item', item.value == navValue ? 'on' : '']" @click="changeTab(item.value)">
                        <span>{{ item.label }}</span>
                        <i></i>
                    </div>
                </template>
            </div>
            <div class="nav_detail" v-if="navValue == 'infomation'">
                <div class="nav_sec">
                    <div class="title flex">
                        <span class="bold">基本信息</span>
                    </div>
                    <div class="form_area flex">
                        <div class="form_item">
                            <div class="flex">
                                <div class="label">联系人姓名：</div>
                                <div class="value">{{ showDetailData?.name }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">尊称：</div>
                                <div class="value">{{ showDetailData?.callName }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">部门职务：</div>
                                <div class="value">{{ showDetailData?.departmentPosition }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">固定电话：</div>
                                <div class="value">{{ showDetailData?.fixedLineTelephone }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">电子邮箱：</div>
                                <div class="value">{{ showDetailData?.email }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">备用邮箱：</div>
                                <div class="value">{{ showDetailData?.email1 }}<sapn v-if="detailData?.email2">, {{ detailData?.email2 }}</sapn><sapn v-if="detailData?.email3">, {{ detailData?.email3 }}</sapn></div>
                            </div>
                            <div class="flex">
                                <div class="label">QQ：</div>
                                <div class="value">{{ showDetailData?.qq }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">SKYPE：</div>
                                <div class="value">{{ showDetailData?.skype }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">微信：</div>
                                <div class="value">{{ showDetailData?.wechat }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">Linkedin：</div>
                                <div class="value">{{ showDetailData?.linkedin }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">Whatsapp：</div>
                                <div class="value">{{ showDetailData?.whatsapp }}</div>
                            </div>

                            <!-- <div class="flex">
                                <div class="label">详细地址：</div>
                                <div class="value">{{ detailData?.address }}</div>
                            </div> -->
                        </div>
                        <div class="form_item">
                            <div class="flex">
                                <div class="label">关联客户：</div>
                                <div class="value">{{ showDetailData?.customerName }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">角色：</div>
                                <div class="value">{{ showDetailData?.liaisonRoleName }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">手机号码：</div>
                                <div class="value">{{ showDetailData?.telephone }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">传真号码：</div>
                                <div class="value">{{ showDetailData?.faxNumber }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">邮政编码：</div>
                                <div class="value">{{ showDetailData?.postcode }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">宅电：</div>
                                <div class="value">{{ showDetailData?.homeElectricity }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">旺旺：</div>
                                <div class="value">{{ showDetailData?.wangwang }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">Twitter：</div>
                                <div class="value">{{ showDetailData?.twitter }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">Facebook：</div>
                                <div class="value">{{ showDetailData?.facebook }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">所在地区：</div>
                                <div class="value">{{ showDetailData?.internationalArea }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">备注信息：</div>
                                <div class="value">{{ showDetailData?.remark }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="nav_sec">
                    <div class="title flex">
                        <span class="bold">系统信息</span>
                    </div>
                    <div class="form_area flex">
                        <div class="form_item">
                            <div class="flex">
                                <div class="label">系统编号：</div>
                                <div class="value">{{ showDetailData?.id }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">创建时间：</div>
                                <div class="value">{{ showDetailData?.createTime }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">最后跟进：</div>
                                <div class="value">{{ showDetailData?.lastFollowUpTime }}</div>
                            </div>
                        </div>
                        <div class="form_item">
                            <div class="flex">
                                <div class="label">创建人员：</div>
                                <div class="value">{{ showDetailData?.createByName }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">更新时间：</div>
                                <div class="value">{{ showDetailData?.updateTime }}</div>
                            </div>
                            <div class="flex">
                                <div class="label">下次跟进：</div>
                                <div class="value">{{ showDetailData?.nextFollowUpTime }}</div>
                            </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" v-if="auth.hasPermi('liaison:detail:xxgj')" @click="openDialog('AddFollow')">写跟进</el-button>
                        </span>
                    </div>
                    <div>
                        <Follow :onlyShowFollow="onlyFollow" :btnRole='roleBtn' :followParams="{ resourceType: '20', resourceTypeId: queryData?.id }" :showAll="false" />
                    </div>
                </div>
            </div>
            <component :is="navComponent" v-bind="navProps" @changeRoute="changeRoute"></component>
        </div>
    </div>
    <!-- 按钮弹窗 -->
    <component :is="dialogComponent" :ref="($event: any) => setItemRef($event)"></component>
</template>

<script setup lang="ts">
import Follow from '@/components/Follow/index.vue'
import AddFollow from '@/components/Follow/add.vue'
import FollowUp from '@/components/detailCommon/followUp.vue';
import Liaison from '@/components/detailCommon/liaison.vue'
import BusinessList from '@/components/detailCommon/businessList.vue';
import OperationLog from '@/components/detailCommon/operationLog.vue';
import EmailList from '@/components/detailCommon/emailList.vue'
import { getLiaison, delLiaison } from '@/api/customer/liaison';
import { LiaisonVO } from '@/api/customer/liaison/types';
import { useTagsViewStore } from '@/store/modules/tagsView';
import auth from '@/plugins/auth'
import { formateNullFieldData } from '@/api/customer';
import useSettingsStore from '@/store/modules/settings'

const navList = [
    { label: '概况信息', value: 'infomation', show: auth.hasPermi('liaison:detail:tab_gkxx') },
    { label: '跟进记录', value: 'follow', show: auth.hasPermi('liaison:detail:tab_gjjl'), components: FollowUp },
    { label: '商机记录', value: 'business', show: auth.hasPermi('liaison:detail:tab_sjjl'), components: BusinessList },
    { label: '相关联系人', value: 'liaison', show: auth.hasPermi('liaison:detail:tab_xglxr'), components: Liaison },
    { label: '邮件记录', value: 'email', show: auth.hasPermi('liaison:detail:tab_yjjl'), components: EmailList },
    { label: '操作日志', value: 'operationLog', show: auth.hasPermi('liaison:detail:tab_czrz'), components: OperationLog }
];
const roleBtn = ref([
    { type: 'commit', hasPermi: `liaison:detail:tab_gjjl_tj` },
    { type: 'detail', hasPermi: `liaison:detail:tab_gjjl_xq` },
    { type: 'remove', hasPermi: `liaison:detail:tab_gjjl_sc` },
    {type: 'edit', hasPermi: `liaison:detail:tab_gjjl_bj`},
])
const navComponent = shallowRef<any>()
const navProps = shallowRef()
const navValue = ref('infomation')
const changeTab = (value: string) => {
    navValue.value = value
    navComponent.value = navList.find(a => a.value == value)?.components
    if(value == 'liaison') {
        navProps.value = { customerId: detailData.value?.customerId, nonId: queryData.id, customerForm: detailData.value?.customerForm }
    }else if(value == 'email') {
        navProps.value = { liaisonId: queryData.id, customerId: detailData.value?.customerId }
    }else {
        navProps.value = { resourceType: '20', resourceTypeId: queryData.id, customerId: detailData.value?.customerId }
    }
    navProps.value.perPrefix = 'liaison'
}
const onlyFollow = ref(false)

const router = useRouter();
let queryData: { id?: string, scopeMenuId?: string } = router.currentRoute.value.query

// 获取联系人详情数据
const detailData = ref<LiaisonVO>()
const showDetailData = ref<LiaisonVO>()
const useSetStore = useSettingsStore()
const getDetailData = () => {
    getLiaison(queryData.id, queryData.scopeMenuId).then(res => {
        if (res.success) {
            showDetailData.value = formateNullFieldData(JSON.parse(JSON.stringify(res.result)))
            detailData.value = res.result
            useSetStore.setTitle(detailData.value.name)
        }
    })
}

if (queryData.id) {
    getDetailData()
}

// 操作按钮弹窗
let operateBtn = [
    // { label: '添加商机', value: 'addBusiness', show: auth.hasPermi('liaison:detail:tjsj') },
    { label: '写新跟进', value: 'AddFollow', show: auth.hasPermi('liaison:detail:xxgj') },
    { label: '发邮件', value: 'email', show: auth.hasPermi('liaison:detail:fyj') },
    { label: '编辑联系人', value: 'editLiaison', show: auth.hasPermi('liaison:detail:bjlxr') },
    { label: '删除联系人', value: 'delLiaison', show: auth.hasPermi('liaison:detail:sclxr') },
]
const dialogComponent = shallowRef()
const dialogRef = ref()
const setItemRef = (el: any) => {
    if (el) {
        dialogRef.value = el
    }
}
const openDialog = (val: string) => {
    if (val == 'email') {
        const { href } = router.resolve({
            path: '/email/send',
            query: {
                email: detailData.value?.email
            }
        })
        window.open(href, '_blank')
        return false
    }
    let query = {}
    switch (val) {
        case 'addBusiness': // 添加商机
            router.push('/business_opportunity/addbus?customerId=' + detailData.value?.customerId + '&liaisonId=' + queryData.id)
            break;
        case 'AddFollow': // 写新跟进
            dialogComponent.value = AddFollow
            query = {
                type: 'add',
                resourceType: '20',
                resourceTypeId: detailData.value?.id,
                resourceName: detailData.value?.customerName,
                customerId: detailData.value?.customerId,
                customerForm: detailData.value?.customerForm,
                resourceStageDictValue: detailData.value?.clueStatusDictValue?detailData.value?.clueStatusDictValue:detailData.value?.customerStatusDictValue,
            }
            break;
        case 'editLiaison': // 编辑联系人
            router.push('./add?type=edit&id=' + queryData.id)
            break;
        case 'delLiaison': // 删除联系人
            ElMessageBox.confirm(
                '是否确认删除当前数据？',
                '确认提示',
                { type: 'warning', confirmButtonText: '提交' }
            ).then(() => {
                delLiaison(queryData.id).then(res => {
                    if(res.success) {
                        ElMessage.success('删除成功')
                        router.go(-1)
                        useTagsViewStore().delView(router.currentRoute.value)
                    }else{
                        ElMessage.error('删除失败')
                    }
                })
            }).catch(() => { })
            break;
    }
    if (['addBusiness', 'AddFollow'].includes(val)) {
        nextTick(() => {
            dialogRef.value.open(query)
        })
    }
}

const changeRoute = (id: string | number) => {
    if(id){
        router.replace('./detail?id=' + id + '&scopeMenuId=' + queryData.scopeMenuId)
    }
}
const route = useRoute();
watch(route, (newRoute, oldRoute) => {
    let queryDataNew: any = router.currentRoute.value.query
    if (queryDataNew.id) {
        queryData.id = queryDataNew.id
        getDetailData()
        navValue.value = 'infomation'
        changeTab('infomation')
    }
});
</script>
