<template>
	<view class="express-return-container">
		<!-- 页面标题 -->
		<!-- <view class="page-header">
			<text class="page-title">快递归还</text>
			<text class="page-subtitle">查看您的快递归还记录</text>
		</view> -->

		<!-- 列表容器 -->
		<view class="list-container">
			<view class="return-item" v-for="(item, index) in returnList" :key="index" @click="handleItemClick(item)">
				<!-- 左侧图标 -->
				<view class="item-icon">
					<view class="icon-wrapper" :class="getStatusClass(item.status)">
						<text class="icon-text">{{ getStatusIcon(item.status) }}</text>
					</view>
				</view>

				<!-- 中间内容 -->
				<view class="item-content">
					<view class="item-header">
						<text class="express-company">{{ item.expressCompany }}</text>
						<text class="tracking-number">运单号：{{ item.trackingNumber }}</text>
					</view>
					<view class="item-details">
						<text class="return-address">归还地址：{{ item.returnAddress }}</text>
						<text class="return-time">归还时间：{{ item.returnTime }}</text>
					</view>
					<view class="item-footer">
						<text class="package-info">包裹：{{ item.packageType }} | {{ item.weight }}</text>
					</view>
				</view>

				<!-- 右侧状态 -->
				<view class="item-status">
					<text class="status-text" :class="getStatusClass(item.status)">
						{{ getStatusText(item.status) }}
					</text>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="returnList.length === 0">
			<view class="empty-icon">📦</view>
			<text class="empty-text">暂无归还记录</text>
		</view>
	</view>
</template>

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

	// 模拟数据
	const returnList = ref([{
			id: 1,
			expressCompany: '顺丰速运',
			trackingNumber: 'SF1234567890123',
			returnAddress: '北京市朝阳区建国门外大街1号',
			returnTime: '2024-01-15 14:30:00',
			packageType: '文件',
			weight: '0.5kg',
			status: 'completed'
		},
		{
			id: 2,
			expressCompany: '圆通快递',
			trackingNumber: 'YT9876543210987',
			returnAddress: '上海市浦东新区陆家嘴环路1000号',
			returnTime: '2024-01-14 09:15:00',
			packageType: '电子产品',
			weight: '2.1kg',
			status: 'processing'
		}
	])

	// 获取状态样式类
	const getStatusClass = (status) => {
		const statusMap = {
			'completed': 'status-completed',
			'processing': 'status-processing',
			'pending': 'status-pending'
		}
		return statusMap[status] || 'status-pending'
	}

	// 获取状态图标
	const getStatusIcon = (status) => {
		const iconMap = {
			'completed': '✓',
			'processing': '⏳',
			'pending': '⏸'
		}
		return iconMap[status] || '⏸'
	}

	// 获取状态文本
	const getStatusText = (status) => {
		const textMap = {
			'completed': '已完成',
			'processing': '处理中',
			'pending': '待处理'
		}
		return textMap[status] || '待处理'
	}

	// 点击列表项
	const handleItemClick = (item) => {
		console.log('点击了归还记录:', item)
		// 跳转到详情页面
		uni.navigateTo({
			url: `/pages/expressReturn/detail?id=${item.id}`
		})
	}
</script>

<style lang="scss">
	.express-return-container {
		min-height: 100vh;
		background-color: #f8f9fa;
		padding: 20rpx;
	}

	.page-header {
		margin-bottom: 40rpx;
		padding: 20rpx 0;
	}

	.page-title {
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 10rpx;
	}

	.page-subtitle {
		display: block;
		font-size: 28rpx;
		color: #7f8c8d;
	}

	.list-container {
		background-color: transparent;
	}

	.return-item {
		display: flex;
		align-items: center;
		padding: 30rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: background-color 0.2s ease;

		&:last-child {
			margin-bottom: 0;
		}

		&:active {
			background-color: #f8f9fa;
		}
	}

	.item-icon {
		margin-right: 24rpx;
	}

	.icon-wrapper {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;

		&.status-completed {
			background-color: #e8f5e8;
			color: #27ae60;
		}

		&.status-processing {
			background-color: #fff3cd;
			color: #f39c12;
		}

		&.status-pending {
			background-color: #f8f9fa;
			color: #6c757d;
		}
	}

	.item-content {
		flex: 1;
		margin-right: 20rpx;
	}

	.item-header {
		margin-bottom: 12rpx;
	}

	.express-company {
		display: block;
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 8rpx;
	}

	.tracking-number {
		display: block;
		font-size: 26rpx;
		color: #7f8c8d;
	}

	.item-details {
		margin-bottom: 12rpx;
	}

	.return-address,
	.return-time {
		display: block;
		font-size: 26rpx;
		color: #34495e;
		line-height: 1.5;
		margin-bottom: 6rpx;
	}

	.item-footer {
		margin-top: 8rpx;
	}

	.package-info {
		font-size: 24rpx;
		color: #95a5a6;
	}

	.item-status {
		text-align: right;
	}

	.status-text {
		font-size: 26rpx;
		font-weight: 500;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;

		&.status-completed {
			background-color: #e8f5e8;
			color: #27ae60;
		}

		&.status-processing {
			background-color: #fff3cd;
			color: #f39c12;
		}

		&.status-pending {
			background-color: #f8f9fa;
			color: #6c757d;
		}
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		// background-color: #ffffff;
		// border-radius: 16rpx;
		// box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #7f8c8d;
	}
</style>