<template>
	<view class="express-detail-container">
		<!-- 状态卡片 -->
		<view class="status-card">
			<view class="status-header">
				<view class="status-icon" :class="getStatusClass(detailData.status)">
					<text class="icon-text">{{ getStatusIcon(detailData.status) }}</text>
				</view>
				<view class="status-info">
					<text class="status-title">{{ getStatusText(detailData.status) }}</text>
					<text class="status-desc">{{ getStatusDesc(detailData.status) }}</text>
				</view>
			</view>
		</view>

		<!-- 快递信息卡片 -->
		<view class="info-card">
			<view class="card-title">
				<text class="title-text">快递信息</text>
			</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">快递公司</text>
					<text class="value">{{ detailData.expressCompany }}</text>
				</view>
				<view class="info-item">
					<text class="label">运单号</text>
					<text class="value tracking-number">{{ detailData.trackingNumber }}</text>
				</view>
				<view class="info-item">
					<text class="label">包裹类型</text>
					<text class="value">{{ detailData.packageType }}</text>
				</view>
				<view class="info-item">
					<text class="label">包裹重量</text>
					<text class="value">{{ detailData.weight }}</text>
				</view>
			</view>
		</view>

		<!-- 归还信息卡片 -->
		<view class="info-card">
			<view class="card-title">
				<text class="title-text">归还信息</text>
			</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">归还地址</text>
					<text class="value address">{{ detailData.returnAddress }}</text>
				</view>
				<view class="info-item">
					<text class="label">归还时间</text>
					<text class="value">{{ detailData.returnTime }}</text>
				</view>
				<view class="info-item">
					<text class="label">处理时间</text>
					<text class="value">{{ detailData.processTime || '--' }}</text>
				</view>
				<view class="info-item">
					<text class="label">完成时间</text>
					<text class="value">{{ detailData.completeTime || '--' }}</text>
				</view>
			</view>
		</view>

		<!-- 备注信息卡片 -->
		<view class="info-card" v-if="detailData.remark">
			<view class="card-title">
				<text class="title-text">备注信息</text>
			</view>
			<view class="remark-content">
				<text class="remark-text">{{ detailData.remark }}</text>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="action-btn primary" @click="handleCopyTracking">
				<text class="btn-text">复制运单号</text>
			</button>
			<button class="action-btn secondary" @click="handleContactService">
				<text class="btn-text">联系客服</text>
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getExpressReturnDetail } from '@/config/api/expressReturn.js'

// 详情数据
const detailData = ref({
    id: '',
    expressCompany: '-',
    trackingNumber: '-',
    returnAddress: '-',
    returnTime: '-',
    processTime: '-',
    completeTime: '-',
    packageType: '-',
    weight: '-',
    status: 'pending',
    remark: ''
})

// 获取状态样式类
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 getStatusDesc = (status) => {
	const descMap = {
		'completed': '您的快递已成功归还',
		'processing': '正在处理您的归还请求',
		'pending': '等待处理归还申请'
	}
	return descMap[status] || '等待处理归还申请'
}

// 复制运单号
const handleCopyTracking = () => {
	uni.setClipboardData({
		data: detailData.value.trackingNumber,
		success: () => {
			uni.showToast({
				title: '运单号已复制',
				icon: 'success'
			})
		}
	})
}

// 联系客服
const handleContactService = () => {
	uni.showModal({
		title: '联系客服',
		content: '客服电话：400-123-4567\n工作时间：9:00-18:00',
		confirmText: '拨打',
		cancelText: '取消',
		success: (res) => {
			if (res.confirm) {
				uni.makePhoneCall({
					phoneNumber: '400-123-4567'
				})
			}
		}
	})
}

// 页面加载时获取详情数据
onMounted(async () => {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const options = currentPage.options || {}
    if (!options.id) return
    try {
        uni.showLoading({ title: '加载中' })
        const res = await getExpressReturnDetail(options.id)
        if (res && res.code === 200 && res.data) {
            const r = res.data
            detailData.value = {
                id: r.id,
                expressCompany: r.expressCompany || r.company || '-',
                trackingNumber: r.logisticsTrackingNumber || r.trackingNumber || '-',
                returnAddress: r.returnAddress || r.address || '-',
                returnTime: r.createTime || r.returnTime || '-',
                processTime: r.processTime || '-',
                completeTime: r.completeTime || '-',
                packageType: r.packageType || '-',
                weight: r.weight || '-',
                status: mapStatus(r.status),
                remark: r.remark || ''
            }
        } else {
            throw new Error(res?.msg || '获取详情失败')
        }
    } catch (e) {
        uni.showToast({ title: e.message || '加载失败', icon: 'none' })
    } finally {
        uni.hideLoading()
    }
})

// 状态映射
const mapStatus = (status) => {
    if (status === 5) return 'completed'
    if (status === 3 || status === 1) return 'processing'
    if (status === 4 || status === 2 || status === 0) return 'pending'
    return 'pending'
}
</script>

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

.status-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 40rpx 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.status-header {
	display: flex;
	align-items: center;
}

.status-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
	font-weight: bold;
	margin-right: 24rpx;

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

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

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

.status-info {
	flex: 1;
}

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

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

.info-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-title {
	margin-bottom: 24rpx;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid #f1f3f4;
}

.title-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #2c3e50;
}

.info-list {
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f8f9fa;

		&:last-child {
			border-bottom: none;
		}
	}
}

.label {
	font-size: 28rpx;
	color: #7f8c8d;
	min-width: 160rpx;
}

.value {
	font-size: 28rpx;
	color: #2c3e50;
	flex: 1;
	text-align: right;

	&.tracking-number {
		font-family: 'Courier New', monospace;
		font-weight: 500;
	}

	&.address {
		text-align: right;
		line-height: 1.4;
	}
}

.remark-content {
	padding: 16rpx 0;
}

.remark-text {
	font-size: 28rpx;
	color: #34495e;
	line-height: 1.5;
}

.action-buttons {
	display: flex;
	gap: 20rpx;
	margin-top: 40rpx;
	padding: 0 20rpx;
}

.action-btn {
	flex: 1;
	height: 88rpx;
	border-radius: 44rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: 500;
	transition: all 0.2s ease;

	&.primary {
		background-color: #1976D2;
		color: #ffffff;

		&:active {
			background-color: #1565C0;
		}
	}

	&.secondary {
		background-color: #ffffff;
		color: #1976D2;
		border: 2rpx solid #1976D2;

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

.btn-text {
	font-size: 32rpx;
	font-weight: 500;
}
</style> 