<!-- 交易商管理-开户管理-交易商开户-详情 -->
<template>
    <app-drawer :title="t('investor.user.open.details.title')" width="900" v-model:show="state.show"
        :refresh="state.refresh">
        <app-table-details :data="data" :label-width="140" :cell-props="detailProps" :column="2">
            <!-- 证件照正面 -->
            <template #cardfrontphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
            </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>
            <!-- 手持证件照 -->
            <template #halfbodyphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
            </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>
            <!-- 法人身份证反面 -->
            <template #legalcardbackphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
            </template>
            <!-- 法人授权书 -->
            <template #otherurl="{ value }">
                <el-link type="primary" :href="value" target="_blank" v-if="value">{{ t('operation.download') }}</el-link>
                <span v-else>{{ handleNoneValue() }}</span>
            </template>
            <!-- 银行卡正面 -->
            <template #bankcardfrontphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
            </template>
        </app-table-details>
        <template #footer>
            <el-button @click="state.show = false">{{ t('operation.close') }}</el-button>
            <template
                v-if="audit && (userStore.userInfo.releType === 1 || (userStore.userInfo.releType === 2 && [2, 4].includes(record.userState)))">
                <el-button type="primary" @click="openAduitDialog(1)">
                    {{ t('investor.user.open.details.aduit') }}
                </el-button>
                <el-button type="primary" @click="openAduitDialog(0)">
                    {{ t('investor.user.open.details.unaduit') }}
                </el-button>
            </template>
        </template>
        <AduitDialog v-model="state.dialogVisible" v-bind="{ record, auditflag: state.auditflag }" @closed="onCancel"
            v-if="audit" />
    </app-drawer>
</template>

<script lang="ts" setup>
import { reactive, PropType, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getFirstPathFullUrl, handleNoneValue } from '@/filters'
import { decryptAES } from '@/services/crypto'
import { UserInfoType } from '@/constants/member'
import { useEnum } from '@/hooks/enum'
import { useRequest } from '@/hooks/request'
import { queryInvestorDetail } from '@/services/api/investor'
import { CellProp } from '@pc/components/base/table-details/types'
import { useUserStore, i18n } from '@/stores'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppTableDetails from '@pc/components/base/table-details/index.vue'
import AduitDialog from './aduit/index.vue'

const props = defineProps({
    record: {
        type: Object as PropType<Investor.InvestorRsp>,
        required: true
    },
    audit: Boolean
})

const { global: { t } } = i18n
const userStore = useUserStore()
const state = reactive({
    show: true,
    refresh: false,
    dialogVisible: false,
    auditflag: 0
})


const certificatetypeEnum = useEnum('certificatetype') // 证件类型
const userstateEnum = useEnum('investorOpenStatus') // 开户状态
const sexEnum = useEnum('Sex') // 性别
const userinfotypeEnum = useEnum('userinfotype') // 所有者类型

const { data } = useRequest(queryInvestorDetail, {
    params: {
        userId: props.record.userId,
    },
    onSuccess: () => {
        if (data.value) {
            data.value.cardfrontphotourl = getFirstPathFullUrl(data.value.cardfrontphotourl)
            data.value.cardbackphotourl = getFirstPathFullUrl(data.value.cardbackphotourl)
            data.value.halfbodyphotourl = getFirstPathFullUrl(data.value.halfbodyphotourl)
            data.value.legalcardfrontphotourl = getFirstPathFullUrl(data.value.legalcardfrontphotourl)
            data.value.legalcardbackphotourl = getFirstPathFullUrl(data.value.legalcardbackphotourl)
            data.value.otherurl = getFirstPathFullUrl(data.value.otherurl)
        }
    },
    onError: (err) => {
        ElMessage.error(err)
    }
})

const detailProps = computed(() => {
    const isPerson = data.value?.userinfotype === UserInfoType.Personal
    const result: CellProp[] = [
        { prop: 'username', formatLabel: () => isPerson ? 'investor.user.open.details.username' : 'investor.user.open.details.username1' },
        { prop: 'userinfotype', label: 'investor.user.open.details.userinfotype', formatValue: (val) => userinfotypeEnum.getEnumTypeName(val) },
        { prop: 'cardtype', label: 'investor.user.open.details.cardtype', formatValue: (val) => certificatetypeEnum.getEnumTypeName(val) },
        { prop: 'cardnum', label: 'investor.user.open.details.cardnum', formatValue: (val) => decryptAES(val) },
        { prop: 'pathname', label: 'investor.user.open.details.pathname' },
        { prop: 'legalpersonname', label: 'investor.user.open.details.legalpersonname', show: !isPerson },
        { prop: 'contactname', label: 'investor.user.open.details.contactname', show: !isPerson },
        { prop: 'sex', label: 'investor.user.open.details.sex', formatValue: (val) => sexEnum.getEnumTypeName(val) },
        { prop: 'mobilephone', label: 'investor.user.open.details.mobilephone', formatValue: (val) => decryptAES(val) },
        { prop: 'postalcode', label: 'investor.user.open.details.postalcode' },
        { prop: 'wechat', label: 'investor.user.open.details.wechat', formatValue: (val) => decryptAES(val) },
        { prop: 'telphone', label: 'investor.user.open.details.telphone', formatValue: (val) => decryptAES(val) },
        { prop: 'email', label: 'investor.user.open.details.email', formatValue: (val) => decryptAES(val) },
        { prop: 'company', label: 'investor.user.open.details.company', show: isPerson },
        { prop: 'memberusername', label: 'investor.user.open.details.memberusername' },
        { prop: 'areaname', label: 'investor.user.open.details.areaname' },
        { prop: 'brokername', label: 'investor.user.open.details.brokername' },
        { prop: 'referralname', label: 'investor.user.open.details.referralname' },
        { prop: 'cardfrontphotourl', formatLabel: () => isPerson ? 'investor.user.open.details.cardfrontphotourl' : 'investor.user.open.details.cardfrontphotourl1' },
        { prop: 'cardbackphotourl', label: 'investor.user.open.details.cardbackphotourl', show: !!data.value?.cardbackphotourl },
        { prop: 'halfbodyphotourl', label: 'investor.user.open.details.halfbodyphotourl', show: !!data.value?.halfbodyphotourl },
        { prop: 'legalcardfrontphotourl', label: 'investor.user.open.details.legalcardfrontphotourl', show: !isPerson },
        { prop: 'legalcardbackphotourl', label: 'investor.user.open.details.legalcardbackphotourl', show: !isPerson },
        { prop: 'otherurl', label: 'investor.user.open.details.otherurl', show: !isPerson },
        { prop: 'userstate', label: 'investor.user.open.details.userstate', formatValue: (val) => userstateEnum.getEnumTypeName(val) },
        { prop: 'remark', label: 'investor.user.open.details.remark' },
    ]
    if (data.value?.bankid) {
        result.push(
            { prop: 'bankname', label: 'investor.user.open.details.bankname' },
            { prop: 'bankaccount', label: 'investor.user.open.details.bankaccount' },
            { prop: 'bankcardfrontphotourl', label: 'investor.user.open.details.bankcardfrontphotourl' },
        )
    }
    return result
})

const openAduitDialog = (value: number) => {
    state.auditflag = value
    state.dialogVisible = true
}

const onCancel = (refresh: boolean) => {
    if (refresh) {
        state.show = false
        state.refresh = true
    }
}
</script>