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

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

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

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

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