<template>
	<view class="container">
		<view v-if="!exchangeData && !loading" class="empty-state">
			<view class="empty-icon">🔄</view>
			<view class="empty-title">暂无换货记录</view>
			<view class="empty-desc">当前账号下暂无设备换货记录</view>
		</view>

		<view v-else-if="exchangeData" class="card exchange-card">
			<view class="exchange-header flex-row-sb">
				<view class="exchange-no">{{ exchangeData?.exchange_no }}</view>
				<view class="tag-apple" :class="getStatusClass(exchangeData?.status)">{{ exchangeData?.status_text }}</view>
			</view>

			<view class="exchange-info">
				<view class="info-row flex-row-sb">
					<view class="info-label">换货原因</view>
					<view class="info-value">{{ exchangeData?.exchange_reason }}</view>
				</view>
				<view class="info-row flex-row-sb">
					<view class="info-label">申请时间</view>
					<view class="info-value">{{ formatTime(exchangeData?.created_at) }}</view>
				</view>
				<view class="info-row flex-row-sb" v-if="exchangeData?.recipient_name">
					<view class="info-label">收件人</view>
					<view class="info-value">{{ exchangeData?.recipient_name }}</view>
				</view>
				<view class="info-row flex-row-sb" v-if="exchangeData?.recipient_phone">
					<view class="info-label">联系电话</view>
					<view class="info-value">{{ exchangeData?.recipient_phone }}</view>
				</view>
				<view class="info-row flex-row-sb" v-if="exchangeData?.recipient_address">
					<view class="info-label">收货地址</view>
					<view class="info-value address-value">{{ exchangeData?.recipient_address }}</view>
				</view>
			</view>

			<view class="exchange-actions" v-if="exchangeData?.status === 1">
				<button class="btn-apple btn-primary" @tap="openPopup">填写信息</button>
			</view>
		</view>

		<up-popup :show="showPopup" mode="center" @close="showPopup=false">
			<view class="popup-content">
				<view class="popup-title">填写换货信息</view>
				<view class="form-item">
					<view class="form-label">收件人姓名</view>
					<up-input placeholder="请输入收件人姓名" border="surround" v-model="form.recipient_name" />
				</view>
				<view class="form-item">
					<view class="form-label">收件人电话</view>
					<up-input placeholder="请输入收件人电话" border="surround" v-model="form.recipient_phone" />
				</view>
				<view class="form-item">
					<view class="form-label">收货地址</view>
					<up-input placeholder="请输入详细收货地址" border="surround" v-model="form.recipient_address" />
				</view>
				<view class="popup-btn-group">
					<button class="btn-apple btn-secondary" @tap="showPopup=false">取消</button>
					<button class="btn-apple btn-primary" @tap="submitExchange">提交</button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue';
	import { exchangeApi } from '@/api/index.js';
	import { useUserStore } from '@/store/index.js';

	const userStore = useUserStore();

	let exchangeData = ref(null);
	let loading = ref(false);
	let showPopup = ref(false);
	let form = reactive({
		recipient_name: '',
		recipient_phone: '',
		recipient_address: ''
	});

	const getStatusClass = (status) => {
		const classMap = {
			1: 'tag-warning',
			2: 'tag-primary',
			3: 'tag-success',
			4: 'tag-success',
			5: 'tag-danger'
		};
		return classMap[status] || '';
	};

	const formatTime = (time) => {
		if (!time) return '-';
		return time.split('T').join(' ').slice(0, 19);
	};

	const loadExchange = async () => {
		loading.value = true;
		try {
			const data = await exchangeApi.getPending(userStore.state.identifier);
			// 接口返回的是单个对象，不是数组
			exchangeData.value = data || null;
		} catch (e) {
			console.error('加载换货记录失败', e);
			exchangeData.value = null;
		}
		loading.value = false;
	};

	const openPopup = () => {
		form.recipient_name = exchangeData?.recipient_name || '';
		form.recipient_phone = exchangeData?.recipient_phone || '';
		form.recipient_address = exchangeData?.recipient_address || '';
		showPopup.value = true;
	};

	const submitExchange = async () => {
		if (!form.recipient_name) {
			uni.showToast({ title: '请输入收件人姓名', icon: 'none' });
			return;
		}
		if (!form.recipient_phone) {
			uni.showToast({ title: '请输入收件人电话', icon: 'none' });
			return;
		}

		// 手机号格式校验
		const phoneReg = /^1[3-9]\d{9}$/;
		if (!phoneReg.test(form.recipient_phone)) {
			uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
			return;
		}

		if (!form.recipient_address) {
			uni.showToast({ title: '请输入收货地址', icon: 'none' });
			return;
		}

		try {
			await exchangeApi.submitShippingInfo(
				exchangeData.value.id,
				form.recipient_name,
				form.recipient_phone,
				form.recipient_address
			);
			uni.showToast({ title: '提交成功', icon: 'success' });
			showPopup.value = false;
			loadExchange();
		} catch (e) {
			console.error('提交换货信息失败', e);
		}
	};

	onMounted(() => {
		loadExchange();
	});
</script>

<style lang="scss" scoped>
	.container {
		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 120rpx 40rpx;
			min-height: 60vh;
			.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
			.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
			.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; margin-bottom: 40rpx; }
			.empty-btn { width: 100%; max-width: 400rpx; }
		}

		.exchange-card {
			.exchange-header {
				margin-bottom: var(--space-md);
				.exchange-no { font-size: 28rpx; font-weight: 600; color: var(--text-primary); }
			}

			.exchange-info {
				.info-row {
					padding: var(--space-xs) 0;
					.info-label { font-size: 24rpx; color: var(--text-tertiary); }
					.info-value { font-size: 24rpx; color: var(--text-primary); }
					.address-value { max-width: 400rpx; text-align: right; }
				}
			}

			.exchange-actions {
				margin-top: var(--space-lg);
				padding-top: var(--space-md);
				border-top: 1rpx solid var(--gray-200);
				.btn-apple { width: 100%; }
			}
		}
	}

	.popup-content {
		width: 600rpx;
		padding: 30rpx;
		.popup-title {
			font-size: 32rpx;
			font-weight: 600;
			color: var(--text-primary);
			text-align: center;
			margin-bottom: var(--space-lg);
		}
		.form-item {
			margin-bottom: var(--space-md);
			.form-label {
				font-size: 26rpx;
				color: var(--text-secondary);
				margin-bottom: var(--space-xs);
			}
		}
		.popup-btn-group {
			display: flex;
			gap: var(--space-md);
			margin-top: var(--space-lg);
			.btn-apple { flex: 1; }
		}
	}
</style>