<template>
	<view class="subscribe-page">
		<view class="banner">
			<view class="banner-head">
				<view class="banner-title-row">
					<view class="banner-icon">
						<text class="iconfont icon-lihe"></text>
					</view>
					<view class="banner-info">
						<view class="banner-title">盲盒订阅</view>
						<view class="banner-desc">每月惊喜，专属香氛体验</view>
					</view>
				</view>

				<view class="banner-meta">
					<view class="meta-item">
						<view class="meta-label">当前等级</view>
						<view class="meta-value">{{ memberInfo.level }}</view>
					</view>
					<view class="meta-item">
						<view class="meta-label">下次配送</view>
						<view class="meta-value">{{ memberInfo.nextDelivery }}</view>
					</view>
					<view class="meta-item unlocked">
						<view class="meta-label">已解锁</view>
						<view class="meta-value">{{ memberInfo.unlocked }}种</view>
					</view>
				</view>
			</view>
			<view class="tab-bar">
				<view
					v-for="tab in tabs"
					:key="tab.key"
					class="tab-item"
					:class="{ active: activeTab === tab.key }"
					@click="switchTab(tab.key)"
				>
					{{ tab.label }}
				</view>
			</view>
		</view>

		<view class="content">
			<view class="membership-card">
				<view class="card-header">
					<view class="card-icon">
						<text class="iconfont icon-xingxing"></text>
					</view>
					<view class="card-title">
						<view class="card-name">{{ plan.name }}</view>
						<view class="card-subtitle">{{ plan.tagline }}</view>
					</view>
					<view class="card-price">
						<view class="current">￥{{ plan.price }}</view>
						<view class="original">￥{{ plan.originalPrice }}</view>
						<view class="discount">{{ plan.discount }}</view>
					</view>
				</view>

				<view class="card-section">
					<view class="section-title">会员权益</view>
					<view class="benefit-list">
						<view
							class="benefit-item"
							v-for="benefit in plan.benefits"
							:key="benefit"
						>
							<view class="indicator"></view>
							<text>{{ benefit }}</text>
						</view>
					</view>
				</view>

				<view class="card-section">
					<view class="section-title">订阅特色</view>
					<view class="feature-tags">
						<view
							class="tag"
							v-for="tag in plan.features"
							:key="tag"
						>
							{{ tag }}
						</view>
					</view>
				</view>

				<view class="card-action">
					<button class="subscribe-button" @click="handleSubscribe">
						立即订阅
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 'plan',
			tabs: [
				{ key: 'plan', label: '订阅计划' },
				{ key: 'scents', label: '香型管理' },
				{ key: 'records', label: '配送记录' },
				{ key: 'settings', label: '订阅设置' }
			],
			memberInfo: {
				level: '品鉴会员',
				nextDelivery: '2025-04-05',
				unlocked: 4
			},
			plan: {
				name: '探索会员',
				tagline: '无门槛',
				price: 99,
				originalPrice: 129,
				discount: '95折',
				benefits: [
					'盲盒95折优惠',
					'月返5%积分',
					'基础客服支持',
					'每月1次退换货',
					'标准配送'
				],
				features: ['4种香型', '基础包装', '标准配送']
			}
		};
	},
	methods: {
		switchTab(key) {
			this.activeTab = key;

			if (key !== 'plan') {
				uni.showToast({
					title: '即将上线，敬请期待',
					icon: 'none'
				});
			}
		},
		handleSubscribe() {
			uni.showToast({
				title: '订阅成功',
				icon: 'success'
			});
		}
	}
};
</script>

