<!-- 挂牌大厅-我的摘牌-详情 -->
<template>
    <teleport :to="teleportTo">
        <app-view class="app-details" v-bind="$attrs">
            <template #header>
                <el-button @click="$emit('closed')">返回</el-button>
            </template>
            <div class="app-details__intro" style="line-height:normal;margin-bottom:48px">
                <div class="info">
                    <h1>成交信息</h1>
                    <table>
                        <tbody>
                            <tr>
                                <td>成交单号</td>
                                <td>{{selectedRow.wrtradedetailid}}</td>
                            </tr>
                            <tr>
                                <td>商品编号</td>
                                <td>{{selectedRow.goodsno}}</td>
                            </tr>
                            <tr>
                                <td>方向</td>
                                <td>{{buyorsell}}</td>
                            </tr>
                            <tr>
                                <td>资金账号</td>
                                <td>{{buyorsell === BuyOrSell.Buy ? selectedRow.buyaccountid :
                                selectedRow.sellaccountid}}</td>
                            </tr>
                            <tr>
                                <td>对手方</td>
                                <td>{{selectedRow.matchusername}}</td>
                            </tr>
                            <tr>
                                <td>成交价格</td>
                                <td>{{selectedRow.tradeprice}}</td>
                            </tr>
                            <tr>
                                <td>手续费</td>
                                <td>{{buyorsell === BuyOrSell.Buy ? selectedRow.buychargevalue :
                                selectedRow.sellchargevalue}}</td>
                            </tr>
                            <tr>
                                <td>汇率</td>
                                <td>{{selectedRow.exchangerate}}</td>
                            </tr>
                            <tr>
                                <td>成交时间</td>
                                <td>{{selectedRow.tradetime}}</td>
                            </tr>
                            <tr>
                                <td>履约计划</td>
                                <td>{{selectedRow.performanceplanid}}</td>
                            </tr>
                            <tr>
                                <td>履约规则</td>
                                <td>/WrTrade2/QueryWrPerformancePlanStep</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </app-view>
    </teleport>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { BuyOrSell } from '@/constants/order'

defineProps({
    teleportTo: {
        type: String as PropType<'#appPageTeleport' | '#appMainTeleport'>,
        default: '#appPageTeleport'
    },
    buyorsell: {
        type: Number as PropType<BuyOrSell>,
        required: true
    },
    selectedRow: {
        type: Object as PropType<Ermcp.MyDeListingRsp>,
        default: () => ({})
    },
})
</script>