<!-- 会员机构管理-机构管理-机构开户申请-详情 -->
<template>
    <app-drawer :title="t('member.institution.open.details.title')" width="900" v-model:show="show" :loading="loading"
        :refresh="refresh">
        <app-table-details :title="t('common.baseinfo')" :data="data" :label-width="160" :cell-props="detailProps1"
            :column="2">
            <!-- 创建时间 -->
            <template #createtime="{ value }">
                {{ formatDate(value) }}
            </template>
        </app-table-details>
        <app-table-details :title="t('member.institution.open.details.subtitle1')" :data="data" :label-width="160"
            :cell-props="detailProps2" :column="2" v-if="isPerson">
            <!-- 证件类型 -->
            <template #cardtype="{ value }">
                {{ certypepersonEnum.getEnumTypeName(value) }}
            </template>
            <!-- 证件照正面 -->
            <template #cardfrontphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" />
            </template>
            <!-- 证件照反面 -->
            <template #cardbackphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" />
            </template>
        </app-table-details>
        <app-table-details :title="t('member.institution.open.details.subtitle2')" :data="data" :label-width="160"
            :cell-props="detailProps3" :column="2" v-else>
            <!-- 企业性质 -->
            <template #biznature="{ value }">
                {{ biznatureEnum.getEnumTypeName(value) }}
            </template>
            <!-- 证件类型 -->
            <template #cardtype="{ value }">
                {{ certypecompanyEnum.getEnumTypeName(value) }}
            </template>
            <!-- 证件照正面 -->
            <template #cardfrontphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" />
            </template>
            <!-- 法人身份证正面 -->
            <template #legalcardfrontphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" />
            </template>
            <!-- 法人身份证反面 -->
            <template #legalcardbackphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" />
            </template>
        </app-table-details>
        <app-table-details :title="t('common.annex')" :data="data" :label-width="160" :cell-props="detailProps4"
            :column="2" />
        <template #footer>
            <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
            <template v-if="data?.userstate === 2">
                <el-button @click="openComponent('Refuse')" type="primary">{{ t('operation.refuse') }}</el-button>
                <el-button @click="openComponent('Agree')" type="primary">{{ t('operation.agree') }}</el-button>
            </template>
        </template>
        <component ref="componentRef" v-bind="{ record }" :is="componentMap.get(componentId)" @closed="closeComponent"
            v-if="componentId" />
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType, defineAsyncComponent } from 'vue'
import { ElMessage } from 'element-plus'
import { formatDate, getFirstPathFullUrl } from '@/filters'
import { decryptAES } from '@/services/crypto'
import { useEnum } from '@/hooks/enum'
import { useComponent } from '@/hooks/component'
import { useRequest } from '@/hooks/request'
import { UserInfoType } from '@/constants/member'
import { queryWskhUserinfoDetail } from '@/services/api/member'
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({
    record: {
        type: Object as PropType<Member.MemberDetail>,
        required: true
    }
})

const componentMap = new Map<string, unknown>([
    ['Agree', defineAsyncComponent(() => import('./agree.vue'))], // 同意
    ['Refuse', defineAsyncComponent(() => import('./refuse.vue'))], // 拒绝
])

const { global: { t } } = i18n
const show = shallowRef(true)
const refresh = shallowRef(false)
const loading = shallowRef(false)
// 是否个人
const isPerson = props.record.userinfotype === UserInfoType.Personal
// 企业性质枚举
const biznatureEnum = useEnum('biznature')
// 个人证件类型
const certypepersonEnum = useEnum('certypeperson')
// 企业证件类型
const certypecompanyEnum = useEnum('certypecompany')

const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => onCancel(true))

