<template>
    <app-view class="g-form">
        <template #header>
            <app-navbar :title="$t('user.authentication.title')" />
        </template>
        <div class="g-form__container" v-if="userInfo">
            <CellGroup inset>
                <Cell :title="$t('user.authentication.customername')" :value="userInfo.customername" />
                <Cell :title="$t('user.authentication.cardtype')"
                    :value="getCertificateTypeCodeName(userInfo.cardtypeid)" />
                <Cell :title="$t('user.authentication.cardnum')" :value="userInfo.cardnum" />
                <Cell :title="$t('user.authentication.cardfrontphoto')">
                    <Image fit="contain" :src="getFileUrl(userInfo.cardfrontphotourl)" width="100" height="100" />
                </Cell>
                <Cell :title="$t('user.authentication.cardbackphoto')" v-if="showCardBackPhoto === '1'">
                    <Image fit="contain" :src="getFileUrl(userInfo.cardbackphotourl)" width="100" height="100" />
                </Cell>
                <Cell :title="halfBodyPhotoTitle" v-if="showHalfBodyPhoto === '1'">
                    <Image fit="contain" :src="getFileUrl(userInfo.halfbodyphotourl)" width="100" height="100" />
                </Cell>
                <Cell :title="$t('user.authentication.authstatus')"
                    :value="getAuthStatusName(userStore.userAccount.hasauth)" />
            </CellGroup>
        </div>
        <Empty :description="$t('common.nodatas')" v-else />
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { CellGroup, Cell, Image, Empty } from 'vant'
import { getAuthStatusName } from '@/constants/account'
import { queryWrDraftUserInfo } from '@/services/api/account'
import { useRequest } from '@/hooks/request'
import { getCertificateTypeCodeName } from '@/constants/account'
import { getFileUrl } from '@/filters'
import { decryptAES } from '@/services/websocket/package/crypto'
import { getWskhOpenAccountConfigs } from '@/services/api/account'
import { i18n, useUserStore } from "@/stores"

const { t } = i18n.global
const userStore = useUserStore()
const userInfo = shallowRef<Model.UserInfo>()
const showHalfBodyPhoto = shallowRef('0')
const showCardBackPhoto = shallowRef('0')
const halfBodyPhotoTitle = shallowRef(t('user.authentication.halfbodyphoto'))

/// 查询托管银行信息
useRequest(queryWrDraftUserInfo, {
    onSuccess: (res) => {
        /// 签约状态
        userInfo.value = res.data[0] ?? {
            ...userStore.userInfo,
            cardnum: decryptAES(userStore.userInfo.cardnum)
        }
    }
})

// 获取网上开户配置
useRequest(getWskhOpenAccountConfigs, {
    params: {
        configs: '53,54,78'
    },
    onSuccess: (res) => {
        /// 是否显示半身照和 证件背面照
        showCardBackPhoto.value = res.data.filter(e => e.configid === 53)[0].configvalue ?? '0'
        showHalfBodyPhoto.value = res.data.filter(e => e.configid === 54)[0].configvalue ?? '0'
        halfBodyPhotoTitle.value = res.data.filter(e => e.configid === 78)[0].configvalue ?? t('user.authentication.halfbodyphoto')
    }
})

</script>