<!-- 查询管理-内部订单查询-委托单查询-详情 -->
<template>
    <app-drawer :title="t('query.internal.order.details.title')" width="960" v-model:show="show">
        <app-table-details :title="t('query.internal.order.details.subtitle1')" :data="data" :label-width="200"
            :cell-props="detailProps1" :column="2" />
        <app-table-details :title="t('query.internal.order.details.subtitle2')" :data="data" :label-width="200"
            :cell-props="detailProps2" :column="2" />
        <template v-if="data && [7, 8, 9].includes(data.orderstatus)">
            <app-table :data="data.tradeHisResultList" :columns="tableColumns" v-if="record.isHis">
                <template #headerLeft>
                    <b>{{ t('query.internal.order.details.tradelist1') }}</b>
                </template>
            </app-table>
            <app-table :data="data.tradeResultList" :columns="tableColumns" v-else>
                <template #headerLeft>
                    <b>{{ t('query.internal.order.details.tradelist2') }}</b>
                </template>
            </app-table>
        </template>
        <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, parsePercent, parseTenThousand } from '@/filters'
import { useEnum } from '@/hooks/enum'
import { useRequest } from '@/hooks/request'
import { queryCommissionSheetDetail } from '@/services/api/order'
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.CommissionSheetRsp>,
        required: true
    }
})

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

// 挂牌点选类型
const listingselecttypeEnum = useEnum('listingselecttype')
// 委托类型
const buildtypeEnum = useEnum('buildtype')
// 委托状态
const orderstatusEnum = useEnum('orderstatus')
// 有效期类型
const ValidTypeEnum = useEnum('ValidType')
// 取价方式
const Pricemode2Enum = useEnum('Pricemode2')
// 操作类型
const orderoperatetypeEnum = useEnum('orderoperatetype')
// 方向
const buyOrSellEnum = useEnum('buyOrSell')

const { data } = useRequest(queryCommissionSheetDetail, {
    params: {
        isHis: props.record.isHis,
        orderId: props.record.orderId,
        tradeDate: props.record.tradeDate
    },
    onError: (err) => {
        ElMessage.error(err)
    }
})

const detailProps1 = computed<CellProp[]>(() => {
    const { trademode = 0, accountid, cancelorderid, preorderid, relatedid, retcode, tradeqty, openqty, closeqty, cancelqty } = data.value ?? {}
    const isTradeMode16 = trademode === 16
    const isTradeMode46 = trademode === 46
    const isTradeMode18Or26 = [18, 26].includes(trademode)

    return [
        { prop: 'orderid', label: 'query.internal.order.details.orderid' },
        { prop: 'accountname', label: 'query.internal.order.details.accountname', formatValue: (val) => val && `${val} (${accountid})` },
        { prop: 'parentusername', label: 'query.internal.order.details.parentusername' },
        { prop: 'memberaccountname', label: 'query.internal.order.details.memberaccountname' },
        { prop: 'marketname', label: 'query.internal.order.details.marketname' },
        { prop: 'goodscode', label: 'query.internal.order.details.goodsname' },
        { prop: 'listingselecttype', label: 'query.internal.order.details.listingselecttype', formatValue: (val) => listingselecttypeEnum.getEnumTypeName(val), show: isTradeMode16 },
        //{ prop: 'delistingtype', label: 'query.internal.order.details.delistingtype', show: isTradeMode16 },
        { prop: 'buildtype', label: 'query.internal.order.details.buildtype', formatValue: (val) => buildtypeEnum.getEnumTypeName(val) },
        { prop: 'buyorsell', label: 'query.internal.order.details.buyorsell', formatValue: (val) => buyOrSellEnum.getEnumTypeName(val) },
        { prop: 'orderprice', label: 'query.internal.order.details.orderprice', show: !isTradeMode18Or26 },
        { prop: 'optiontype', label: 'query.internal.order.details.optiontype', show: isTradeMode18Or26 },
        { prop: 'orderprice', label: 'query.internal.order.details.orderprice1', show: isTradeMode18Or26 },
        { prop: 'premium', label: 'query.internal.order.details.premium', show: isTradeMode18Or26 },
        { prop: 'orderqty', label: 'query.internal.order.details.orderqty' },
        { prop: 'tradeqty', label: 'query.internal.order.details.tradeqty1', show: !!tradeqty },
        { prop: 'openqty', label: 'query.internal.order.details.openqty', show: !!openqty },
        { prop: 'closeqty', label: 'query.internal.order.details.closeqty', show: !!closeqty },
        { prop: 'cancelqty', label: 'query.internal.order.details.cancelqty', show: !!cancelqty },
        { prop: 'pricemode', label: 'query.internal.order.details.pricemode', formatValue: (val) => Pricemode2Enum.getEnumTypeName(val), show: !isTradeMode18Or26 },
        { prop: 'validtype', label: 'query.internal.order.details.validtype', formatValue: (val) => ValidTypeEnum.getEnumTypeName(val), show: !isTradeMode18Or26 },
        { prop: 'validtime', label: 'query.internal.order.details.validtime', show: !isTradeMode18Or26 },
        { prop: 'operatetype', label: 'query.internal.order.details.operatetype', formatValue: (val) => orderoperatetypeEnum.getEnumTypeName(val), show: !isTradeMode18Or26 },
        { prop: 'orderstatus', label: 'query.internal.order.details.orderstatus', formatValue: (val) => orderstatusEnum.getEnumTypeName(val) },
        { prop: 'ordertime', label: 'query.internal.order.details.ordertime', formatValue: (val) => formatDate(val) },
        { prop: 'clientticket', label: 'query.internal.order.details.clientticket' },
        { prop: 'cancelorderid', label: 'query.internal.order.details.cancelorderid', show: cancelorderid !== '0' },
        { prop: 'preorderid', label: 'query.internal.order.details.preorderid', show: preorderid !== '0' },
        { prop: 'relatedid', label: 'query.internal.order.details.relatedid', show: relatedid !== '0' },
        { prop: 'retcode', label: 'query.internal.order.details.retcode', show: !!retcode },
        { prop: 'refgoodsid', label: 'query.internal.order.details.refgoodsid', show: isTradeMode46 },
        { prop: 'swapdays', label: 'query.internal.order.details.swapdays', show: isTradeMode46 },
    ]
})

