<template>
    <div class="nav_detail" v-loading="infoLoading">
        <div class="nav_sec">
            <div class="title flex">
                <span class="bold">基本信息</span>
                <span class="flex-center">
                    <el-button type="primary" @click="edit">编辑</el-button>
                    <!-- auth.hasPermi('customer:detail:bjkh') -->
                    <!-- <el-button type="primary">导出</el-button> -->
                </span>
            </div>
            <div class="form_area flex">
                <div class="form_item">
                    <div class="flex"><div class="label">客户代码</div><div class="value">{{customerDetail?.dataCode}}</div></div>
                    <div class="flex"><div class="label">意向产品</div><div class="value">{{customerDetail?.intendedProductsNames}}</div></div>
                    <div class="flex"><div class="label">客户来源</div><div class="value">{{customerDetail?.customerSourceName}}</div></div>
                    <div class="flex"><div class="label">客户等级</div><div class="value">{{customerDetail?.customerLevelName}}</div></div>
                    <div class="flex"><div class="label">经济性质</div><div class="value">{{customerDetail?.customerEconomicNatureName}}</div></div>
                    <div class="flex"><div class="label">客户归属</div><div class="value">{{customerDetail?.ownerByName}}
                        <span v-if="!customerDetail?.hasPublicCustomer">（保护到期时间{{customerDetail?.protectionDate}}）</span>
                    </div></div>
                    <!-- <div class="flex"><div class="label">备注信息</div><div class="value">{{customerDetail?.remark}}</div></div> -->
                </div>
                <div class="form_item">
                    <div class="flex"><div class="label">区域名称</div><div class="value">{{customerDetail?.continent}}<span v-if='customerDetail?.country'>/{{customerDetail?.country}}</span></div></div>
                    <div class="flex"><div class="label">客户状态</div><div class="value">{{customerDetail?.customerStatusName}}</div></div>
                    <div class="flex"><div class="label">客户类型</div><div class="value">{{customerDetail?.customerTypeName}}</div></div>
                    <div class="flex"><div class="label">代理合作</div><div class="value">{{customerDetail?.cooperativeCustomerName}}</div></div>
                    <div class="flex"><div class="label">信用等级</div><div class="value">{{customerDetail?.customerCreditLevelName}}</div></div>
                    <div class="flex"><div class="label">助记名称</div><div class="value">{{customerDetail?.mnemonicName}}</div></div>
                    <!-- <div class="flex"><div class="label"></div><div class="value"></div></div> -->
                    
                </div>
            </div>
            <div class="form_area flex" style="border:none">
                <div class="flex form_item" style="flex:1">
                    <div class="label">备注信息</div><div class="value">{{customerDetail?.remark}}</div>
                </div>
                <div class="flex form_item" style="flex:1">
                    <div class="label"></div><div class="value"></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">{{customerDetail?.customerCompany?.scaleName}}</div></div>
                    <div class="flex"><div class="label">所属行业</div><div class="value">{{customerDetail?.customerCompany?.industry}}</div></div>
                    <div class="flex"><div class="label">邮政编码</div><div class="value">{{customerDetail?.customerCompany?.postcode}}</div></div>
                    <div class="flex"><div class="label">电子邮箱</div><div class="value">{{customerDetail?.customerCompany?.email}}</div></div>
                    <div class="flex"><div class="label">备用邮箱</div>
                        <div class="value">{{ customerDetail?.customerCompany?.email1 }}<sapn v-if="detailData?.customerCompany?.email2">, {{ detailData?.customerCompany?.email2 }}</sapn><sapn v-if="detailData?.customerCompany?.email3">, {{ detailData?.customerCompany?.email3 }}</sapn></div>
                    </div>
                </div>
                <div class="form_item">
                    <div class="flex"><div class="label">企业网址</div><div class="value">{{customerDetail?.customerCompany?.website}}</div></div>
                    <div class="flex"><div class="label">备用网址</div>
                        <div class="value">{{ customerDetail?.customerCompany?.website1 }}<sapn v-if="detailData?.customerCompany?.website2">, {{ detailData?.customerCompany?.website2 }}</sapn><sapn v-if="detailData?.customerCompany?.website3">, {{ detailData?.customerCompany?.website3 }}</sapn></div>
                    </div>
                    <div class="flex"><div class="label">通信地址</div><div class="value">{{customerDetail?.customerCompany?.communicationAddress}}</div></div>
                    <div class="flex"><div class="label">传真号码</div><div class="value">{{customerDetail?.customerCompany?.faxNumber}}</div></div>
                    <div class="flex"><div class="label">联系电话</div><div class="value">{{customerDetail?.customerCompany?.telephone}}</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">{{customerDetail?.openingBank}}</div></div>
                    <div class="flex"><div class="label">银行账号</div><div class="value">{{customerDetail?.bankAccount}}</div></div>
                </div>
                <div class="form_item">
                    <div class="flex"><div class="label">税号</div><div class="value">{{customerDetail?.taxNumber}}</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="form_area flex">
                <div class="form_item">
                    <div class="flex"><div class="label">已成交金额</div><div class="value">{{customerDetail.}}</div></div>
                    <div class="flex"><div class="label">已开票金额</div><div class="value">{{customerDetail.}}</div></div>
                    <div class="flex"><div class="label">潜在交易金额</div><div class="value">{{customerDetail.}}</div></div>
                </div>
                <div class="form_item">
                    <div class="flex"><div class="label">已回款金额</div><div class="value">{{customerDetail.}}</div></div>
                    <div class="flex"><div class="label">未开票金额</div><div class="value">{{customerDetail.}}</div></div>
                    <div class="flex"><div class="label">费用总金额</div><div class="value">{{customerDetail.}}</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">{{customerDetail?.id}}</div></div>
                    <div class="flex"><div class="label">所属部门</div><div class="value">{{customerDetail?.deptName}}</div></div>
                    <div class="flex"><div class="label">前归属人</div><div class="value">{{customerDetail?.formerOwnerByName}}</div></div>
                    <div class="flex"><div class="label">创建时间</div><div class="value">{{customerDetail?.createTime}}</div></div>
                    <div class="flex"><div class="label">最后跟进</div><div class="value">{{customerDetail?.lastFollowUpTime}}</div></div>
                </div>
                <div class="form_item">
                    <div class="flex"><div class="label">协作人员</div><div class="value">{{customerDetail?.collaboratorName}}</div></div>
                    <div class="flex"><div class="label">创建人员</div><div class="value">{{customerDetail?.createByName}}</div></div>
                    <div class="flex"><div class="label">前所属部门</div><div class="value">{{customerDetail?.formerDeptName}}</div></div>
                    <div class="flex"><div class="label">更新时间</div><div class="value">{{customerDetail?.updateTime}}</div></div>
                    <div class="flex"><div class="label">下次跟进</div><div class="value">{{customerDetail?.nextFollowUpTime}}</div></div>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { getAllById } from '@/api/customer';
import { formateNullFieldData} from '@/api/customer';
import {CustomerVO} from "@/api/customer/types";
import auth from '@/plugins/auth'
    const emit = defineEmits(['handleEdit'])
    const props = defineProps({
        //关联客户id
        customerId: {
            type: String,
            default: true
        },

    })
    const customerDetail = ref<any>()
    const detailData = ref<any>()
    const infoLoading =ref(false)
    const getDetail = ()=>{
        infoLoading.value = true
        getAllById(props.customerId).then((res) => {
            if(res.success) {
                detailData.value =JSON.parse(JSON.stringify(res.result))
                customerDetail.value = formateNullFieldData(res.result)
            }
            infoLoading.value = false
        })
    }
    const edit = ()=>{
        emit('handleEdit')
    }

    onMounted(() => {
        getDetail()
    })

    defineExpose({
        open
    })


</script>
<style lang="scss" scoped>

</style>
