<!-- 挂牌大厅-我的求购-详情 -->
<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.zscategorydisplay }}</span>
                        </li>
                        <li>
                            <span>货币类型</span>
                            <span>{{ selectedRow.zscurrencytypedisplay }}</span>
                        </li>
                        <li>
                            <span>尺寸</span>
                            <span>{{ handleNoneValue(selectedRow.zssizedisplay) }}</span>
                        </li>
                        <li>
                            <span>形状</span>
                            <span>{{ handleNoneValue(selectedRow.zsshapetypedisplay) }}</span>
                        </li>
                        <li>
                            <span>切工</span>
                            <span>{{ handleNoneValue(selectedRow.zscuttypedisplay) }}</span>
                        </li>
                        <li>
                            <span>颜色</span>
                            <span>{{ handleNoneValue(selectedRow.zscolortypedisplay) }}</span>
                        </li>
                        <li>
                            <span>抛光</span>
                            <span>{{ handleNoneValue(selectedRow.zspolishtypedisplay) }}</span>
                        </li>
                        <li>
                            <span>净度</span>
                            <span>{{ handleNoneValue(selectedRow.zsclaritytypedisplay) }}</span>
                        </li>
                        <li>
                            <span>对称</span>
                            <span>{{ handleNoneValue(selectedRow.zssymmetrytypedisplay) }}</span>
                        </li>
                        <li>
                            <span>荧光</span>
                            <span>{{ handleNoneValue(selectedRow.zsfluorescencetypedisplay) }}</span>
                        </li>
                        <li v-if="selectedRow.performancetemplateid">
                            <span>履约规则</span>
                            <app-performance-rule :item="getPerformanceTemplateById(selectedRow.performancetemplateid)" />
                        </li>
                        <li>
                            <span>备注</span>
                            <span>{{ handleNoneValue(selectedRow.remark) }}</span>
                        </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, handleNoneValue } from '@/filters'
import { getApplyStatusName } from '@/constants/order'
import { useLoginStore, usePerformanceStore } from '@/stores'
import { queryMyDelistingApply } 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.MyBuyOrderRsp>,
        required: true
    },
})

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

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

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

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