<template>
	<view class="traffic-purchase-wrapper">
		<view v-if="show" class="traffic-purchase-container" style="margin-top: var(--status-bar-height);">
			<!-- 头部 -->
			<view class="header">
				<view class="back-icon" @tap="closePage">
					<u-icon name="arrow-left" color="#333" size="26"></u-icon>
				</view>
				<view class="title">流量采购</view>
				<view class="close-icon" @tap="closePage">
					<u-icon name="close" color="#333" size="24"></u-icon>
				</view>
			</view>
			
			<!-- 本月使用情况 -->
			<view class="usage-card">
				<view class="usage-title">本月流量使用情况
					<text v-if="usageData.packageName" class="package-type">({{usageData.packageName}})</text>
				</view>
				
				<!-- 使用情况加载中 -->
				<view v-if="usageLoading" class="usage-loading">
					<text>加载使用情况...</text>
				</view>
				
				<!-- 使用情况错误 -->
				<view v-else-if="usageError" class="usage-error">
					<text>{{usageError}}</text>
					<button class="retry-button-small" @tap="fetchRemainingFlow">刷新</button>
				</view>
				
				<!-- 使用情况数据 -->
				<template v-else>
					<view class="usage-row">
						<text>流量使用</text>
						<text>{{usageData.totalFlow - usageData.remainingFlow}}/{{usageData.totalFlow}}人</text>
					</view>
					<view class="usage-progress">
						<view class="progress-bar" :style="{width: usageData.flowPercentage + '%'}"></view>
					</view>
					<view class="usage-row">
						<text>剩余有效期</text>
						<text>{{usageData.remainingDays}}天</text>
					</view>
					<view class="usage-date">
						<text>有效期: {{usageData.startTime}} ~ {{usageData.expireTime}}</text>
					</view>
				</template>
			</view>
			
			<!-- 使用警告 -->
			<view v-if="usageData.flowPercentage > 70 && !usageLoading && !usageError" class="warning-box">
				<view class="warning-icon">
					<text class="iconfont icon-warning" style="color: #fff; font-size: 14px;"></text>
				</view>
				<view class="warning-content">
					<view class="warning-title">流量即将用完</view>
					<view class="warning-text">本月流量仅剩{{usageData.remainingFlow}}人，建议购买流量包以保证业务连续性</view>
				</view>
			</view>
			
			<!-- 套餐选择 -->
			<view class="section-title">选择流量套餐</view>
			
			<!-- 加载状态 -->
			<view v-if="loading" class="loading-container">
				<image src="/static/loading.gif" mode="aspectFit" class="loading-image"></image>
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 错误提示 -->
			<view v-else-if="error" class="error-container">
				<image src="/static/error.png" mode="aspectFit" class="error-image"></image>
				<text class="error-text">{{error}}</text>
				<button class="retry-button" @tap="fetchFlowPackages">重试</button>
			</view>
			
			<!-- 使用v-for循环渲染流量包 -->
			<view 
				v-else
				v-for="item in packages" 
				:key="item.id" 
				class="package-card"
				@tap="openPackageDetail(item)"
			>
				<view class="package-header">
					<view class="package-left">
						<view class="package-icon" :style="{backgroundColor: item.iconColor}">
							<text class="iconfont" :class="item.iconClass" style="color: #0080ff; font-size: 24px;"></text>
						</view>
						<view class="package-info">
							<view class="package-name">
								{{item.name}}
								<text v-if="item.specialTag" class="special-tag">{{item.specialTag}}</text>
							</view>
							<view class="package-price">
								<text class="current-price">¥{{item.price}}</text>
								<text class="original-price" v-if="item.originalPrice !== item.price">¥{{item.originalPrice}}</text>
							</view>
							<view class="package-specs">{{item.specs}}</view>
						</view>
					</view>
					<view class="discount-tag">{{item.discount}}</view>
				</view>
			</view>
		</view>
		
		<!-- 流量包详情页面 -->
		<package-detail 
			:show="showPackageDetail" 
			:package-data="currentPackage" 
			@close="closePackageDetail"
			@buy-success="handleBuySuccess"
		></package-detail>
	</view>
</template>

