<template>
    <app-view class="g-form">
        <template #header>
            <app-navbar title="实名认证" />
        </template>
        <div class="g-form__container" v-if="userInfo">
            <CellGroup inset>
                <Cell title="姓名" :value="userInfo.customername" />
                <Cell title="证件类型" :value="getCertificateTypeCodeName(userInfo.cardtypeid)" />
                <Cell title="证件号码" :value="userInfo.cardnum" />
                <Cell title="证件正面照片">
                    <Image fit="contain" :src="getFileUrl(userInfo.cardfrontphotourl)" width="100" height="100" />
                </Cell>
                <Cell title="证件反面照片" v-if="showCardBackPhoto === '1'">
                    <Image fit="contain" :src="getFileUrl(userInfo.cardbackphotourl)" width="100" height="100" />
                </Cell>
                <Cell title="手持证件照" v-if="showHalfBodyPhoto === '1'">
                    <Image fit="contain" :src="getFileUrl(userInfo.halfbodyphotourl)" width="100" height="100" />
                </Cell>
                <Cell title="实名状态" :value="getAuthStatusName(2)" />
            </CellGroup>
        </div>
        <Empty description="暂无数据" 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 { getWskhOpenAccountConfigs } from '@/services/api/account'

const userInfo = shallowRef<Model.UserInfo>()
const showHalfBodyPhoto = shallowRef('0')
const showCardBackPhoto = shallowRef('0')

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

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

</script>