<template>
    <app-view>
        <table class="app-order" v-if="tableList.length">
            <tbody v-for="(item, i) in tableList" :key="i">
                <tr class="app-order__header">
                    <th class="column" colspan="5">
                        <div class="g-order__topbar">
                            <el-checkbox size="large" v-model="checkedAll" />
                            <div class="label">订单号：</div>
                            <div class="label">下单日期：</div>
                        </div>
                    </th>
                </tr>
                <tr class="app-order__body" v-for="(child, j) in item.orderItems" :key="j">
                    <td class="column">
                        <div class="g-order__item">
                            <div class="gallery">
                                商品图片
                            </div>
                            <div class="info">
                                <div class="info-title">{{ child.goodsName }}</div>
                                <div class="info-desc">{{ child.skuInof }}</div>
                                <div class="info-desc" v-if="child.goodsCode">编码:{{ child.goodsCode }}</div>
                            </div>
                            <div class="amount">
                                <span class="g-price--plus">{{ Number(child.amount).toFixed(2) }}</span>
                                <span class="refund">售后状态</span>
                            </div>
                            <div class="quantity">
                                <span>×{{ child.quantity }}</span>
                            </div>
                        </div>
                    </td>
                    <td class="column" :rowspan="item.orderItems.length" v-if="j == 0">
                        <span>买家</span>
                    </td>
                    <td class="column" :rowspan="item.orderItems.length" v-if="j == 0">订单状态</td>
                    <td class="column column--bold" :rowspan="item.orderItems.length" v-if="j == 0">
                        <span class="g-price--plus">支付金额</span>
                    </td>
                    <td class="column" :rowspan="item.orderItems.length" v-if="j == 0">
                        <el-button type="primary">发货</el-button>
                        <el-button>查看</el-button>
                    </td>
                </tr>
                <tr class="app-order__spacing" v-if="tableList.length > (i + 1)"></tr>
            </tbody>
        </table>
    </app-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checkedAll = ref(false)
const tableList = ref([
    {
        id: 0,
        orderNumber: '',
        orderStatus: 0,
        paymentAt: '',
        createdAt: '',
        orderItems: [
            {
                goodsCode: '',
                goodsName: '',
                skuInof: '',
                amount: 0,
                quantity: 0
            },
            {
                goodsCode: '',
                goodsName: '',
                skuInof: '',
                amount: 0,
                quantity: 0
            }
        ]
    },
    {
        id: 0,
        orderNumber: '',
        orderStatus: 0,
        paymentAt: '',
        createdAt: '',
        orderItems: [
            {
                goodsCode: '',
                goodsName: '',
                skuInof: '',
                amount: 0,
                quantity: 0
            }
        ]
    }
])
</script>

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