<script>
	import PackageDetail from './PackageDetail.vue';
	import { trafficApi } from '../api/modules/traffic';
	
	export default {
		name: 'TrafficPurchase',
		components: {
			'package-detail': PackageDetail
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 流量包数据
				packages: [],
				// 流量包详情页面
				showPackageDetail: false,
				// 当前选中的流量包
				currentPackage: null,
				// 加载状态
				loading: false,
				// 错误信息
				error: null,
				// 本月使用情况数据
				usageData: {
					packageName: '',
					remainingFlow: 0,
					totalFlow: 0,
					flowPercentage: 0,
					remainingDays: 0,
					totalDays: 0,
					timePercentage: 0,
					expireTime: '',
					startTime: ''
				},
				// 本月使用情况加载状态
				usageLoading: false,
				// 本月使用情况错误信息
				usageError: null
			}
		},
		watch: {
			show(newVal) {
				if (newVal) {
					this.fetchFlowPackages();
					this.fetchRemainingFlow();
				}
			}
		},
		methods: {
			closePage() {
				this.$emit('close');
			},
			// 打开流量包详情
			openPackageDetail(packageData) {
				this.currentPackage = packageData;
				this.showPackageDetail = true;
			},
			// 关闭流量包详情
			closePackageDetail() {
				this.showPackageDetail = false;
			},
			// 获取流量包数据
			async fetchFlowPackages() {
				if (this.loading) return;
				
				this.loading = true;
				this.error = null;
				
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				
				try {
					const response = await trafficApi.getFlowPackages();
					
					if (response.code === 200) {
						// 处理返回的数据
						this.packages = response.data.map(item => ({
							id: item.id,
							name: item.name,
							price: parseFloat(item.price),
							originalPrice: parseFloat(item.originalPrice),
							specs: `${item.monthlyFlow}人/月·${item.duration}个月`,
							iconClass: this.getIconClass(item.tag),
							iconColor: '#ecf5ff',
							discount: item.discount,
							specialTag: item.tag,
							details: [
								{ label: '每月流量', value: `${item.monthlyFlow}人/月` },
								{ label: '套餐时长', value: `${item.duration}个月` },
								{ label: '总流量', value: `${item.totalFlow}人` }
							],
							privileges: item.privileges
						}));
					} else {
						this.error = response.msg || '获取数据失败';
					}
				} catch (err) {
					this.error = '获取流量包数据失败，请稍后重试';
					console.error('获取流量包数据错误:', err);
				} finally {
					this.loading = false;
					uni.hideLoading();
				}
			},
			// 根据标签获取对应的图标类名
			getIconClass(tag) {
				const iconMap = {
					'入门级': 'icon-shujutongji',
					'热销': 'icon-shuju',
					'尊享': 'icon-data'
				};
				return iconMap[tag] || 'icon-shujutongji';
			},
			// 获取本月流量使用情况
			async fetchRemainingFlow() {
				if (this.usageLoading) return;
				
				this.usageLoading = true;
				this.usageError = null;
				
				try {
					const response = await trafficApi.getRemainingFlow();
					
					if (response.code === 200) {
						this.usageData = response.data;
					} else {
						this.usageError = response.msg || '获取使用情况失败';
						console.error('获取使用情况失败:', response.msg);
					}
				} catch (err) {
					this.usageError = '获取使用情况失败，请稍后重试';
					console.error('获取使用情况错误:', err);
				} finally {
					this.usageLoading = false;
				}
			},
			// 处理购买成功事件
			handleBuySuccess() {
				// 刷新流量使用情况和套餐列表
				this.fetchRemainingFlow();
				this.fetchFlowPackages();
				
				// 提示购买成功
				uni.showToast({
					title: '购买成功，流量已更新',
					icon: 'success',
					duration: 2000
				});
			}
		}
	}
</script>

