<template>
	<s-layout title="订单记录" class="record-list-page">
		<view class="page-wrap">
			<scroll-view class="list" scroll-y>
				<view class="order-card" v-for="order in orders" :key="order.id">
					<!-- 收入 -->
					<view class="card-top">
						<text class="income">本单收入 {{ order.income }}元</text>
					</view>

					<!-- 分割线 -->
					<view class="divider"></view>

					<!-- 内容头 -->
					<view class="card-header">
						<view class="left">
							<text class="label">订单号：</text>
							<text class="order-no">{{ order.orderNo }}</text>
						</view>
						<text class="status">{{ order.statusText }}</text>
					</view>

					<!-- 可能的提示 -->
					<view v-if="order.notice" class="notice-orange">
						{{ order.notice }}
					</view>

					<!-- 地址信息 -->
					<view class="card-body">
						<!-- 起点 -->
						<view class="addr-row">
							<text class="distance">{{ order.pickDistance }}</text>
							<view class="addr-content">
								<text class="place-title">{{ order.pickName }}</text>
								<text class="place-addr">{{ order.pickAddr }}</text>
							</view>
						</view>

						<!-- 终点 -->
						<view class="addr-row to">
							<text class="distance">{{ order.deliverDistance }}</text>
							<view class="addr-content">
								<text class="place-title">{{ order.deliverName }}</text>
								<text class="place-addr">{{ order.deliverAddr }}</text>
							</view>
						</view>
					</view>

					<!-- 底部信息 -->
					<view class="card-footer">
						<text class="customer">{{ order.customer }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</s-layout>
</template>

<script setup>
import { ref } from 'vue';

// 静态示例数据，后续可对接接口
const orders = ref([
	{
		id: 1,
		income: '12.5',
		orderNo: '2021021115544',
		statusText: '已完成',
		notice: '',
		pickDistance: '873m',
		pickName: '乐易购-学院站',
		pickAddr: '广东省广州市天河区学院站荷光路',
		deliverDistance: '1.2km',
		deliverName: '广东省广州市天河区**********',
		deliverAddr: '张氏（先生） 屋号1254',
		customer: '',
	},
	{
		id: 2,
		income: '12.5',
		orderNo: '2021021115545',
		statusText: '顾客取消订单',
		notice: '提示：已取餐订单，顾客退款不影响配送费结算',
		pickDistance: '873m',
		pickName: '乐易购-学院站',
		pickAddr: '广东省广州市天河区学院站荷光路',
		deliverDistance: '1.2km',
		deliverName: '广东省广州市天河区**********',
		deliverAddr: '张氏（先生） 屋号1254',
		customer: '',
	},
	{
		id: 3,
		income: '12.5',
		orderNo: '2021021115546',
		statusText: '顾客取消订单',
		notice: '',
		pickDistance: '873m',
		pickName: '乐易购-学院站',
		pickAddr: '广东省广州市天河区学院站荷光路',
		deliverDistance: '1.2km',
		deliverName: '广东省广州市天河区**********',
		deliverAddr: '张氏（先生） 屋号1254',
		customer: '',
	},
]);
</script>

<style lang="scss" scoped>
.page-wrap {
	padding: 16px;
	background: transparent;
}
.list {
	min-height: 200px;
}
.order-card {
	background: #fff;
	border-radius: 8px;
	margin-bottom: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.card-top {
	padding: 10px 14px;
}
.income {
	color: #e74c3c;
	font-weight: 600;
}
.divider {
	height: 1px;
	background: #eee;
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
}
.card-header .left {
	display: flex;
	align-items: center;
}
.label {
	color: #666;
	font-size: 13px;
	margin-right: 6px;
}
.order-no {
	color: #222;
	font-weight: 600;
}
.status {
	color: #999;
	font-size: 13px;
}
.notice-orange {
	background: #f3a23a;
	color: #fff;
	padding: 8px 12px;
	margin: 6px 14px;
	border-radius: 4px;
	font-size: 12px;
}
.card-body {
	padding: 10px 14px 6px;
}
.addr-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 8px;
}
.addr-row.to {
	margin-top: 8px;
}
.distance {
	color: #999;
	width: 42px;
	font-size: 12px;
}
.addr-content {
	flex: 1;
}
.place-title {
	display: block;
	font-weight: 700;
	color: #222;
	margin-bottom: 6px;
}
.place-addr {
	color: #999;
	font-size: 13px;
}
.card-footer {
	padding: 10px 14px 14px;
	color: #999;
	font-size: 13px;
}
</style>