<template>
    <app-view class="g-layout">
        <template #header>
            <app-navbar :title="$t('user.authentication.title')" />
        </template>
        <template v-if="userInfo && !loading">
            <CellGroup :title="t('user.authentication.subtitle')" 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('banksign.mobilephone')" :value="userInfo.mobile2" v-if="userInfo.mobile2" />
                <Cell :title="$t('banksign.bankname1')" :value="userInfo.bankbankname" v-if="userInfo.bankbankname" />
                <Cell :title="$t('banksign.bankno')" :value="userInfo.bankaccount" v-if="userInfo.bankaccount" />
                <Cell v-if="userInfo.userinfotype === 1" :title="$t('user.authentication.cardfrontphoto')">
                    <Image fit="contain" :src="getFileUrl(userInfo.cardfrontphotourl)" width="100" height="100" />
                </Cell>
                <Cell v-if="userInfo.userinfotype === 2" :title="$t('user.authentication.cardfrontphoto1')">
                    <Image fit="contain" :src="getFileUrl(userInfo.cardfrontphotourl)" width="100" height="100" />
                </Cell>
                <Cell :title="$t('user.authentication.cardbackphoto')"
                    v-if="showCardBackPhoto && userInfo.userinfotype === 1">
                    <Image fit="contain" :src="getFileUrl(userInfo.cardbackphotourl)" width="100" height="100" />
                </Cell>
                <Cell :title="halfBodyPhotoTitle" v-if="showHalfBodyPhoto && userInfo.userinfotype === 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 class="g-layout-block g-layout-block--inset"
                v-if="userStore.userAccount.hasauth === AuthStatus.Rejected && userStore.userAccount.modifystatus === 1">
                <Button type="primary" round block @click="routerTo('account-certification')">重新认证</Button>
            </div>
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, onActivated, computed } from 'vue'
import { Button, CellGroup, Cell, Image,  showLoadingToast } from 'vant'
import { useNavigation } from '@mobile/router/navigation'
import { AuthStatus, 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 { getWskhOpenAccountConfigs } from '@/services/api/account'
import { i18n, useUserStore } from '@/stores'

const { routerTo } = useNavigation()

const { t } = i18n.global
const userStore = useUserStore()
const showHalfBodyPhoto = shallowRef(false)
const showCardBackPhoto = shallowRef(false)
const halfBodyPhotoTitle = shallowRef('')

const toast = showLoadingToast({ duration: 0 })

// 查询实名认证信息
const { data, loading, run } = useRequest(queryWrDraftUserInfo, {
    manual: true,
    onSuccess: (res) => {
        data.value = res.data[0]
    },
    onFinally: () => {
        userStore.getUserData().finally(() => {
            toast.close()
        })
    }
})

const userInfo = computed(() => data.value ?? userStore.userInfo)

// 获取网上开户配置
useRequest(getWskhOpenAccountConfigs, {
    defaultParams: {
        configs: '53,54,78'
    },
    onSuccess: (res) => {
        const configMap = new Map(res.data.map((item) => [item.configid, item.configvalue]))

        /// 是否显示半身照和 证件背面照
        showCardBackPhoto.value = configMap.get(53) === '1'
        showHalfBodyPhoto.value = configMap.get(54) === '1'
        halfBodyPhotoTitle.value = configMap.get(78) ?? t('user.authentication.halfbodyphoto')
    }
})

onActivated(() => {
    toast.open({ message: '加载中...' })
    run()
})
</script>