<!-- 交易商管理-交易商管理-交易商管理-详情 -->
<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="g-red" v-if="newData && newData.userAccountDetailVo.accountName !== value">
                    {{ newData.userAccountDetailVo.accountName }}
                </p>
            </template>
            <!-- 所属机构 -->
            <template #parentUserName="{ value }">
                <p>{{ value }}</p>
                <p class="g-red" v-if="newData && newData.userAccountDetailVo.parentUserName !== value">
                    {{ newData.userAccountDetailVo.parentUserName }}
                </p>
            </template>
            <!-- 是否认证 -->
            <template #hasAuth="{ value }">
                <p>{{ hasauthEnum.getEnumTypeName(value) }}</p>
                <p class="g-red" v-if="newData && newData.userAccountDetailVo.hasAuth !== value">
                    {{ hasauthEnum.getEnumTypeName(newData.userAccountDetailVo.hasAuth) }}
                </p>
            </template>
            <!-- 开户方式 -->
            <template #openMode>
                {{ openmodeEnum.getEnumTypeName(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 #legalPersonName="{ value }">
                <p>{{ value }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.legalPersonName !== value">
                    {{ newData.userinfoDetailVo.legalPersonName }}
                </p>
            </template>
            <!-- 企业名称 -->
            <template #customerName="{ value }">
                <p>{{ value }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.customerName !== value">
                    {{ newData.userinfoDetailVo.customerName }}
                </p>
            </template>
            <!-- 企业性质 -->
            <template #bizNature="{ value }">
                <p>{{ value ? biznatureEnum.getEnumTypeName(value) : handleNoneValue() }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.bizNature !== value">
                    {{ value ? biznatureEnum.getEnumTypeName(newData.userinfoDetailVo.bizNature) : handleNoneValue() }}
                </p>
            </template>
            <!-- 证件类型 -->
            <template #cardTypeId="{ value }">
                <p>{{ Number.isFinite(value) ? certificatetypeEnum.getEnumTypeName(value) : handleNoneValue() }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.cardTypeId !== value">
                    {{ Number.isFinite(value) ?
                        certificatetypeEnum.getEnumTypeName(newData.userinfoDetailVo.cardTypeId) : handleNoneValue() }}
                </p>
            </template>
            <!-- 证件号码 -->
            <template #cardNum="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.cardNum !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.cardNum) }}
                </p>
            </template>
            <!-- 公司 -->
            <template #company="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.company !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.company) }}
                </p>
            </template>
            <!-- 联系人 -->
            <template #contactName="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.contactName !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.contactName) }}
                </p>
            </template>
            <!-- 性别 -->
            <template #sex="{ value }">
                <p>{{ sexEnum.getEnumTypeName(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.sex !== value">
                    {{ sexEnum.getEnumTypeName(newData.userinfoDetailVo.sex) }}
                </p>
            </template>
            <!-- 手机号 -->
            <template #mobile="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.mobile !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.mobile) }}
                </p>
            </template>
            <!-- 联系电话 -->
            <template #telPhone="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.telPhone !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.telPhone) }}
                </p>
            </template>
            <!-- 地址 -->
            <template #address="{ value }">
                <p>{{ handleNoneValue(oldData?.userinfoDetailVo.pathName + value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.address !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.pathName + newData.userinfoDetailVo.address) }}
                </p>
            </template>
            <!-- 微信 -->
            <template #wechat="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.wechat !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.wechat) }}
                </p>
            </template>
            <!-- 邮政编码 -->
            <template #postalCode="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.postalCode !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.postalCode) }}
                </p>
            </template>
            <!-- 邮箱 -->
            <template #email="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.email !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.email) }}
                </p>
            </template>
            <!-- 备注 -->
            <template #remark="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.remark !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.remark) }}
                </p>
            </template>
            <!-- 证件照正面 -->
            <template #cardFrontPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
                <template v-if="newData && newData.userinfoDetailVo.cardFrontPhotoUrl !== value">
                    <el-image :src="newData.userinfoDetailVo.cardFrontPhotoUrl" fit="cover" lazy
                        style="width: 128px; height: 72px" v-if="newData.userinfoDetailVo.cardFrontPhotoUrl" />
                    <span v-else>{{ handleNoneValue() }}</span>
                </template>
            </template>
            <!-- 证件照反面 -->
            <template #cardBackPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
                <template v-if="newData && newData.userinfoDetailVo.cardBackPhotoUrl !== value">
                    <el-image :src="newData.userinfoDetailVo.cardBackPhotoUrl" fit="cover" lazy
                        style="width: 128px; height: 72px" v-if="newData.userinfoDetailVo.cardBackPhotoUrl" />
                    <span v-else>{{ handleNoneValue() }}</span>
                </template>
            </template>
            <!-- 手持证件照 -->
            <template #halfBodyPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
                <template v-if="newData && newData.userinfoDetailVo.halfBodyPhotoUrl !== value">
                    <el-image :src="newData.userinfoDetailVo.halfBodyPhotoUrl" fit="cover" lazy
                        style="width: 128px; height: 72px" v-if="newData.userinfoDetailVo.halfBodyPhotoUrl" />
                    <span v-else>{{ handleNoneValue() }}</span>
                </template>
            </template>
            <!-- 法人身份证正面 -->
            <template #legalCardFrontPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
                <template v-if="newData && newData.userinfoDetailVo.legalCardFrontPhotoUrl !== value">
                    <el-image :src="newData.userinfoDetailVo.legalCardFrontPhotoUrl" fit="cover" lazy
                        style="width: 128px; height: 72px" v-if="newData.userinfoDetailVo.legalCardFrontPhotoUrl" />
                    <span v-else>{{ handleNoneValue() }}</span>
                </template>
            </template>
            <!-- 法人身份证反面 -->
            <template #legalCardBackPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
                <template v-if="newData && newData.userinfoDetailVo.legalCardBackPhotoUrl !== value">
                    <el-image :src="newData.userinfoDetailVo.legalCardBackPhotoUrl" fit="cover" lazy
                        style="width: 128px; height: 72px" v-if="newData.userinfoDetailVo.legalCardBackPhotoUrl" />
                    <span v-else>{{ handleNoneValue() }}</span>
                </template>
            </template>
            <!-- 法人授权书 -->
            <template #otherUrl="{ value }">
                <p>
                    <el-link type="primary" :href="value" target="_blank" v-if="value">{{ t('operation.download') }}</el-link>
                    <span v-else>{{ handleNoneValue() }}</span>
                </p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.otherUrl !== value">
                    <el-link type="danger" :href="newData.userinfoDetailVo.otherUrl" target="_blank"
                        v-if="newData.userinfoDetailVo.otherUrl">{{ t('operation.download') }}</el-link>
                    <span v-else>{{ handleNoneValue() }}</span>
                </p>
            </template>
        </app-table-details>
        <template #footer>
            <el-button @click="close(false)">{{ t('operation.close') }}</el-button>
            <slot></slot>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { handleNoneValue, formatDate, getFirstPathFullUrl } from '@/filters'
import { decryptAES } from '@/services/crypto'
import { useEnum } from '@/hooks/enum'
import { UserInfoType } 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 { 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<Investor.InvestorListDetailRsp['newResult']>()
const oldData = ref<Investor.InvestorListDetailRsp['oldResult']>()

// 是否认证
const hasauthEnum = useEnum('hasauth')
// 开户方式
const openmodeEnum = useEnum('openmode')
// 状态
const areastatusEnum = useEnum('areastatus')
// 变更状态
const modifystatusEnum = useEnum('modifystatus')
// 企业性质枚举
const biznatureEnum = useEnum('biznature')
// 证件类型
const certificatetypeEnum = useEnum('certificatetype')
// 性别
const sexEnum = useEnum('Sex')

useRequest(queryInvestorListDetail, {
    params: {
        userid: props.userId,
        modifyFlag: props.modifyStatus
    },
    onSuccess: (res) => {
        const { newResult, oldResult } = res.data

        if (newResult) {
            const detail = newResult.userinfoDetailVo
            detail.cardFrontPhotoUrl = getFirstPathFullUrl(detail.cardFrontPhotoUrl)
            detail.cardBackPhotoUrl = getFirstPathFullUrl(detail.cardBackPhotoUrl)
            detail.halfBodyPhotoUrl = getFirstPathFullUrl(detail.halfBodyPhotoUrl)
            detail.legalCardFrontPhotoUrl = getFirstPathFullUrl(detail.legalCardFrontPhotoUrl)
            detail.legalCardBackPhotoUrl = getFirstPathFullUrl(detail.legalCardBackPhotoUrl)
            detail.otherUrl = getFirstPathFullUrl(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 = getFirstPathFullUrl(detail.cardFrontPhotoUrl)
            detail.cardBackPhotoUrl = getFirstPathFullUrl(detail.cardBackPhotoUrl)
            detail.halfBodyPhotoUrl = getFirstPathFullUrl(detail.halfBodyPhotoUrl)
            detail.legalCardFrontPhotoUrl = getFirstPathFullUrl(detail.legalCardFrontPhotoUrl)
            detail.legalCardBackPhotoUrl = getFirstPathFullUrl(detail.legalCardBackPhotoUrl)
            detail.otherUrl = getFirstPathFullUrl(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: 'hasAuth', label: 'investor.manage.user.details.isAuth' },
    { 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' },
            { prop: 'cardNum', label: 'investor.manage.user.details.cardNum' },
            { prop: 'company', label: 'investor.manage.user.details.company' },
            { prop: 'sex', label: 'investor.manage.user.details.sex' },
            { 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: 'cardTypeId', label: 'investor.manage.user.details.cardTypeId' },
            { prop: 'cardNum', label: 'investor.manage.user.details.cardNum' },
            { prop: 'customerName', label: 'investor.manage.user.details.customerName' },
            { prop: 'bizNature', label: 'investor.manage.user.details.bizNature' },
            { prop: 'legalPersonName', label: 'investor.manage.user.details.legalPersonName' },
            { prop: 'contactName', label: 'investor.manage.user.details.contactName' },
            { prop: 'sex', label: 'investor.manage.user.details.sex' },
            { 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 close = (isRefresh = false) => {
    show.value = false
    refresh.value = isRefresh
}

defineExpose({
    close
})
</script>