<!-- 查询管理-其它查询-出入金查询-详情 -->
<template>
    <app-drawer :title="t('query.other.bank_inout.details.title')" width="960" v-model:show="show">
        <app-table-details :title="t('query.other.bank_inout.details.subtitle1')" :data="data" :label-width="200" :cell-props="detailProps1" :column="2" />
        <app-table-details :title="t('common.extendinfo')" :data="data?.bankSignExtendInfo" :label-width="200" :cell-props="detailProps2"
            :column="2" v-if="detailProps2.length" />
        <template #footer>
            <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
            <template v-if="flag === 0">
                <el-button type="primary">{{ t('query.other.bank_inout.details.flag1') }}</el-button>
                <el-button type="primary">{{ t('query.other.bank_inout.details.flag2') }}</el-button>
            </template>
            <template v-if="flag === 3">
                <el-button type="primary">{{ t('query.other.bank_inout.details.flag3') }}</el-button>
                <el-button type="primary">{{ t('query.other.bank_inout.details.flag4') }}</el-button>
            </template>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { decryptAES } from '@/services/crypto'
import { formatDate } from '@/filters'
import { useEnum } from '@/hooks/enum'
import { useRequest } from '@/hooks/request'
import { queryPutOrInDetail } from '@/services/api/account'
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({
    record: {
        type: Object as PropType<Model.PutOrInRsp>,
        required: true
    },
    flag: {
        type: Number,
        default: -1
    },
})

const { global: { t } } = i18n
const show = shallowRef(true)
const refresh = shallowRef(false)
const executetypeEnum = useEnum('executetype') // 申请类型
const applystatusEnum = useEnum('applystatus') // 状态

const { data } = useRequest(queryPutOrInDetail, {
    params: {
        accountcode: props.record.accountcode.toString(),
        cusbankid: props.record.cusbankid,
        exchticket: props.record.exchticket,
        tradedate: props.record.tradedate
    },
    onError: (err) => {
        ElMessage.error(err)
    }
})

const detailProps1 = computed<CellProp[]>(() => {
    const { bankname, applystatus = 0 } = data.value ?? {}

    const result: CellProp[] = [
        { prop: 'accountcode', label: 'query.other.bank_inout.details.accountcode' },
        { prop: 'balance', label: 'query.other.bank_inout.details.balance' },
        { prop: 'usedmargin', label: 'query.other.bank_inout.details.usedmargin' },
        { prop: 'cusbankname', label: 'query.other.bank_inout.details.cusbankname' },
        { prop: 'bankaccountno', label: 'query.other.bank_inout.details.bankaccountno', formatValue: (val) => decryptAES(val) },
        { prop: 'bankid', label: 'query.other.bank_inout.details.bankid', formatValue: (val) => val && `${val} - ${bankname}` },
        { prop: 'branchbankname', label: 'query.other.bank_inout.details.branchbankname' },
        { prop: 'bankaccountname', label: 'query.other.bank_inout.details.bankaccountname', formatValue: (val) => decryptAES(val) },
        { prop: 'tradedate', label: 'query.other.bank_inout.details.tradedate' },
        { prop: 'executetype', label: 'query.other.bank_inout.details.executetype', formatValue: (val) => executetypeEnum.getEnumTypeName(val) },
        { prop: 'amount', label: 'query.other.bank_inout.details.amount' },
        { prop: 'charge', label: 'query.other.bank_inout.details.charge' },
        { prop: 'currency', label: 'query.other.bank_inout.details.currency' },
        { prop: 'extoperateid', label: 'query.other.bank_inout.details.extoperateid' },
        { prop: 'exchticket', label: 'query.other.bank_inout.details.exchticket' },
        { prop: 'bankticket', label: 'query.other.bank_inout.details.bankticket' },
        { prop: 'extoperateid', label: 'query.other.bank_inout.details.extoperateid' },
        { prop: 'curdebt', label: 'query.other.bank_inout.details.curdebt' },
        { prop: 'updatetime', label: 'query.other.bank_inout.details.updatetime', formatValue: (val) => formatDate(val) },
        { prop: 'applyremark', label: 'query.other.bank_inout.details.applyremark' },
    ]

    if (props.flag === 1) {
        result.push(
            { prop: 'applystatus', label: 'query.other.bank_inout.details.applystatus', formatValue: (val) => applystatusEnum.getEnumTypeName(val) },
            { prop: 'remark2', label: 'query.other.bank_inout.details.remark2', show: [3, 12, 14, 15, 16, 17].includes(applystatus) },
            { prop: 'username', label: 'query.other.bank_inout.details.username', show: applystatus !== 1 },
            { prop: 'audittime', label: 'query.other.bank_inout.details.audittime', formatValue: (val) => formatDate(val), show: applystatus !== 1 },
            { prop: 'checkerrorflag', label: 'query.other.bank_inout.details.checkerrorflag' },
        )
    }

    return result
})

const detailProps2 = computed<CellProp[]>(() => {
    const extendInfo = data.value?.bankSignExtendInfo
    if (extendInfo) {
        const result: CellProp[] = [
            { prop: 'sex', label: 'query.other.bank_inout.details.sex' },
            { prop: 'legal_name', label: 'query.other.bank_inout.details.legal_name' },
            { prop: 'legal_cert_type', label: 'query.other.bank_inout.details.legal_cert_type' },
            { prop: 'legal_cert_code', label: 'query.other.bank_inout.details.legal_cert_code' },
            { prop: 'agent_name', label: 'query.other.bank_inout.details.agent_name' },
            { prop: 'agent_cert_type', label: 'query.other.bank_inout.details.agent_cert_type' },
            { prop: 'agent_cert_code', label: 'query.other.bank_inout.details.agent_cert_code' },
            { prop: 'member_code', label: 'query.other.bank_inout.details.member_code' },
            { prop: 'legal_contact', label: 'query.other.bank_inout.details.legal_contact' },
            { prop: 'agent_contact', label: 'query.other.bank_inout.details.agent_contact' },
            { prop: 'bank_branch_name', label: 'query.other.bank_inout.details.bank_branch_name' },
            { prop: 'attachment', label: 'query.other.bank_inout.details.attachment' },
            { prop: 'certificate_photo_url', label: 'query.other.bank_inout.details.certificate_photo_url' },
        ]
        return result.filter((item) => {
            const prop = item.prop as keyof Model.PutOrInDetailRsp['bankSignExtendInfo']
            const value = extendInfo[prop]
            return value != null && value !== ''
        })
    }
    return []
})

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