<style lang="scss">
	.traffic-purchase-container {
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: #f5f7fa;
		z-index: 10000;
		overflow-y: auto;
		transform-origin: right;
		animation: slideInFromRight 0.3s ease;
	}
	
	@keyframes slideInFromRight {
		from {
			transform: translateX(100%);
		}
		to {
			transform: translateX(0);
		}
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 15px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		position: sticky;
		top: 0;
		z-index: 1;
	}
	
	.back-icon {
		width: 60px;
		font-size: 15px;
		color: #333;
	}
	
	.back-text {
		font-weight: 500;
	}
	
	.title {
		font-size: 17px;
		font-weight: 500;
		flex: 1;
		text-align: center;
	}
	
	.close-icon {
		width: 60px;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		padding-right: 10px;
	}
	
	.usage-card {
		margin: 15px;
		padding: 15px;
		background-color: #ecf5ff;
		border-radius: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
		border: 1px solid #d4e8ff;
	}
	
	.usage-title {
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 15px;
		
		.package-type {
			font-size: 14px;
			color: #0080ff;
			font-weight: normal;
			margin-left: 5px;
		}
	}
	
	.usage-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-size: 14px;
		color: #333;
	}
	
	.usage-progress {
		height: 10px;
		background-color: #f0f0f0;
		border-radius: 5px;
		margin: 10px 0 15px;
		overflow: hidden;
	}
	
	.progress-bar {
		height: 100%;
		background-color: #0080ff;
		border-radius: 5px;
	}
	
	.warning-box {
		margin: 15px;
		padding: 12px 15px;
		background-color: #fff9e6;
		border-radius: 8px;
		display: flex;
		align-items: center;
	}
	
	.warning-icon {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #ff9900;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
		flex-shrink: 0;
	}
	
	.warning-content {
		flex: 1;
	}
	
	.warning-title {
		font-size: 14px;
		font-weight: 500;
		color: #ff9900;
		margin-bottom: 5px;
	}
	
	.warning-text {
		font-size: 12px;
		color: #666;
		line-height: 1.5;
	}
	
	.section-title {
		margin: 20px 15px 10px;
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}
	
	.package-card {
		margin: 10px 15px;
		background-color: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
		border: 1px solid #e6f4ff;
		position: relative;
		transition: all 0.2s ease;
	}
	
	.package-card:hover {
		background-color: #f8faff;
	}
	
	.package-header {
		padding: 18px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.package-left {
		display: flex;
		align-items: center;
	}
	
	.package-icon {
		width: 45px;
		height: 45px;
		background-color: #f0f7ff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 12px;
		font-size: 18px;
	}
	
	.package-info {
		display: flex;
		flex-direction: column;
	}
	
	.package-name {
		font-size: 15px;
		font-weight: 500;
		color: #333;
		margin-bottom: 4px;
		display: flex;
		align-items: center;
	}
	
	.package-price {
		display: flex;
		align-items: baseline;
		margin-bottom: 4px;
	}
	
	.current-price {
		font-size: 22px;
		font-weight: bold;
		color: #0080ff;
	}
	
	.original-price {
		font-size: 15px;
		color: #999;
		text-decoration: line-through;
		margin-left: 8px;
	}
	
	.package-specs {
		font-size: 12px;
		color: #666;
	}
	
	.original-tag {
		position: relative;
		display: inline-block;
		margin-left: 8px;
		padding: 2px 6px;
		background-color: #f5f5f5;
		border-radius: 4px;
		font-size: 14px;
		color: #666;
		font-weight: 500;
	}
	
	.discount-tag {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		padding:0 20px;
		height: 30px;
		background-color: #e6f4ff;
		color: #0080ff;
		border-radius: 30px;
		font-size: 16px;
		font-weight: 500;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.special-tag {
		background-color: #BFDBFE;
		color: #3152B8;
		padding: 2px 6px;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 500;
		margin-left: 8px;
	}
	
	.traffic-purchase-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		
		.loading-image {
			width: 60rpx;
			height: 60rpx;
		}
		
		.loading-text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.error-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		
		.error-image {
			width: 80rpx;
			height: 80rpx;
		}
		
		.error-text {
			margin: 20rpx 0;
			font-size: 28rpx;
			color: #ff4d4f;
		}
		
		.retry-button {
			margin-top: 20rpx;
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #2979ff;
			border-radius: 8rpx;
		}
	}
	
	.usage-loading {
		text-align: center;
		color: #666;
		font-size: 14px;
		margin-bottom: 10px;
	}
	
	.usage-error {
		text-align: center;
		color: #ff4d4f;
		font-size: 14px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.retry-button-small {
		margin-top: 10px;
		padding: 4px 15px;
		font-size: 14px;
		color: #fff;
		background-color: #2979ff;
		border-radius: 4px;
		display: inline-block;
		line-height: 1.5;
	}
	
	.usage-date {
		font-size: 12px;
		color: #666;
		margin-top: 10px;
		text-align: right;
	}
</style> 