<template>
    <teleport to="#appPageTeleport" v-if="details">
        <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>{{details.buywrtradeorderid}}</td>
                            </tr>
                            <tr>
                                <td>买方</td>
                                <td>{{details.buyusername}}</td>
                            </tr>
                            <tr>
                                <td>钻石分类</td>
                                <td>{{details.zscategorydisplay}}</td>
                            </tr>
                            <tr>
                                <td>货币类型</td>
                                <td>{{details.zscurrencytypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>尺寸</td>
                                <td>{{details.sizedisplay}}</td>
                            </tr>
                            <tr>
                                <td>形状</td>
                                <td>{{details.zsshapetypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>切工</td>
                                <td>{{details.zscuttypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>颜色</td>
                                <td>{{details.zscolortypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>抛光</td>
                                <td>{{details.zspolishtypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>净度</td>
                                <td>{{details.zsclaritytypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>对称</td>
                                <td>{{details.zssymmetrytypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>荧光</td>
                                <td>{{details.zsfluorescencetypedisplay}}</td>
                            </tr>
                            <tr>
                                <td>履约规则</td>
                                <td>{{details.performancetemplateid}}</td>
                            </tr>
                            <tr>
                                <td>备注</td>
                                <td>{{details.applyremark}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </app-view>
    </teleport>
    <app-goods v-bind="{ selectedRow }" v-else />
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import AppGoods from '@pc/views/warehousing/goods/components/details/index.vue'

const props = defineProps({
    selectedRow: {
        type: Object as PropType<Ermcp.MyBargainApplyRsp | Ermcp.MyDelistingApplyRsp>,
        default: () => ({})
    },
})

const details = computed(() => {
    if ('buywrtradeorderid' in props.selectedRow) {
        return props.selectedRow
    }
    return undefined
})
</script>