<!-- 交易商管理-交易商管理-交易商管理-详情 -->
<template>
    <app-drawer :title="t('investor.manage.user.details.title')" width="900" v-model:show="show" :loading="loading" :refresh="refresh">
        <app-table-details :title="t('common.baseinfo')" :data="oldData?.userAccountDetailVo" :label-width="160"
            :cell-props="detailProps1" :column="2">
            <!-- 交易商名称 -->
            <template #accountName="{ value }">
                <p>{{ value }}</p>
                <p class="red" v-if="newData && newData.userAccountDetailVo.accountName !== value">
                    {{ newData.userAccountDetailVo.accountName }}
                </p>
            </template>
            <!-- 开户方式 -->
            <template #openMode>
                {{ oldData?.userinfoDetailVo.openMode }}
            </template>
            <!-- 申请人 -->
            <template #createName="{ value }">
                <span v-if="oldData?.userinfoDetailVo.openMode === 1">{{ value }}</span>
                <span v-else>{{ oldData?.userAccountDetailVo.accountName }}</span>
            </template>
        </app-table-details>
        <app-table-details :title="oldData?.userinfoDetailVo.userinfoType === UserInfoType.Personal ? t('investor.manage.user.details.subtitle1') : t('investor.manage.user.details.subtitle2')"
            :data="oldData?.userinfoDetailVo" :label-width="160" :cell-props="detailProps2" :column="2">
            <!-- 证件照正面 -->
            <template #cardFrontPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" />
            </template>
            <!-- 证件照反面 -->
            <template #cardBackPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" />
            </template>
            <!-- 通迅地址 -->
            <template #address="{ value }">
                {{ handleNoneValue(oldData?.userinfoDetailVo.pathName + value) }}
            </template>
            <!-- 法人身份证正面 -->
            <template #legalcardfrontphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" />
            </template>
            <!-- 法人身份证反面 -->
            <template #legalcardbackphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" />
            </template>
            <!-- 法人授权书 -->
            <template #otherUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" />
            </template>
        </app-table-details>
        <template #footer>
            <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
            <slot></slot>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { handleNoneValue, formatDate } from '@/filters'
import { decryptAES } from '@/services/crypto'
import { useEnum } from '@/hooks/enum'
import { UserInfoType, getGenderName } from '@/constants/member'
import { useRequest } from '@/hooks/request'
import { queryInvestorListDetail } from '@/services/api/investor'
import { CellProp } from '@pc/components/base/table-details/types'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppTableDetails from '@pc/components/base/table-details/index.vue'
import service from '@/services'
import { i18n } from '@/stores'

const props = defineProps({
    userId: {
        type: Number,
        required: true
    },
    modifyStatus: {
        type: Number,
        required: true
    }
})

const { global: { t } } = i18n
const show = ref(true)
const refresh = ref(false)
const loading = ref(false)
const hideField = [2, 3, 4].includes(props.modifyStatus) // 根据状态是否隐藏字段
const newData = ref<Model.InvestorListDetailRsp['newResult']>()
const oldData = ref<Model.InvestorListDetailRsp['oldResult']>()

// 是否实名
const hasauthEnum = useEnum('hasauth')
// 状态
const areastatusEnum = useEnum('areastatus')
// 变更状态
const modifystatusEnum = useEnum('modifystatus')
// 企业性质枚举
const biznatureEnum = useEnum('biznature')
// 个人证件类型
const certypepersonEnum = useEnum('certypeperson')
// 企业证件类型
const certypecompanyEnum = useEnum('certypecompany')

useRequest(queryInvestorListDetail, {
    params: {
        userid: props.userId,
        modifyFlag: props.modifyStatus
    },
    onSuccess: (res) => {
        const { newResult, oldResult } = res.data
        const baseUrl = service.getConfig('apiUrl')
        const getUrl = (value: string) => value && new URL(value, baseUrl).href

        if (newResult) {
            const detail = newResult.userinfoDetailVo
            detail.cardFrontPhotoUrl = getUrl(detail.cardFrontPhotoUrl)
            detail.cardBackPhotoUrl = getUrl(detail.cardBackPhotoUrl)
            detail.halfBodyPhotoUrl = getUrl(detail.halfBodyPhotoUrl)
            detail.legalCardFrontPhotoUrl = getUrl(detail.legalCardFrontPhotoUrl)
            detail.legalCardBackPhotoUrl = getUrl(detail.legalCardBackPhotoUrl)
            detail.otherUrl = getUrl(detail.otherUrl)

            detail.cardNum = decryptAES(detail.cardNum)
            detail.mobile = decryptAES(detail.mobile)
            detail.telPhone = decryptAES(detail.telPhone)
            detail.wechat = decryptAES(detail.wechat)
            detail.email = decryptAES(detail.email)
        }
        if (oldResult) {
            const detail = oldResult.userinfoDetailVo
            detail.cardFrontPhotoUrl = getUrl(detail.cardFrontPhotoUrl)
            detail.cardBackPhotoUrl = getUrl(detail.cardBackPhotoUrl)
            detail.halfBodyPhotoUrl = getUrl(detail.halfBodyPhotoUrl)
            detail.legalCardFrontPhotoUrl = getUrl(detail.legalCardFrontPhotoUrl)
            detail.legalCardBackPhotoUrl = getUrl(detail.legalCardBackPhotoUrl)
            detail.otherUrl = getUrl(detail.otherUrl)

            detail.cardNum = decryptAES(detail.cardNum)
            detail.mobile = decryptAES(detail.mobile)
            detail.telPhone = decryptAES(detail.telPhone)
            detail.wechat = decryptAES(detail.wechat)
            detail.email = decryptAES(detail.email)
        }

        newData.value = newResult
        oldData.value = oldResult
    }
})

