<!-- 挂牌大厅-求购大厅-详情 -->
<template>
    <teleport to="#appMainTeleport">
        <app-view class="app-details" v-bind="$attrs">
            <template #header>
                <div>
                    <el-button @click="$emit('closed')">返回</el-button>
                </div>
            </template>
            <el-descriptions title="求购信息" :column="2">
                <el-descriptions-item label="委托单号">{{ selectedRow.wrtradeorderid }}</el-descriptions-item>
                <el-descriptions-item label="买方">{{ selectedRow.buyusername }}</el-descriptions-item>
                <el-descriptions-item label="钻石分类">{{ selectedRow.zscategorydisplay }}</el-descriptions-item>
                <el-descriptions-item label="货币类型">{{ selectedRow.zscurrencytypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="尺寸">{{ selectedRow.zssize }}</el-descriptions-item>
                <el-descriptions-item label="形状">{{ selectedRow.zsshapetypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="净度">{{ selectedRow.zsclaritytypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="对称度">{{ selectedRow.zssymmetrytypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="颜色">{{ selectedRow.zscolortypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="切工">{{ selectedRow.zscuttypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="荧光">{{ selectedRow.zsfluorescencetypedisplay }}</el-descriptions-item>
            </el-descriptions>
            <template v-for="(auth, index) in getAuthComponent()" :key="index">
                <component :is="componentMap.get(auth.code)" v-bind="{ selectedRow }" v-if="showComponent" />
            </template>
        </app-view>
    </teleport>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { useAuth } from '@/hooks/auth'
import { useLoginStore } from '@/stores'

const props = defineProps({
    code: String,
    selectedRow: {
        type: Object as PropType<Ermcp.BuyOrderRsp>,
        default: () => ({})
    }
})

const { getUserId } = useLoginStore()
const { componentMap, getAuthComponent } = useAuth(props.code)

// 不能购买自己发布的求购
const showComponent = computed(() => {
    return props.selectedRow.userid !== getUserId()
})
</script>