<!-- 账号管理-资金账户管理-详情 -->
<template>
    <app-drawer :title="t('account.fundacct.details.title')" width="900" v-model:show="show">
        <app-table-details :data="data" :label-width="160" :cell-props="detailProps" :column="2">
            <!-- 市场权限 -->
            <template #dtype="{ value }">
                <template v-for="(item, index) in value" :key="index">
                    <dl>
                        <dt>{{ item.marketName }}</dt>
                        <dd v-if="item.tradeMode === 79">
                            <span>买大厅权限：</span>
                            <span>{{ buyspotrighttypeEnum.getEnumTypeName(item.dtype) }}</span>
                        </dd>
                        <dd v-else-if="item.tradeMode === 78">
                            <span>买大厅权限：</span>
                            <span>{{ marketbstypeEnum.getEnumTypeName(item.spotRightType) }}</span>
                        </dd>
                        <template v-if="item.tradeProperty === 4">
                            <dd>
                                <span v-if="item.tradeMode === 17">卖大厅权限：</span>
                                <span v-else>交易权限：</span>
                                <span>{{ marketbstypeEnum.getEnumTypeName(item.spotRightType) }}</span>
                            </dd>
                            <dd v-if="item.tradeMode === 17">
                                <span>买大厅权限：</span>
                                <span>{{ buyspotrighttypeEnum.getEnumTypeName(item.dtype) }}</span>
                            </dd>
                        </template>
                    </dl>
                </template>
            </template>
            <!-- 授权交易账户 -->
            <template #loginIds="{ value }">
                {{ value.join(',') }}
            </template>
        </app-table-details>
        <app-table :data="data?.bankAccountsignList" :columns="tableColumns" v-if="data?.isMain === 1" />
        <template #footer>
            <el-button @click="onCancel">{{ t('operation.close') }}</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType } from 'vue'
import { ElMessage } from 'element-plus'
import { decryptAES } from '@/services/crypto'
import { useEnum } from '@/hooks/enum'
import { useRequest } from '@/hooks/request'
import { queryTaAccountDetail } from '@/services/api/account'
import { CellProp } from '@pc/components/base/table-details/types'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppTable from '@pc/components/base/table/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.TaAccountRsp | Member.OrganTaaccountRsp>,
        required: true
    }
})

const { global: { t } } = i18n

const show = shallowRef(true)

// 账户类型
const mainaccounttypeEnum = useEnum('mainaccounttype')
// 内/外部
const accounttypeEnum = useEnum('accounttype')
// 交易状态
const traderstatusEnum = useEnum('traderstatus')
// 签约状态
const signstatusEnum = useEnum('signstatus')
// 变动标志
const flagEnum = useEnum('flag')
// 买大厅权限
const buyspotrighttypeEnum = useEnum('buyspotrighttype')
// 卖大厅权限
const marketbstypeEnum = useEnum('marketbstype')
// 币种
const currencyEnum = useEnum('currency')

const { data } = useRequest(queryTaAccountDetail, {
    params: {
        accountId: props.record.accountId,
    },
    onError: (err) => {
        ElMessage.error(err)
    }
})

const detailProps: CellProp[] = [
    { prop: 'accountId', label: 'account.fundacct.details.accountId' },
    { prop: 'accountName', label: 'account.fundacct.details.accountName' },
    { prop: 'isMain', label: 'account.fundacct.details.isMain', formatValue: (val) => mainaccounttypeEnum.getEnumTypeName(val) },
    { prop: 'currency', label: 'account.fundacct.details.currency', formatValue: (val) => currencyEnum.getEnumTypeName(val) },
    { prop: 'taAccountType', label: 'account.fundacct.details.taAccountType', formatValue: (val) => accounttypeEnum.getEnumTypeName(val) },
    { prop: 'changeFlag', label: 'account.fundacct.details.changeFlag', formatValue: (val) => flagEnum.getEnumTypeName(val) },
    { prop: 'tradeStatus', label: 'account.fundacct.details.tradeStatus', formatValue: (val) => traderstatusEnum.getEnumTypeName(val) },
    { prop: 'currentBalance', label: 'account.fundacct.details.currentBalance', decimal: 2 },
    { prop: 'payCharge', label: 'account.fundacct.details.payCharge', decimal: 2 },
    { prop: 'otherPay', label: 'account.fundacct.details.otherPay', decimal: 2 },
    { prop: 'otherFreezeMargin', label: 'account.fundacct.details.otherFreezeMargin', decimal: 2 },
    { prop: 'freezeMargin', label: 'account.fundacct.details.freezeMargin', decimal: 2 },
    { prop: 'usedMargin', label: 'account.fundacct.details.usedMargin', decimal: 2 },
    { prop: 'freezeCharge', label: 'account.fundacct.details.freezeCharge', decimal: 2 },
    { prop: 'outAmountFreeze', label: 'account.fundacct.details.outAmountFreeze', decimal: 2 },
    { prop: 'outThreshold', label: 'account.fundacct.details.outThreshold', decimal: 2 },
    { prop: 'dtype', label: 'account.fundacct.details.dtype', show: !!data.value?.isSelf },
    { prop: 'loginIds', label: 'account.fundacct.details.loginIds', show: !!data.value?.isSelf }
]

const tableColumns = shallowRef<Model.TableColumn[]>([
    { field: 'cusBankName', label: 'account.fundacct.details.cusBankName' },
    { field: 'bankName', label: 'account.fundacct.details.bankName' },
    { field: 'bankAccountName', label: 'account.fundacct.details.bankAccountName', formatValue: (val) => decryptAES(val) },
    { field: 'bankAccountNo', label: 'account.fundacct.details.bankAccountNo', formatValue: (val) => decryptAES(val) },
    { field: 'signStatus', label: 'account.fundacct.details.signStatus', formatValue: (val) => signstatusEnum.getEnumTypeName(val) }
])

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