<!-- 会员机构管理-子机构管理-子机构管理-详情 -->
<template>
    <app-drawer :title="t('member.subinstitution.manage.details.title')" width="900" v-model:show="show"
        :loading="loading" :refresh="refresh">
        <app-table-details :title="t('common.baseinfo')" :data="oldData?.userAccountDetailVo" :label-width="160"
            :cell-props="detailProps1" :column="2">
            <!-- 机构名称 -->
            <template #accountName="{ value }">
                <p>{{ value }}</p>
                <p class="g-red" v-if="newData && newData.userAccountDetailVo.accountName !== value">
                    {{ newData.userAccountDetailVo.accountName }}
                </p>
            </template>
        </app-table-details>
        <app-table-details
            :title="oldData?.userinfoDetailVo.userinfoType === UserInfoType.Personal ? t('member.subinstitution.manage.details.subtitle1') : t('member.subinstitution.manage.details.subtitle2')"
            :data="oldData?.userinfoDetailVo" :label-width="160" :cell-props="detailProps2" :column="2"
            v-if="detailProps2.length">
            <!-- 名称 -->
            <template #customerName="{ value }">
                <p>{{ value }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.customerName !== value">
                    {{ newData.userinfoDetailVo.customerName }}
                </p>
            </template>
            <!-- 公司 -->
            <template #company="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.company !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.company) }}
                </p>
            </template>
            <!-- 企业性质 -->
            <template #bizNature="{ value }">
                <p>{{ value ? biznatureEnum.getEnumTypeName(value) : handleNoneValue() }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.bizNature !== value">
                    {{ value ? biznatureEnum.getEnumTypeName(newData.userinfoDetailVo.bizNature) : handleNoneValue() }}
                </p>
            </template>
            <!-- 证件类型 -->
            <template #cardTypeId="{ value }">
                <p>{{ Number.isFinite(value) ? certificatetypeEnum.getEnumTypeName(value) : handleNoneValue() }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.cardTypeId !== value">
                    {{ Number.isFinite(value) ?
                        certificatetypeEnum.getEnumTypeName(newData.userinfoDetailVo.cardTypeId) : handleNoneValue() }}
                </p>
            </template>
            <!-- 证件号码 -->
            <template #cardNum="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.cardNum !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.cardNum) }}
                </p>
            </template>
            <!-- 联系人 -->
            <template #contactName="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.contactName !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.contactName) }}
                </p>
            </template>
            <!-- 性别 -->
            <template #sex="{ value }">
                <p>{{ sexEnum.getEnumTypeName(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.sex !== value">
                    {{ sexEnum.getEnumTypeName(newData.userinfoDetailVo.sex) }}
                </p>
            </template>
            <!-- 手机号 -->
            <template #mobile="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.mobile !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.mobile) }}
                </p>
            </template>
            <!-- 联系电话 -->
            <template #telPhone="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.telPhone !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.mobile) }}
                </p>
            </template>
            <!-- 地址 -->
            <template #address="{ value }">
                <p>{{ handleNoneValue(oldData?.userinfoDetailVo.pathName + value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.address !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.pathName + newData.userinfoDetailVo.address) }}
                </p>
            </template>
            <!-- 邮政编码 -->
            <template #postalCode="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.postalCode !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.postalCode) }}
                </p>
            </template>
            <!-- 邮箱 -->
            <template #email="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.email !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.email) }}
                </p>
            </template>
            <!-- 备注 -->
            <template #remark="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.remark !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.remark) }}
                </p>
            </template>
            <!-- 证件照正面 -->
            <template #cardFrontPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
                <template v-if="newData && newData.userinfoDetailVo.cardFrontPhotoUrl !== value">
                    <el-image :src="newData.userinfoDetailVo.cardFrontPhotoUrl" fit="cover" lazy
                        style="width: 128px; height: 72px" v-if="newData.userinfoDetailVo.cardFrontPhotoUrl" />
                    <span v-else>{{ handleNoneValue() }}</span>
                </template>
            </template>
            <!-- 证件照反面 -->
            <template #cardBackPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
                <template v-if="newData && newData.userinfoDetailVo.cardBackPhotoUrl !== value">
                    <el-image :src="newData.userinfoDetailVo.cardBackPhotoUrl" fit="cover" lazy
                        style="width: 128px; height: 72px" v-if="newData.userinfoDetailVo.cardBackPhotoUrl" />
                    <span v-else>{{ handleNoneValue() }}</span>
                </template>
            </template>
            <!-- 手持证件照 -->
            <template #halfBodyPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
                <template v-if="newData && newData.userinfoDetailVo.halfBodyPhotoUrl !== value">
                    <el-image :src="newData.userinfoDetailVo.halfBodyPhotoUrl" fit="cover" lazy
                        style="width: 128px; height: 72px" v-if="newData.userinfoDetailVo.halfBodyPhotoUrl" />
                    <span v-else>{{ handleNoneValue() }}</span>
                </template>
            </template>
            <!-- 法人身份证正面 -->
            <template #legalCardFrontPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
                <template v-if="newData && newData.userinfoDetailVo.legalCardFrontPhotoUrl !== value">
                    <el-image :src="newData.userinfoDetailVo.legalCardFrontPhotoUrl" fit="cover" lazy
                        style="width: 128px; height: 72px" v-if="newData.userinfoDetailVo.legalCardFrontPhotoUrl" />
                    <span v-else>{{ handleNoneValue() }}</span>
                </template>
            </template>
            <!-- 法人身份证反面 -->
            <template #legalCardBackPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
                <template v-if="newData && newData.userinfoDetailVo.legalCardBackPhotoUrl !== value">
                    <el-image :src="newData.userinfoDetailVo.legalCardBackPhotoUrl" fit="cover" lazy
                        style="width: 128px; height: 72px" v-if="newData.userinfoDetailVo.legalCardBackPhotoUrl" />
                    <span v-else>{{ handleNoneValue() }}</span>
                </template>
            </template>
        </app-table-details>
        <app-table-details :title="t('member.subinstitution.manage.details.subtitle3')"
            :data="oldData?.userinfoDetailVo" :label-width="160" :cell-props="detailProps3" :column="2"
            v-if="detailProps3.length">
            <!-- 银行名称 -->
            <template #bankName="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.bankName !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.bankName) }}
                </p>
            </template>
            <!-- 银行账户 -->
            <template #bankAccount="{ value }">
                <p>{{ handleNoneValue(value) }}</p>
                <p class="g-red" v-if="newData && newData.userinfoDetailVo.bankAccount !== value">
                    {{ handleNoneValue(newData.userinfoDetailVo.bankAccount) }}
                </p>
            </template>
            <!-- 银行卡正面 -->
            <template #bankCardFrontPhotoUrl="{ value }">
                <el-image :src="value" fit="cover" lazy style="width: 128px; height: 72px" v-if="value" />
                <span v-else>{{ handleNoneValue() }}</span>
                <template v-if="newData && newData.userinfoDetailVo.bankCardFrontPhotoUrl !== value">
                    <el-image :src="newData.userinfoDetailVo.bankCardFrontPhotoUrl" fit="cover" lazy
                        style="width: 128px; height: 72px" v-if="newData.userinfoDetailVo.bankCardFrontPhotoUrl" />
                    <span v-else>{{ handleNoneValue() }}</span>
                </template>
            </template>
        </app-table-details>
        <app-table-details :title="t('common.annex')" :data="oldData?.userinfoDetailVo" :label-width="160"
            :cell-props="detailProps4" :column="2" v-if="detailProps4.length" />
        <app-table-details :title="t('member.subinstitution.manage.details.subtitle4')" :data="data" :label-width="160"
            :cell-props="detailProps5" :column="2" v-if="detailProps5.length" />
        <template #footer>
            <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
            <el-button @click="openComponent('Audit')" type="primary" v-if="audit">审核</el-button>
        </template>
        <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ record }" @closed="closeComponent"
            v-if="componentId" />
    </app-drawer>
</template>

<script lang="ts" setup>
import { ref, PropType, computed, defineAsyncComponent } from 'vue'
import { handleNoneValue, getFirstPathFullUrl } from '@/filters'
import { decryptAES } from '@/services/crypto'
import { useEnum } from '@/hooks/enum'
import { useComponent } from '@/hooks/component'
import { UserInfoType } from '@/constants/member'
import { useRequest } from '@/hooks/request'
import { organSonViewson } from '@/services/api/member'
import { CellProp } from '@pc/components/base/table-details/types'
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({
    selectedParent: {
        type: Object as PropType<Member.AreaAndAllChildsRsp>
    },
    record: {
        type: Object as PropType<Member.OrganSonRsp>
    },
    audit: Boolean
})

const componentMap = new Map<string, unknown>([
    ['Audit', defineAsyncComponent(() => import('./audit/index.vue'))], // 审核
])

const { global: { t } } = i18n
const show = ref(true)
const refresh = ref(false)
const loading = ref(false)
const newData = ref<Member.OrganSonViewsonRsp['newResult']>()
const oldData = ref<Member.OrganSonViewsonRsp['oldResult']>()

// 机构状态
const areastatusEnum = useEnum('areastatus')
// 机构类型
const usertype2Enum = useEnum('usertype2')
// 企业性质枚举
const biznatureEnum = useEnum('biznature')
// 证件类型
const certificatetypeEnum = useEnum('certificatetype')
// 用户状态
const userstatusEnum = useEnum('userstatus')
// 性别
const sexEnum = useEnum('Sex')

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

const { data } = useRequest(organSonViewson, {
    params: {
        areaid: props.record?.userid || props.selectedParent?.userid || 0,
        modifystatus: props.record?.modifystatus
    },
    onSuccess: (res) => {
        const { newResult, oldResult } = res.data

        if (newResult?.userinfoDetailVo) {
            const detail = newResult.userinfoDetailVo
            detail.cardFrontPhotoUrl = getFirstPathFullUrl(detail.cardFrontPhotoUrl)
            detail.cardBackPhotoUrl = getFirstPathFullUrl(detail.cardBackPhotoUrl)
            detail.halfBodyPhotoUrl = getFirstPathFullUrl(detail.halfBodyPhotoUrl)
            detail.legalCardFrontPhotoUrl = getFirstPathFullUrl(detail.legalCardFrontPhotoUrl)
            detail.legalCardBackPhotoUrl = getFirstPathFullUrl(detail.legalCardBackPhotoUrl)
            detail.otherUrl = getFirstPathFullUrl(detail.otherUrl)

            detail.cardNum = decryptAES(detail.cardNum)
            detail.mobile = decryptAES(detail.mobile)
            detail.telPhone = decryptAES(detail.telPhone)
            detail.wechat = decryptAES(detail.wechat)
            detail.email = decryptAES(detail.email)

            newData.value = newResult
        }
        if (oldResult?.userinfoDetailVo) {
            const detail = oldResult.userinfoDetailVo
            detail.cardFrontPhotoUrl = getFirstPathFullUrl(detail.cardFrontPhotoUrl)
            detail.cardBackPhotoUrl = getFirstPathFullUrl(detail.cardBackPhotoUrl)
            detail.halfBodyPhotoUrl = getFirstPathFullUrl(detail.halfBodyPhotoUrl)
            detail.legalCardFrontPhotoUrl = getFirstPathFullUrl(detail.legalCardFrontPhotoUrl)
            detail.legalCardBackPhotoUrl = getFirstPathFullUrl(detail.legalCardBackPhotoUrl)
            detail.otherUrl = getFirstPathFullUrl(detail.otherUrl)

            detail.cardNum = decryptAES(detail.cardNum)
            detail.mobile = decryptAES(detail.mobile)
            detail.telPhone = decryptAES(detail.telPhone)
            detail.wechat = decryptAES(detail.wechat)
            detail.email = decryptAES(detail.email)

            oldData.value = oldResult
        }
    }
})

const detailProps1: CellProp[] = [
    { prop: 'userId', label: 'member.subinstitution.manage.details.userId' },
    { prop: 'accountName', label: 'member.subinstitution.manage.details.accountName' },
    { prop: 'usertype', label: 'member.subinstitution.manage.details.usertype', formatValue: (val) => usertype2Enum.getEnumTypeName(val) },
    { prop: 'accountStatus', label: 'member.subinstitution.manage.details.accountStatus', formatValue: (val) => areastatusEnum.getEnumTypeName(val) },
    { prop: 'auditAccountName', label: 'member.subinstitution.manage.details.auditAccountName' },
    { prop: 'auditremark', label: 'member.subinstitution.manage.details.auditremark' },
]

const detailProps2 = computed<CellProp[]>(() => {
    const type = oldData.value?.userinfoDetailVo.userinfoType
    if (type === UserInfoType.Personal) {
        return [
            { prop: 'customerName', label: 'member.subinstitution.manage.details.customerName' },
            { prop: 'company', label: 'member.subinstitution.manage.details.company' },
            { prop: 'cardTypeId', label: 'member.subinstitution.manage.details.cardTypeId' },
            { prop: 'cardNum', label: 'member.subinstitution.manage.details.cardNum' },
            { prop: 'contactName', label: 'member.subinstitution.manage.details.contactName' },
            { prop: 'sex', label: 'member.subinstitution.manage.details.sex' },
            { prop: 'cardFrontPhotoUrl', label: 'member.subinstitution.manage.details.cardFrontPhotoUrl' },
            { prop: 'cardBackPhotoUrl', label: 'member.subinstitution.manage.details.cardBackPhotoUrl', show: !!newData.value?.userinfoDetailVo.cardBackPhotoUrl || !!oldData.value?.userinfoDetailVo.cardBackPhotoUrl },
            { prop: 'halfBodyPhotoUrl', label: 'member.subinstitution.manage.details.halfBodyPhotoUrl', show: !!newData.value?.userinfoDetailVo.halfBodyPhotoUrl || !!oldData.value?.userinfoDetailVo.halfBodyPhotoUrl },
            { prop: 'mobile', label: 'member.subinstitution.manage.details.mobile' },
            { prop: 'telPhone', label: 'member.subinstitution.manage.details.telPhone' },
            { prop: 'address', label: 'member.subinstitution.manage.details.address' },
            { prop: 'postalCode', label: 'member.subinstitution.manage.details.postalCode' },
            { prop: 'email', label: 'member.subinstitution.manage.details.email' },
            { prop: 'remark', label: 'member.subinstitution.manage.details.remark' },
        ]
    }
    if (type === UserInfoType.Company) {
        return [
            { prop: 'customerName', label: 'member.subinstitution.manage.details.customerName' },
            { prop: 'bizNature', label: 'member.subinstitution.manage.details.bizNature' },
            { prop: 'cardTypeId', label: 'member.subinstitution.manage.details.cardTypeId' },
            { prop: 'cardNum', label: 'member.subinstitution.manage.details.cardNum' },
            { prop: 'contactName', label: 'member.subinstitution.manage.details.contactName' },
            { prop: 'sex', label: 'member.subinstitution.manage.details.sex' },
            { prop: 'cardFrontPhotoUrl', label: 'member.subinstitution.manage.details.cardFrontPhotoUrl1' },
            { prop: 'legalPersonName', label: 'member.subinstitution.manage.details.legalPersonName' },
            { prop: 'legalCardFrontPhotoUrl', label: 'member.subinstitution.manage.details.legalCardFrontPhotoUrl' },
            { prop: 'legalCardBackPhotoUrl', label: 'member.subinstitution.manage.details.legalCardBackPhotoUrl' },
            { prop: 'mobile', label: 'member.subinstitution.manage.details.mobile' },
            { prop: 'telPhone', label: 'member.subinstitution.manage.details.telPhone' },
            { prop: 'address', label: 'member.subinstitution.manage.details.address' },
            { prop: 'postalCode', label: 'member.subinstitution.manage.details.postalCode' },
            { prop: 'email', label: 'member.subinstitution.manage.details.email' },
            { prop: 'remark', label: 'member.subinstitution.manage.details.remark' },
        ]
    }
    return []
})

const detailProps3 = computed<CellProp[]>(() => {
    const oldBankid = oldData.value?.userinfoDetailVo.bankid
    const newBankid = newData.value?.userinfoDetailVo.bankid
    if (oldBankid || newBankid) {
        return [
            { prop: 'bankName', label: 'member.subinstitution.manage.details.bankName' },
            { prop: 'bankAccount', label: 'member.subinstitution.manage.details.bankAccount' },
            { prop: 'bankCardFrontPhotoUrl', label: 'member.subinstitution.manage.details.bankCardFrontPhotoUrl' }
        ]
    }
    return []
})

const detailProps4 = computed<CellProp[]>(() => {
    const { attachment1, attachment2 } = oldData.value?.userinfoDetailVo ?? {}
    if (attachment1 || attachment2) {
        return [
            { prop: 'attachment1', label: 'member.subinstitution.manage.details.attachment1' },
            { prop: 'attachment2', label: 'member.subinstitution.manage.details.attachment2' }
        ]
    }
    return []
})

const detailProps5 = computed<CellProp[]>(() => {
    if (oldData.value?.userAccountDetailVo.usertype === 3) {
        return [
            { prop: 'logincode', label: 'member.subinstitution.manage.details.logincode' },
            { prop: 'username', label: 'member.subinstitution.manage.details.username' },
            { prop: 'userstatus', label: 'member.subinstitution.manage.details.userstatus', formatValue: (val) => userstatusEnum.getEnumTypeName(val) },
        ]
    }
    return []
})

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