<!-- 挂牌大厅-我的摘牌-详情 -->
<template>
    <teleport :to="teleportTo">
        <el-container class="trade-details">
            <el-aside>
                <el-card shadow="never">
                    <template #header>
                        <div class="card-header" @click="$emit('closed')">
                            <app-icon icon="ArrowLeftBold" />
                            <h4>成交信息</h4>
                        </div>
                    </template>
                    <ul>
                        <li>
                            <span>成交单号</span>
                            <span>{{ selectedRow.wrtradedetailid }}</span>
                        </li>
                        <li>
                            <span>商品编号</span>
                            <span>{{ selectedRow.goodsno }}</span>
                        </li>
                        <li>
                            <span>方向</span>
                            <span>{{ getBuyOrSellName(buyorsell) }}</span>
                        </li>
                        <li>
                            <span>资金账号</span>
                            <span>{{ buyorsell === BuyOrSell.Buy ? selectedRow.buyaccountid
                                : selectedRow.sellaccountid }}</span>
                        </li>
                        <li>
                            <span>对手方</span>
                            <span>{{ selectedRow.matchusername }}</span>
                        </li>
                        <li>
                            <span>成交价格</span>
                            <span>{{ selectedRow.tradeamount }}</span>
                        </li>
                        <li>
                            <span>手续费</span>
                            <span>{{ buyorsell === BuyOrSell.Buy ? selectedRow.buychargevalue
                                : selectedRow.sellchargevalue }}</span>
                        </li>
                        <li>
                            <span>汇率</span>
                            <span>{{ selectedRow.exchangerate }}</span>
                        </li>
                        <li>
                            <span>成交时间</span>
                            <span>{{ selectedRow.tradetime }}</span>
                        </li>
                        <li>
                            <span>履约计划</span>
                            <span>{{ selectedRow.performanceplanid }}</span>
                        </li>
                        <li v-if="dataList.length">
                            <span>履约规则</span>
                            <span>
                                <div class="app-performance-rule">
                                    <div class="block" v-for="(step, i) in dataList" :key="i">
                                        <el-tag :type="i % 2 ? 'warning' : ''" disable-transitions>{{
                                            step.steptypename }}</el-tag>
                                        <span class="block-label">T+{{ step.stepdays }}</span>
                                    </div>
                                </div>
                            </span>
                        </li>
                    </ul>
                </el-card>
            </el-aside>
        </el-container>
    </teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    inheritAttrs: false,
})
</script>

<script lang="ts" setup>
import { PropType } from 'vue'
import { BuyOrSell, getBuyOrSellName } from '@/constants/order'
import { usePerformancePlanStep } from '@/business/order'
import AppIcon from '@pc/components/base/icon/index.vue'

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

const { dataList, getPlanStepList } = usePerformancePlanStep(props.selectedRow.performanceplanid)

getPlanStepList()
</script>

<style lang="less">
@import './index.less';
</style>