<template>
	<view class="container">
		<!-- 空状态提示 -->
		<view v-if="packageList.length === 0 && !loading" class="empty-state">
			<view class="empty-icon">📦</view>
			<view class="empty-title">暂无套餐记录</view>
			<view class="empty-desc">当前账号下暂无套餐历史信息</view>
		</view>

		<!-- 套餐列表 -->
		<view v-else class="card package-card" v-for="(item, index) in packageList" :key="index">
			<view class="package-header flex-row-sb">
				<view class="package-name">{{ item.package_name }}</view>
				<view class="tag-apple" :class="getStatusClass(item.status)">{{ item.status_name }}</view>
			</view>

			<view class="package-info">
				<!-- <view class="info-row flex-row-sb">
					<view class="info-label">套餐类型</view>
					<view class="info-value">{{ item.package_type === 'formal' ? '普通套餐' : '加油包' }}</view>
				</view>
				<view class="info-row flex-row-sb">
					<view class="info-label">使用类型</view>
					<view class="info-value">{{ item.usage_type === 'single_card' ? '单卡' : '设备' }}</view>
				</view> -->
				<view class="info-row flex-row-sb">
					<view class="info-label">激活时间</view>
					<view class="info-value">{{ item.activated_at || '-' }}</view>
				</view>
				<!-- <view class="info-row flex-row-sb">
					<view class="info-label">创建时间</view>
					<view class="info-value">{{ item.created_at }}</view>
				</view> -->
				<view class="info-row flex-row-sb">
					<view class="info-label">到期时间</view>
					<view class="info-value">{{ item.expires_at || '-' }}</view>
				</view>
				<!-- <view class="info-row flex-row-sb">
					<view class="info-label">优先级</view>
					<view class="info-value">{{ item.priority }}</view>
				</view> -->
			</view>

			<view class="divider"></view>

			<view class="flow-info">
				<view class="flow-title">流量信息</view>
				<view class="flow-stats">
					<view class="flow-item">
						<view class="flow-label">已使用</view>
						<view class="flow-value">{{ getUsedFlow(item) }}</view>
					</view>
					<view class="flow-item">
						<view class="flow-label">总流量</view>
						<view class="flow-value">{{ getTotalFlow(item) }}</view>
					</view>
					<view class="flow-item">
						<view class="flow-label">剩余</view>
						<view class="flow-value">{{ getRemainFlow(item) }}</view>
					</view>
				</view>
				<view class="progress-section">
					<view class="progress-apple">
						<view class="progress-fill" :style="{width: getUsagePercent(item) + '%'}"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="packageList.length > 0">
			<text v-if="loading">加载中...</text>
			<text v-else-if="noMore">没有更多了</text>
			<text v-else @tap="loadMore">点击加载更多</text>
		</view>
	</view>
</template>

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

	const userStore = useUserStore();

	let packageList = reactive([]);
	let loading = ref(false);
	let noMore = ref(false);
	let page = ref(1);
	const pageSize = 10;

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

	const formatMB = (mb) => {
		if (!mb && mb !== 0) return '0 MB';
		if (mb >= 1024) {
			return (mb / 1024).toFixed(2) + ' GB';
		}
		return mb.toFixed(2) + ' MB';
	};

	// 获取已使用流量
	const getUsedFlow = (item) => {
		if (item.enable_virtual_data) {
			return formatMB(item.virtual_used_mb || 0);
		} else {
			return formatMB(item.real_used_mb || 0);
		}
	};

	// 获取总流量
	const getTotalFlow = (item) => {
		return formatMB(item.real_total_mb || 0);
	};

	// 获取剩余流量
	const getRemainFlow = (item) => {
		const remain = (item.real_total_mb || 0) - (item.real_used_mb || 0);
		return formatMB(remain);
	};

	// 获取使用百分比
	const getUsagePercent = (item) => {
		const used = item.real_used_mb || 0;
		const total = item.real_total_mb || 0;

		if (!total) return 0;
		return Math.min((used / total) * 100, 100).toFixed(2);
	};

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

	const loadPackageList = async (append = false) => {
		if (loading.value || noMore.value) return;
		loading.value = true;

		try {
			const data = await assetApi.getPackageHistory(
				userStore.state.identifier,
				page.value,
				pageSize
			);

			const newData = (data.items || []).map(item => ({
				...item,
				activated_at: item.activated_at ? formatDate(item.activated_at) : '',
				created_at: formatDate(item.created_at),
				expires_at: item.expires_at ? formatDate(item.expires_at) : ''
			}));

			if (append) {
				packageList.push(...newData);
			} else {
				packageList.splice(0, packageList.length, ...newData);
			}

			if (newData.length < pageSize) {
				noMore.value = true;
			} else {
				page.value++;
			}
		} catch (e) {
			console.error('加载套餐历史失败', e);
		}
		loading.value = false;
	};

	const loadMore = () => {
		if (!noMore.value) {
			loadPackageList(true);
		}
	};

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

<style lang="scss" scoped>
	.container {
		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 120rpx 40rpx;
			min-height: 400rpx;
			.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; }
		}

		.package-card {
			margin-bottom: var(--space-md);
			.package-header {
				margin-bottom: var(--space-md);
				.package-name { font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
			}

			.package-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); }
				}
			}

			.divider {
				height: 1rpx;
				background: var(--gray-200);
				margin: var(--space-md) 0;
			}

			.flow-info {
				.flow-title { font-size: 26rpx; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); }
				.flow-stats {
					display: flex;
					justify-content: space-between;
					margin-bottom: var(--space-sm);
					.flow-item {
						text-align: center;
						.flow-label { font-size: 20rpx; color: var(--text-tertiary); margin-bottom: 4rpx; }
						.flow-value { font-size: 26rpx; font-weight: 600; color: var(--text-primary); }
					}
				}
				.progress-section {
					.progress-apple {
						width: 100%;
						height: 8rpx;
						background: var(--gray-200);
						border-radius: var(--radius-small);
						overflow: hidden;
						.progress-fill {
							height: 100%;
							background: linear-gradient(90deg, var(--primary), var(--primary-light));
							border-radius: var(--radius-small);
						}
					}
				}
			}
		}

		.load-more {
			text-align: center;
			padding: var(--space-lg);
			color: var(--text-tertiary);
			font-size: 24rpx;
		}
	}

	.tag-secondary { background: var(--gray-200) !important; color: var(--gray-600) !important; }
</style>
