<!-- 挂牌大厅-我的求购-详情 -->
<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></td>
                            </tr>
                            <tr>
                                <td>钻石分类</td>
                                <td>{{selectedRow.zscategorydisplay}}</td>
                            </tr>
                            <tr>
                                <td>货币类型</td>
                                <td>{{selectedRow.zscurrencytypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>尺寸</td>
                                <td>{{selectedRow.zssize}}</td>
                            </tr>
                            <tr>
                                <td>形状</td>
                                <td>{{selectedRow.zsshapetypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>切工</td>
                                <td>{{selectedRow.zscuttypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>颜色</td>
                                <td>{{selectedRow.zscolortypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>抛光</td>
                                <td>{{selectedRow.zspolishtypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>净度</td>
                                <td>{{selectedRow.zsclaritytypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>对称</td>
                                <td>{{selectedRow.zssymmetrytypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>荧光</td>
                                <td>{{selectedRow.zsfluorescencetypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>履约规则</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>备注</td>
                                <td>{{selectedRow.remark}}</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 { queryMyDelistingApply } 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.MyBuyOrderRsp>,
        required: true
    },
})

const { getUserId } = useLoginStore()
const dataList = shallowRef<Ermcp.MyDelistingApplyRsp[]>([])
const columns = shallowRef<Ermcp.TableColumn[]>([
    { prop: 'selldelistingapplyid', label: '询价单号', show: true },
    { prop: 'sellusername', label: '卖方', show: true },
    { prop: 'goodsno', label: '商品编号', show: true },
    { prop: 'applyqty', label: '申请重量', show: true },
    { prop: 'applyprice', label: '总价', show: true },
    { prop: 'applystatus', label: '申请状态', show: true },
    { prop: 'applytime', label: '申请时间', show: true },
])

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