const detailProps2 = computed<CellProp[]>(() => {
    const { buildtype = 0, orderstatus = 0, marginalgorithm, openfeealgorithm, closefeealgorithm } = data.value ?? {}
    const isBuildType1Or3 = [1, 3].includes(buildtype)
    const isBuildType2Or3 = [2, 3].includes(buildtype)

    const result: CellProp[] = [
        {
            prop: 'marginvalue',
            label: t('query.internal.order.details.marginvalue'),
            formatValue: (val) => marginalgorithm ? marginalgorithm === 1 ? parsePercent(val) : val : '',
            show: isBuildType1Or3
        },
        {
            prop: 'openexchagechargevalue',
            label: t('query.internal.order.details.openexchagechargevalue'),
            formatValue: (val) => openfeealgorithm ? openfeealgorithm === 1 ? parseTenThousand(val) : val : '',
            show: isBuildType1Or3
        },
        {
            prop: 'openmemberchargevalue',
            label: t('query.internal.order.details.openmemberchargevalue'),
            formatValue: (val) => openfeealgorithm ? openfeealgorithm === 1 ? parseTenThousand(val) : val : '',
            show: isBuildType1Or3
        },
        {
            prop: 'closeexchagechargevalue',
            label: t('query.internal.order.details.closeexchagechargevalue'),
            formatValue: (val) => closefeealgorithm ? closefeealgorithm === 1 ? parseTenThousand(val) : val : '',
            show: isBuildType2Or3
        },
        {
            prop: 'closememberchargevalue',
            label: t('query.internal.order.details.closememberchargevalue'),
            formatValue: (val) => closefeealgorithm ? closefeealgorithm === 1 ? parseTenThousand(val) : val : '',
            show: isBuildType2Or3
        },
    ]

    if ([3, 5].includes(orderstatus)) {
        result.push(
            { prop: 'freezemargin', label: 'query.internal.order.details.freezemargin' },
            { prop: 'freezecharge', label: 'query.internal.order.details.freezecharge' },
            { prop: 'openfreezecharge', label: 'query.internal.order.details.openfreezecharge' },
            { prop: 'closefreezecharge', label: 'query.internal.order.details.closefreezecharge' },
            { prop: 'unfreezemargin', label: 'query.internal.order.details.unfreezemargin' },
            { prop: 'unfreezecharge', label: 'query.internal.order.details.unfreezecharge' },
            { prop: 'openunfreezecharge', label: 'query.internal.order.details.openunfreezecharge' },
            { prop: 'closeunfreezecharge', label: 'query.internal.order.details.closeunfreezecharge' },
        )
    }

    return result
})

const tableColumns = computed<Model.TableColumn[]>(() => {
    const { trademode = 0 } = data.value ?? {}
    const isTradeMode18Or26 = [18, 26].includes(trademode)

    return [
        { field: 'tradeid', label: 'query.internal.order.details.tradeid' },
        { field: 'matchaccountid', label: 'query.internal.order.details.matchaccountid' },
        { field: 'tradeqty', label: 'query.internal.order.details.tradeqty' },
        { field: 'tradeprice', label: 'query.internal.order.details.tradeprice', show: !isTradeMode18Or26 },
        { field: 'tradeamount', label: 'query.internal.order.details.tradeamount', show: !isTradeMode18Or26 },
        { field: 'tradeprice', label: 'query.internal.order.details.tradeprice1', show: isTradeMode18Or26 },
        { field: 'chargevalue', label: 'query.internal.order.details.chargevalue' },
        { field: 'tradetime', label: 'query.internal.order.details.tradetime', formatValue: (val) => formatDate(val) },
    ]
})

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