<!-- 挂牌大厅-我的出售-详情 -->
<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.wrtradeorderid }}</span>
                        </li>
                        <li>
                            <span>委托时间</span>
                            <span>{{ selectedRow.ordertime }}</span>
                        </li>
                        <li>
                            <span>冻结保证金</span>
                            <span>{{ selectedRow.freezemargin }}</span>
                        </li>
                        <li>
                            <span>解冻保证金</span>
                            <span>{{ selectedRow.unfreezemargin }}</span>
                        </li>
                        <li>
                            <span>委托状态</span>
                            <span>{{ getWRTradeOrderStatusName(selectedRow.wrtradeorderstatus) }}</span>
                        </li>
                        <li>
                            <span>商品编号</span>
                            <span>{{ selectedRow.goodsno }}</span>
                        </li>
                        <li>
                            <span>资金账号</span>
                            <span>{{ selectedRow.accountid }}</span>
                        </li>
                        <li>
                            <span>冻结手续费</span>
                            <span>{{ selectedRow.freezecharge }}</span>
                        </li>
                        <li>
                            <span>解冻手续费</span>
                            <span>{{ selectedRow.unfreezecharge }}</span>
                        </li>
                        <li>
                            <span>汇率</span>
                            <span>{{ selectedRow.exchangerate }}</span>
                        </li>
                        <li v-if="selectedRow.performancetemplateid">
                            <span>履约规则</span>
                            <app-performance-rule :item="getPerformanceTemplateById(selectedRow.performancetemplateid)" />
                        </li>
                    </ul>
                </el-card>
            </el-aside>
            <el-main>
                <el-card shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span>询价信息</span>
                        </div>
                    </template>
                    <app-table :data="dataList" v-model:columns="columns" :show-toolbar="false" border>
                        <!-- 申请状态 -->
                        <template #applystatus="{ value }">
                            {{ getApplyStatusName(value) }}
                        </template>
                        <!-- 价格 -->
                        <template #applyprice="{ row }">
                            {{ row.zscurrencytypedisplayunit + formatDecimal(row.applyprice) }}
                        </template>
                    </app-table>
                </el-card>
            </el-main>
        </el-container>
    </teleport>
</template>

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

<script lang="ts" setup>
import { PropType, shallowRef } from 'vue'
import { formatDecimal } from '@/filters'
import { getApplyStatusName, getWRTradeOrderStatusName } from '@/constants/order'
import { useLoginStore, usePerformanceStore } from '@/stores'
import { queryMyBargainApply } from '@/services/api/trade'
import AppTable from '@pc/components/base/table/index.vue'
import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vue'
import AppIcon from '@pc/components/base/icon/index.vue'

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

const loginStore = useLoginStore()
const { getPerformanceTemplateById } = usePerformanceStore()

const dataList = shallowRef<Ermcp.MyBargainApplyRsp[]>([])
const columns = shallowRef<Ermcp.TableColumn[]>([
    { prop: 'wrbargainid', label: '询价单号' },
    { prop: 'buyusername', label: '买方' },
    { prop: 'applyprice', label: '价格' },
    { prop: 'applystatus', label: '申请状态' },
    { prop: 'applytime', label: '申请时间' },
])

queryMyBargainApply({
    type: 1,
    userid: loginStore.userId,
    wrtradeorderid: props.selectedRow.wrtradeorderid
}).then((res) => {
    dataList.value = res.data
})
</script>

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