const detailProps1: CellProp[] = [
    { prop: 'userId', label: 'investor.manage.user.details.userId' },
    { prop: 'accountName', label: 'investor.manage.user.details.accountName' },
    { prop: 'memberUserName', label: 'investor.manage.user.details.memberUserName' },
    { prop: 'parentUserName', label: 'investor.manage.user.details.parentUserName' },
    { prop: 'openMode', label: 'investor.manage.user.details.openMode' },
    { prop: 'createTime', label: 'investor.manage.user.details.createTime', formatValue: (val) => formatDate(val) },
    { prop: 'createName', formatLabel: () => oldData.value?.userinfoDetailVo.openMode === 1 ? 'investor.manage.user.details.createName1' : 'investor.manage.user.details.createName2' },
    { prop: 'accountStatus', label: 'investor.manage.user.details.accountStatus', formatValue: (val) => areastatusEnum.getEnumTypeName(val), show: !hideField },
    { prop: 'modifyStatus', label: 'investor.manage.user.details.modifyStatus', formatValue: (val) => modifystatusEnum.getEnumTypeName(val) },
    { prop: 'isAuth', label: 'investor.manage.user.details.isAuth', formatValue: (val) => hasauthEnum.getEnumTypeName(val) },
    { prop: 'modifyTime', label: 'investor.manage.user.details.modifyTime', formatValue: (val) => formatDate(val) },
    { prop: 'modifyName', label: 'investor.manage.user.details.modifyName' },
    { prop: 'auditTime', label: 'investor.manage.user.details.auditTime', formatValue: (val) => formatDate(val), show: !hideField },
    { prop: 'auditAccountName', label: 'investor.manage.user.details.auditAccountName', show: !hideField },
    { prop: 'modifyRemark', label: 'investor.manage.user.details.modifyRemark', show: hideField },
]

const detailProps2 = computed<CellProp[]>(() => {
    const type = oldData.value?.userinfoDetailVo.userinfoType
    if (type === UserInfoType.Personal) {
        return [
            { prop: 'cardTypeId', label: 'investor.manage.user.details.cardTypeId', formatValue: (val) => certypepersonEnum.getEnumTypeName(val) },
            { prop: 'cardNum', label: 'investor.manage.user.details.cardNum' },
            { prop: 'company', label: 'investor.manage.user.details.company' },
            { prop: 'sex', label: 'investor.manage.user.details.sex', formatValue: (val) => getGenderName(val) },
            { prop: 'mobile', label: 'investor.manage.user.details.mobile' },
            { prop: 'telPhone', label: 'investor.manage.user.details.telPhone' },
            { prop: 'address', label: 'investor.manage.user.details.address' },
            { prop: 'postalCode', label: 'investor.manage.user.details.postalCode' },
            { prop: 'wechat', label: 'investor.manage.user.details.wechat' },
            { prop: 'email', label: 'investor.manage.user.details.email' },
            { prop: 'cardFrontPhotoUrl', label: 'investor.manage.user.details.cardFrontPhotoUrl' },
            { prop: 'cardBackPhotoUrl', label: 'investor.manage.user.details.cardBackPhotoUrl' },
            { prop: 'remark', label: 'investor.manage.user.details.remark' },
        ]
    }
    if (type === UserInfoType.Company) {
        return [
            { prop: 'needInvoice', label: 'investor.manage.user.details.needInvoice' },
            { prop: 'cardTypeId', label: 'investor.manage.user.details.cardTypeId', formatValue: (val) => certypecompanyEnum.getEnumTypeName(val) },
            { prop: 'cardNum', label: 'investor.manage.user.details.cardNum' },
            { prop: 'customerName', label: 'investor.manage.user.details.customerName' },
            { prop: 'bizNature', label: 'investor.manage.user.details.bizNature', formatValue: (val) => biznatureEnum.getEnumTypeName(val) },
            { prop: 'legalPersonName', label: 'investor.manage.user.details.legalPersonName' },
            { prop: 'contactName', label: 'investor.manage.user.details.contactName' },
            { prop: 'sex', label: 'investor.manage.user.details.sex', formatValue: (val) => getGenderName(val) },
            { prop: 'mobile', label: 'investor.manage.user.details.mobile' },
            { prop: 'telPhone', label: 'investor.manage.user.details.telPhone' },
            { prop: 'address', label: 'investor.manage.user.details.address' },
            { prop: 'postalCode', label: 'investor.manage.user.details.postalCode' },
            { prop: 'email', label: 'investor.manage.user.details.email' },
            { prop: 'wechat', label: 'investor.manage.user.details.wechat' },
            { prop: 'cardFrontPhotoUrl', label: 'investor.manage.user.details.cardFrontPhotoUrl1' },
            { prop: 'legalCardFrontPhotoUrl', label: 'investor.manage.user.details.legalCardFrontPhotoUrl' },
            { prop: 'legalCardBackPhotoUrl', label: 'investor.manage.user.details.legalCardBackPhotoUrl' },
            { prop: 'otherUrl', label: 'investor.manage.user.details.otherUrl' },
            { prop: 'remark', label: 'investor.manage.user.details.remark' },
        ]
    }
    return []
})

const onCancel = (isRefresh = false) => {
    show.value = false
    refresh.value = isRefresh
}
</script>