<style scoped>
.subscribe-page {
	min-height: 100vh;
	padding: 48rpx 32rpx 80rpx;
	box-sizing: border-box;
	background: linear-gradient(180deg, #fdf2ff 0%, #ffffff 45%, #ffffff 100%);
}

.banner {
	padding: 48rpx 36rpx 32rpx;
	border-radius: 32rpx;
	background: linear-gradient(135deg, #ff3fb4 0%, #8f39ff 100%);
	color: #fff;
	box-shadow: 0 30rpx 50rpx rgba(143, 57, 255, 0.18);
}

.banner-head {
	/* display: flex;
	align-items: center;
	gap: 32rpx; */
}
.banner-title-row {
	display: flex;
	align-items: center;
	gap: 24rpx;
}
.banner-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.16);
	font-size: 60rpx;
	box-shadow: inset 0 10rpx 20rpx rgba(255, 255, 255, 0.2);
	text-align: center;
}
.banner-icon text{
	font-size: 60rpx;
	margin-left: 50%;
}

.banner-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.banner-title {
	font-size: 42rpx;
	font-weight: 600;
}

.banner-desc {
	font-size: 28rpx;
	opacity: 0.85;
}

.banner-meta {
	margin-top: 24rpx;
	display: flex;
	gap: 32rpx;
	justify-content: space-between;
}

.meta-item {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.meta-label {
	font-size: 24rpx;
	opacity: 0.7;
}

.meta-value {
	font-size: 30rpx;
	font-weight: 600;
}

.meta-item.unlocked .meta-value {
	display: flex;
	align-items: baseline;
}

.tab-bar {
	margin-top: 32rpx;
	padding: 4rpx;
	border-radius: 24rpx;
	background: rgba(255, 255, 255, 0.18);
	display: flex;
	gap: 12rpx;
}

.tab-item {
	flex: 1;
	padding: 18rpx 0;
	text-align: center;
	border-radius: 18rpx;
	font-size: 26rpx;
	opacity: 0.85;
	transition: all 0.2s ease-in-out;
}

.tab-item.active {
	background: #fff;
	color: #7b3cff;
	box-shadow: 0 12rpx 20rpx rgba(255, 255, 255, 0.26);
	opacity: 1;
}

.content {
	margin-top: 40rpx;
}

.membership-card {
	background: #fff;
	border-radius: 32rpx;
	padding: 40rpx 36rpx;
	box-shadow: 0 20rpx 40rpx rgba(30, 10, 80, 0.05);
	display: flex;
	flex-direction: column;
	gap: 40rpx;
}

.card-header {
	display: flex;
	align-items: center;
	gap: 28rpx;
}

.card-icon {
	width: 110rpx;
	height: 110rpx;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #ff60e9 0%, #894dff 100%);
	color: #fff;
	font-size: 52rpx;
	box-shadow: 0 20rpx 40rpx rgba(137, 77, 255, 0.25);
}

.card-title {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.card-name {
	font-size: 36rpx;
	font-weight: 600;
	color: #2c2440;
}

.card-subtitle {
	font-size: 26rpx;
	color: #8f87a5;
}

.card-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6rpx;
}

.card-price .current {
	font-size: 40rpx;
	font-weight: 700;
	color: #7b3cff;
}

.card-price .original {
	font-size: 26rpx;
	color: #b4acc8;
	text-decoration: line-through;
}

.card-price .discount {
	font-size: 24rpx;
	color: #7b3cff;
	padding: 8rpx 20rpx;
	border-radius: 16rpx;
	background: rgba(123, 60, 255, 0.1);
}

.card-section {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #30274a;
}

.benefit-list {
	display: flex;
	flex-direction: column;
	gap: 18rpx;
}

.benefit-item {
	display: flex;
	align-items: center;
	gap: 16rpx;
	font-size: 26rpx;
	color: #4a3f63;
}

.benefit-item .indicator {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff62e2 0%, #864dff 100%);
}

.feature-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.feature-tags .tag {
	padding: 14rpx 24rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #7b3cff;
	background: rgba(123, 60, 255, 0.08);
}

.card-action {
	display: flex;
	justify-content: center;
}

.subscribe-button {
	width: 100%;
	height: 96rpx;
	border-radius: 28rpx;
	background: linear-gradient(135deg, #ff47c8 0%, #8547ff 100%);
	color: #fff;
	font-size: 30rpx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 20rpx 40rpx rgba(133, 71, 255, 0.25);
}

.subscribe-button::after {
	border: none;
}
</style>