<script setup>
import { ref } from 'vue';
import sHeader from "@/components/SimpleHeader";

const getStatusText = (statusValue) => {
    const statusMap = {
        0: '过期',
        1: '生效',
        2: '撤单',
        3: '全部成交',
        4: '部分成交',
    }
    return statusMap[statusValue] || '未知状态';
}


const typeTexts = ['未知类型', '买', '卖'];
const getTypeText = (typeValue) => {
    return typeTexts[typeValue] || typeTexts[0];
};

const orderMatchList = ref([
    {
        createTime: "2024-04-16",
        entrustNumber: "2000",
        price: "80.03",
        tradeNumber: "1500",
        type: "1"
    },
    {
        createTime: "2024-04-15",
        entrustNumber: "3000",
        price: "81.00",
        tradeNumber: "2000",
        type: "2"
    }
])

</script>

<template>
    <!-- 挂单匹配通知列表 -->
    <div class="orderMatchNotice flex-col">
        <div class="orderMatchNoticeBox">
            <s-header :name="'挂单匹配列表'" :noback="false" :isFixed="false"></s-header>
            <h3>挂单匹配列表</h3>

            <!-- 列表 -->
            <div class="listItem" v-for="(item, index) in orderMatchList" :key="index">
                <br>
                <van-col span="16" style="font-size: medium;">创建时间: {{ item.createTime }}</van-col>
                <van-cell-group>
                    <van-row justify="space-around" class="row-col">
                        <van-col span="8">委托数量: {{ item.entrustNumber }}</van-col>
                        <van-col span="8">成交数量: {{ item.tradeNumber }}</van-col>
                        <van-col span="8">挂单价格: {{ item.price }}</van-col>
                        <!-- 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
                        <van-col span="8">状态: {{ getStatusText(item.status) }}</van-col>
                        <!-- 挂单类型：1买，2卖 -->
                        <van-col span="8">挂单类型: {{ getTypeText(item.type) }}</van-col>
                    </van-row>
                </van-cell-group>
                <br>
            </div>



        </div>
    </div>
</template>

<style scoped>
.van-cell-group {
    background-color: antiquewhite;
    /* 设置圆角 */
    border-radius: 8px;
    /* 添加阴影效果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 确保阴影效果不会被内部元素覆盖 */
    overflow: hidden;
}

.row-col .van-col {
    justify-content: center;
    text-align: center;
    font-size: 14px;
    /* background-color: thistle; */
}

.listItem {
    margin: auto;
    width: 95%;
}
</style>