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

const active = ref(0)

const parentBorder = ref(false)
const childBorder = ref(false)
const tableData = [
	{
		id: 'string',
		trading_hour: 'string',
		total_price: 'string',
		book_details: [
			{
				id: 'string',
				book_name: 'string',
				price: 'string',
				book_cover: 'string',
				introduction: 'string',
				description: 'string',
				store: 'string',
				create_time: 'string',
				update_time: 'string'
			}
		]
	}
]
</script>

<template>
	<div class="my-body">
		<ul class="nav-body">
			<li :class="{ active: active == 0 }" @click="active = 0">所有订单</li>
			<li :class="{ active: active == 1 }" @click="active = 1">待付款</li>
			<li :class="{ active: active == 2 }" @click="active = 2">待发货</li>
			<li :class="{ active: active == 3 }" @click="active = 3">待收货</li>
			<li :class="{ active: active == 4 }" @click="active = 4">待评价</li>
		</ul>

		<el-table :data="tableData" :border="parentBorder" style="width: 1000px; margin-top: 50px">
			<el-table-column label="编号" prop="id" />
			<el-table-column label="交易时间" prop="trading_hour" />
			<el-table-column label="订单总额" prop="total_price" />
			<el-table-column type="expand">
				<template #default="props">
					<div style="margin: 20px; color: #ff5500; font-weight: bold">购买详情</div>
					<el-table :data="props.row.book_details" :border="childBorder">
						<el-table-column label="书本编号" prop="id" />
						<el-table-column label="封面" prop="book_cover" />
						<el-table-column label="书名" prop="book_name" />
						<el-table-column label="价格" prop="price" />
						<el-table-column label="介绍" prop="introduction" />
					</el-table>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<style scoped lang="scss">
.my-body {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	.nav-body {
		margin-top: 20px;
		font-size: 16px;
		font-weight: bold;
		width: 1000px;
		display: flex;
		cursor: pointer;
		list-style-type: none;

		li {
			margin-right: 10px;
			width: 109px;
			height: 28px;
			text-align: center;
			border-bottom: 2px solid transparent;
		}
	}
}

.active {
	color: #ff6600;
	border-bottom: 2px solid #ff6600 !important;
}
</style>
