<!-- 会员机构管理-机构管理-机构资料管理-详情 -->
<template>
    <app-drawer title="详情" width="900" v-model:show="show" :loading="loading" :refresh="refresh">
        <app-table-details title="基本信息" :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="管理员及账户信息" :data="data?.users" :label-width="160" :cell-props="detailProps3"
            :column="2" />
        <app-table-details title="银行卡信息" :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="附件" :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 } from '@/filters'
import { decryptAES } from '@/services/crypto'
import { useEnum } from '@/hooks/enum'
import { useRequest } from '@/hooks/request'
import { UserInfoType, getGenderName, getUserInfoTypeName } 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 service from '@/services'
import { i18n } from '@/stores'

const props = defineProps({
    record: {
        type: Object as PropType<Model.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 { 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) {
            const baseUrl = service.getConfig('apiUrl')
            const getUrl = (value: string) => value && new URL(value, baseUrl).href

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

const detailProps1: CellProp[] = [
    { prop: 'userid', label: '机构代码' },
    { prop: 'userinfotype', label: '所有者类型', formatValue: () => getUserInfoTypeName(data.value?.userinfo.userinfotype) },
    { prop: 'refereeusername', label: '推荐人', formatValue: () => data.value?.refereeusername },
    { prop: 'accountname', label: '机构名称' },
    { prop: 'usertype', label: '机构类型', formatValue: (val) => usertype2Enum.getEnumTypeName(val) },
    { prop: 'accountstatus', label: '机构状态', formatValue: (val) => areastatusEnum.getEnumTypeName(val) },
    { prop: 'reckonaccountid', label: '资金账户' },
    { prop: 'createtime', label: '创建时间', formatValue: (val) => formatDate(val) },
]

const detailProps2 = computed<CellProp[]>(() => {
    const isPerson = data.value?.userinfo.userinfotype === UserInfoType.Personal
    return [
        { prop: 'customername', label: '名称' },
        { prop: 'company', label: '公司', show: isPerson },
        { prop: 'biznature', label: '企业性质', formatValue: (val) => biznatureEnum.getEnumTypeName(val), show: !isPerson },
        { prop: 'cardtypeid', label: '证件类型', formatValue: (val) => certificatetypeEnum.getEnumTypeName(val) },
        { prop: 'cardnum', label: '证件号码', formatValue: (val) => decryptAES(val) },
        { prop: 'cardfrontphotourl', label: '证件照正面' },
        { prop: 'cardbackphotourl', label: '证件照反面', show: isPerson },
        { prop: 'legalpersonname', label: '法人姓名', show: !isPerson },
        { prop: 'legalcardfrontphotourl', label: '法人身份证正面', show: !isPerson },
        { prop: 'legalcardbackphotourl', label: '法人身份证反面', show: !isPerson },
        { prop: 'contactname', label: '联系人', show: !isPerson },
        { prop: 'sex', label: '性别', formatValue: (val) => getGenderName(val) },
        { prop: 'mobile', label: '手机号', formatValue: (val) => decryptAES(val) },
        { prop: 'telphone', label: '联系电话', formatValue: (val) => decryptAES(val) },
        { prop: 'address', label: '地址', formatValue: (val) => (data.value?.division ?? '') + (val ?? '') },
        { prop: 'postalcode', label: '邮政编码' },
        { prop: 'email', label: '邮箱', formatValue: (val) => decryptAES(val) },
        { prop: 'qq', label: 'QQ' },
        { prop: 'wechat', label: '微信' },
        { prop: 'remark', label: '备注' },
    ]
})

const detailProps3: CellProp[] = [
    { prop: 'logincode', label: '管理员登录帐号' },
    { prop: 'username', label: '管理员名称' },
    { prop: 'managerstatus', label: '帐号状态', formatValue: (val) => userstatusEnum.getEnumTypeName(val) }
]

const detailProps4: CellProp[] = [
    { prop: 'bankname', label: '银行名称' },
    { prop: 'bankaccount', label: '银行账户' },
    { prop: 'bankcardfrontphotourl', label: '银行卡正面' },
]

const detailProps5: CellProp[] = [
    { prop: 'attachment1', label: '附件1' },
    { prop: 'attachment2', label: '附件2' },
]

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