const { data } = useRequest(queryWskhUserinfoDetail, {
    params: {
        userId: props.record.userid
    },
    onSuccess: (res) => {
        const { cardfrontphotourl, cardbackphotourl, legalcardfrontphotourl, legalcardbackphotourl, attachment1, attachment2,cardnum } = res.data
        if (data.value) {
            data.value.cardfrontphotourl = getFirstPathFullUrl(cardfrontphotourl)
            data.value.cardbackphotourl = getFirstPathFullUrl(cardbackphotourl)
            data.value.legalcardfrontphotourl = getFirstPathFullUrl(legalcardfrontphotourl)
            data.value.legalcardbackphotourl = getFirstPathFullUrl(legalcardbackphotourl)
            data.value.attachment1 = getFirstPathFullUrl(attachment1)
            data.value.attachment2 = getFirstPathFullUrl(attachment2)

            data.value.cardnum = decryptAES(cardnum)
        }
    },
    onError: (err) => {
        ElMessage.error(err)
    }
})

const detailProps1 = [
    { prop: 'username', label: 'member.institution.open.details.username' },
    { prop: 'userinfotype', label: 'member.institution.open.details.userinfotype' },
    { prop: 'usertype', label: 'member.institution.open.details.usertype' },
    { prop: 'referral', label: 'member.institution.open.details.referral' },
    { prop: 'userstate', label: 'member.institution.open.details.userstate' },
    { prop: 'createtime', label: 'member.institution.open.details.createtime' },
]

const detailProps2 = [
    { prop: 'customername', label: 'member.institution.open.details.customername' },
    { prop: 'company', label: 'member.institution.open.details.company' },
    { prop: 'cardtype', label: 'member.institution.open.details.cardtype' },
    { prop: 'cardnum', label: 'member.institution.open.details.cardnum' },
    { prop: 'cardfrontphotourl', label: 'member.institution.open.details.cardfrontphotourl' },
    { prop: 'cardbackphotourl', label: 'member.institution.open.details.cardbackphotourl' },
    { prop: 'sex', label: 'member.institution.open.details.sex' },
    { prop: 'mobilephone', label: 'member.institution.open.details.mobilephone' },
    { prop: 'telphone', label: 'member.institution.open.details.telphone' },
    { prop: 'address', label: 'member.institution.open.details.address' },
    { prop: 'postalcode', label: 'member.institution.open.details.postalcode' },
    { prop: 'email', label: 'member.institution.open.details.email' },
    { prop: 'remark', label: 'member.institution.open.details.remark' },
]

const detailProps3 = [
    { prop: 'customername', label: 'member.institution.open.details.customername' },
    { prop: 'biznature', label: 'member.institution.open.details.biznature' },
    { prop: 'cardtype', label: 'member.institution.open.details.cardtype' },
    { prop: 'cardnum', label: 'member.institution.open.details.cardnum' },
    { prop: 'cardfrontphotourl', label: 'member.institution.open.details.cardfrontphotourl' },
    { prop: 'legalpersonname', label: 'member.institution.open.details.legalpersonname' },
    { prop: 'legalcardfrontphotourl', label: 'member.institution.open.details.legalcardfrontphotourl' },
    { prop: 'legalcardbackphotourl', label: 'member.institution.open.details.legalcardbackphotourl' },
    { prop: 'contactname', label: 'member.institution.open.details.contactname' },
    { prop: 'sex', label: 'member.institution.open.details.sex' },
    { prop: 'mobilephone', label: 'member.institution.open.details.mobilephone' },
    { prop: 'telphone', label: 'member.institution.open.details.telphone' },
    { prop: 'address', label: 'member.institution.open.details.address' },
    { prop: 'postalcode', label: 'member.institution.open.details.postalcode' },
    { prop: 'email', label: 'member.institution.open.details.email' },
    { prop: 'remark', label: 'member.institution.open.details.remark' },
]

const detailProps4 = [
    { prop: 'attachment1', label: 'member.institution.open.details.attachment1' },
    { prop: 'attachment2', label: 'member.institution.open.details.attachment2' },
]

const onCancel = (isRefresh = false) => {
    show.value = false
    refresh.value = isRefresh
}
</script>