<template>
	<view class="express-return-container">
		<!-- 收件信息卡片 -->
		<view class="recipient-info-card">
			<view class="info-header">收件信息</view>
			<view class="info-content">
				<text class="recipient-name">风电者 18163601305</text>
				<text class="recipient-address">湖南省长沙市岳麓区麓谷街道新长海尖科技园A2栋623</text>
			</view>
			<view class="copy-all-btn" @click="copyAllInfo">
				<text class="btn-text">一键复制全部信息</text>
			</view>
		</view>

		<!-- 列表容器 -->
		<view class="list-container">
			<view class="return-item" v-for="(item, index) in returnList" :key="index" @click="handleItemClick(item)">
				<!-- 左侧图标区域 -->
				<view class="item-left">
					<view class="avatar-placeholder"></view>
				</view>

				<!-- 中间内容区域 -->
				<view class="item-content">
					<view class="content-header">
						<text class="status-label">{{ getStatusText(item.status) }}</text>
					</view>
					<view class="content-body">
						<text class="info-text">订单号：{{ item.orderId || '' }}</text>
						<text class="info-text">快递单号：{{ item.trackingNumber || '待填写' }}</text>
						<text class="info-text">用户电话：{{ item.userPhone || '' }}</text>
					</view>
				</view>

				<!-- 右侧状态标签 -->
				<view class="item-right">
					<view class="status-badge" :class="getStatusClass(item.status)">
						{{ getStatusBadge(item.status) }}
					</view>
				</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, onMounted } from 'vue'
import { getExpressReturnList } from '@/config/api/expressReturn.js'

const returnList = ref([])
const loading = ref(false)
const query = ref({ pageNum: 1, pageSize: 20 })

// 收件信息
const recipientName = '风电者 18163601305'
const recipientAddress = '湖南省长沙市岳麓区麓谷街道新长海尖科技园A2栋623'

const loadList = async () => {
	try {
		loading.value = true
		const res = await getExpressReturnList(query.value)
		if (res && res.code === 200) {
			// 将后端字段映射到前端展示字段
			const rows = (res.data && (res.data.rows || res.data)) || []
			returnList.value = rows.map(r => ({
				id: r.id,
				expressCompany: r.expressCompany || r.company || '待填写',
				trackingNumber: r.logisticsTrackingNumber || r.trackingNumber || '待填写',
				returnAddress: r.returnAddress || r.address || '待填写',
				returnTime: r.expressFillTime || r.createTime || r.returnTime || '待填写',
				packageType: r.packageType || '待填写',
				weight: r.weight || '待填写',
				status: mapStatus(r.status),
				rawStatus: r.status,
				userPhone: r.userPhone,
				orderId: r.orderId,
				remark: r.remark
			}))
		} else {
			throw new Error(res?.msg || '获取列表失败')
		}
	} catch (e) {
		uni.showToast({ title: e.message || '加载失败', icon: 'none' })
	} finally {
		loading.value = false
	}
}

// 状态映射
const mapStatus = (status) => {
	// 文档：0-未填写 1-已填写 2-已取消 3-审批通过 4-审批拒绝 5-订单完成
	if (status === 5) return 'completed'
	if (status === 3 || status === 1) return 'processing'
	if (status === 4 || status === 2 || status === 0) return 'pending'
	return 'pending'
}

const getStatusClass = (status) => ({
	'completed': 'status-completed',
	'processing': 'status-processing',
	'pending': 'status-pending'
}[status] || 'status-pending')

const getStatusText = (status) => ({
	'completed': '暂停计费中',
	'processing': '暂停计费中',
	'pending': '暂停计费中'
}[status] || '暂停计费中')

const getStatusBadge = (status) => ({
	'completed': '已完成',
	'processing': '处理中',
	'pending': '待处理'
}[status] || '待处理')

// 一键复制全部信息
const copyAllInfo = () => {
	const allInfo = `收件人：${recipientName}\n收件地址：${recipientAddress}`
	uni.setClipboardData({
		data: allInfo,
		success: () => {
			uni.showToast({ title: '全部信息已复制', icon: 'success' })
		},
		fail: () => {
			uni.showToast({ title: '复制失败', icon: 'none' })
		}
	})
}

// 点击列表项
const handleItemClick = (item) => {
	console.log('点击了归还记录:', item)
	// 未填写(status=0 -> mapped 'pending')时跳转到补填页，其它跳详情
	if (item && item.rawStatus === 0) {
		uni.navigateTo({ url: `/pages/expressReturn/addExpressReturn?id=${item.id}` })
	} else {
		uni.navigateTo({ url: `/pages/expressReturn/detail?id=${item.id}` })
	}
}

onMounted(loadList)
</script>

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

// 收件信息卡片
.recipient-info-card {
	background: linear-gradient(135deg, #D1FFE1 0%, #B8F5D0 100%);
	border-radius: 16rpx;
	padding: 24rpx 28rpx;
	margin-bottom: 20rpx;
}

.info-header {
	font-size: 28rpx;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 16rpx;
}

.info-content {
	display: flex;
	flex-direction: column;
	margin-bottom: 16rpx;
}

.recipient-name {
	font-size: 30rpx;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 8rpx;
}

.recipient-address {
	font-size: 26rpx;
	color: #333333;
	line-height: 1.6;
}

.copy-all-btn {
	padding: 16rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	text-align: center;
}

.btn-text {
	font-size: 28rpx;
	color: #27ae60;
	font-weight: 500;
}

// 列表容器
.list-container {
	background-color: transparent;
}

.return-item {
	display: flex;
	align-items: flex-start;
	padding: 28rpx 24rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	position: relative;

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

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

// 左侧头像区域
.item-left {
	margin-right: 20rpx;
}

.avatar-placeholder {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #e0e0e0;
}

// 中间内容区域
.item-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

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

.status-label {
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1a1a;
}

.content-body {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.info-text {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.4;
}

// 右侧状态标签
.item-right {
	position: absolute;
	top: 28rpx;
	right: 24rpx;
}

.status-badge {
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 500;
	white-space: nowrap;

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

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

	&.status-pending {
		background-color: #f0f0f0;
		color: #999999;
	}
}

// 空状态
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 40rpx;
}

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

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