<!-- 会员机构管理-机构管理-机构资料管理-详情 -->
<template>
    <app-drawer :title="t('member.institution.user.details.title')" width="900" v-model:show="show" :loading="loading"
        :refresh="refresh">
        <app-table-details :title="t('member.institution.user.details.subtitle1')" :data="data?.rspResult"
            :label-width="160" :cell-props="detailProps1" :column="2" />
        <app-table-details :title="t('member.institution.open.details.subtitle1')" :data="data?.userinfo"
            :label-width="160" :cell-props="detailProps2" :column="2">
            <!-- 证件照正面 -->
            <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>
            <!-- 法人身份证正面 -->
            <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('member.institution.user.details.subtitle2')" :data="data?.users"
            :label-width="160" :cell-props="detailProps3" :column="2" />
        <app-table-details :title="t('member.institution.user.details.subtitle3')" :data="data?.userinfo"
            :label-width="160" :cell-props="detailProps4" :column="2" v-if="data?.userinfo.bankid">
            <!-- 银行卡正面 -->
            <template #bankcardfrontphotourl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" />
            </template>
        </app-table-details>
        <app-table-details :title="t('member.institution.user.details.subtitle4')" :data="data?.userinfo"
            :label-width="160" :cell-props="detailProps5" :column="2"
            v-if="data?.userinfo.attachment1 || data?.userinfo.attachment2" />
        <template #footer>
            <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { formatDate, getFirstPathFullUrl } from '@/filters'
import { decryptAES } from '@/services/crypto'
import { useEnum } from '@/hooks/enum'
import { useRequest } from '@/hooks/request'
import { UserInfoType } from '@/constants/member'
import { CellProp } from '@pc/components/base/table-details/types'
import { queryOrganDetail } 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.OrganDetailListRsp>,
        required: true
    }
})

const { global: { t } } = i18n
const show = shallowRef(true)
const refresh = shallowRef(false)
const loading = shallowRef(false)

// 机构状态
const areastatusEnum = useEnum('areastatus')
// 机构类型
const usertype2Enum = useEnum('usertype2')
// 企业性质枚举
const biznatureEnum = useEnum('biznature')
// 证件类型
const certificatetypeEnum = useEnum('certificatetype')
// 帐号状态
const userstatusEnum = useEnum('userstatus')
// 所有者类型
const userinfotypeEnum = useEnum('userinfotype')
// 性别
const sexEnum = useEnum('Sex')

const { data } = useRequest(queryOrganDetail, {
    params: {
        areaId: props.record.userid
    },
    onSuccess: (res) => {
        const { cardfrontphotourl, cardbackphotourl, legalcardfrontphotourl, legalcardbackphotourl, attachment1, attachment2 } = res.data.userinfo
        const userInfo = data.value?.userinfo

        if (userInfo) {
            userInfo.cardfrontphotourl = getFirstPathFullUrl(cardfrontphotourl)
            userInfo.cardbackphotourl = getFirstPathFullUrl(cardbackphotourl)
            userInfo.legalcardfrontphotourl = getFirstPathFullUrl(legalcardfrontphotourl)
            userInfo.legalcardbackphotourl = getFirstPathFullUrl(legalcardbackphotourl)
            userInfo.attachment1 = getFirstPathFullUrl(attachment1)
            userInfo.attachment2 = getFirstPathFullUrl(attachment2)
        }
    },
    onError: (err) => {
        ElMessage.error(err)
    }
})

const detailProps1: CellProp[] = [
    { prop: 'userid', label: 'member.institution.user.details.userid' },
    { prop: 'userinfotype', label: 'member.institution.user.details.userinfotype', formatValue: () => userinfotypeEnum.getEnumTypeName(data.value?.userinfo.userinfotype) },
    { prop: 'refereeusername', label: 'member.institution.user.details.refereeusername', formatValue: () => data.value?.refereeusername },
    { prop: 'accountname', label: 'member.institution.user.details.accountname' },
    { prop: 'usertype', label: 'member.institution.user.details.usertype', formatValue: (val) => usertype2Enum.getEnumTypeName(val) },
    { prop: 'accountstatus', label: 'member.institution.user.details.accountstatus', formatValue: (val) => areastatusEnum.getEnumTypeName(val) },
    { prop: 'reckonaccountid', label: 'member.institution.user.details.reckonaccountid' },
    { prop: 'createtime', label: 'member.institution.user.details.createtime', formatValue: (val) => formatDate(val) },
]

const detailProps2 = computed<CellProp[]>(() => {
    const isPerson = data.value?.userinfo.userinfotype === UserInfoType.Personal
    return [
        { prop: 'customername', label: 'member.institution.user.details.customername' },
        { prop: 'company', label: 'member.institution.user.details.company', show: isPerson },
        { prop: 'biznature', label: 'member.institution.user.details.biznature', formatValue: (val) => biznatureEnum.getEnumTypeName(val), show: !isPerson },
        { prop: 'cardtypeid', label: 'member.institution.user.details.cardtypeid', formatValue: (val) => certificatetypeEnum.getEnumTypeName(val) },
        { prop: 'cardnum', label: 'member.institution.user.details.cardnum', formatValue: (val) => decryptAES(val) },
        { prop: 'cardfrontphotourl', label: 'member.institution.user.details.cardfrontphotourl' },
        { prop: 'cardbackphotourl', label: 'member.institution.user.details.cardbackphotourl', show: isPerson },
        { prop: 'legalpersonname', label: 'member.institution.user.details.legalpersonname', show: !isPerson },
        { prop: 'legalcardfrontphotourl', label: 'member.institution.user.details.legalcardfrontphotourl', show: !isPerson },
        { prop: 'legalcardbackphotourl', label: 'member.institution.user.details.legalcardbackphotourl', show: !isPerson },
        { prop: 'contactname', label: 'member.institution.user.details.contactname', show: !isPerson },
        { prop: 'sex', label: 'member.institution.user.details.sex', formatValue: (val) => sexEnum.getEnumTypeName(val) },
        { prop: 'mobile', label: 'member.institution.user.details.mobile', formatValue: (val) => decryptAES(val) },
        { prop: 'telphone', label: 'member.institution.user.details.telphone', formatValue: (val) => decryptAES(val) },
        { prop: 'address', label: 'member.institution.user.details.address', formatValue: (val) => (data.value?.division ?? '') + (val ?? '') },
        { prop: 'postalcode', label: 'member.institution.user.details.postalcode' },
        { prop: 'email', label: 'member.institution.user.details.email', formatValue: (val) => decryptAES(val) },
        { prop: 'qq', label: 'member.institution.user.details.qq' },
        { prop: 'wechat', label: 'member.institution.user.details.wechat' },
        { prop: 'remark', label: 'member.institution.user.details.remark' },
    ]
})

const detailProps3: CellProp[] = [
    { prop: 'logincode', label: 'member.institution.user.details.logincode' },
    { prop: 'username', label: 'member.institution.user.details.username' },
    { prop: 'managerstatus', label: 'member.institution.user.details.managerstatus', formatValue: (val) => userstatusEnum.getEnumTypeName(val) }
]

const detailProps4: CellProp[] = [
    { prop: 'bankname', label: 'member.institution.user.details.bankname' },
    { prop: 'bankaccount', label: 'member.institution.user.details.bankaccount' },
    { prop: 'bankcardfrontphotourl', label: 'member.institution.user.details.bankcardfrontphotourl' },
]

const detailProps5: CellProp[] = [
    { prop: 'attachment1', label: 'member.institution.user.details.attachment1' },
    { prop: 'attachment2', label: 'member.institution.user.details.attachment2' },
]

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