<template>
	<view class="arnea_control">
		<!-- 头部模块 -->
		<view class="header">
			<u-navbar :autoBack="true" placeholder leftIconColor="#fff" bgColor="transparent" />
			<view class="nav_list">
				<view class="nav_item" :class="{active: setMeal === 0}" @click="setMeal = 0">激活门店</view>
				<view class="nav_item" :class="{active: setMeal === 1}" @click="setMeal = 1">门店套餐</view>
			</view>
			<view class="userInfo">
				<u-avatar :src="src" size="108rpx"></u-avatar>
				<view class="right">
					<view class="username">CLOOL</view>
					<view class="intro">暂无购买的套餐</view>
				</view>
			</view>
		</view>
		<!-- 购买套餐 -->
		<view class="set_meal">
			<view class="nav_select">
				<view
					v-for="(item, index) in navSelectList"
					:key="index"
					class="nav_select_item"
					:class="{active: current === index}"
					@click="current = index"
				>
					{{ item.name }}
				</view>
			</view>
			<!-- 套餐列表 -->
			<!-- 激活门店套餐 -->
			<PriceList v-show="setMeal === 0" :price-list="priceList" />
			<!-- 门店套餐 -->
			<StoreCard v-show="setMeal === 1" :price-list="priceList" />
			<!-- 支付方式 -->
			<u-cell-group :border="false">
				<u-cell :border="false" iconStyle="color: #04B62F;width: 48rpx;height:48rpx;" :titleStyle="{fontSize: '28rpx',color: '#fff'}" icon="weixin-circle-fill" title="微信支付">
					<u-checkbox-group slot="right-icon">
						<u-checkbox v-model="checked" activeColor="#FFC8A1" shape="circle"></u-checkbox>
					</u-checkbox-group>
				</u-cell>
				<u-cell :border="false" iconStyle="color: #FE9C01;width: 44rpx;height:44rpx;" :titleStyle="{fontSize: '28rpx',color: '#fff'}" icon="rmb-circle-fill" title="余额支付">
					<u-checkbox-group slot="right-icon">
						<u-checkbox v-model="checked" activeColor="#FFC8A1" shape="circle"></u-checkbox>
					</u-checkbox-group>
				</u-cell>
			</u-cell-group>
			<view class="footer">
				<view class="dis-flex flex-y-center flex-x-between">
					<view class="all_price">合计：<text style="color: #FFC8A1;" class="f-w-600 f-40 l-h-48">￥599</text></view>
					<view class="btn">立即购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import PriceList from '@/pages_my/components/priceCard.vue'
	import StoreCard from '@/pages_my/components/StoreCard.vue'
	export default {
		components: { PriceList, StoreCard },
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				navSelectList: [{name: '狼人杀'},{name: '剧本杀'},{name: '密室逃脱'}],
				current: 0,
				setMeal: 0,
				priceList: [
					{ title: '10天', price: 263, oldPrice: 298, relief: 35 },
					{ title: '20天', price: 699, oldPrice: 799, relief: 100 },
					{ title: '30天', price: 1299, oldPrice: 1499, relief: 200 },
					{ title: '60天', price: 2299, oldPrice: 2499, relief: 200 }
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
.arnea_control{
	// 头部模块
	.header{
		background:linear-gradient(to bottom right, rgba(255,225,170,0.4) -300% , #383837);
		padding: 0 30rpx;
		.nav_list{
			display: flex;
			align-items: center;
			margin-top: 32rpx;
			.nav_item{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				font-size: 28rpx;
				line-height: 38rpx;
				color: #999;
				&.active{
					color: #FEC9A3;
					font-size: 32rpx;
					line-height: 42rpx;
					&::after{
						content: '';
						position: absolute;
						bottom: -20rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 8rpx;
						height: 8rpx;
						border-radius: 50%;
						background-color: #FEC9A3;
					}
				}
			}
		}
		.userInfo{
			display: flex;
			height: 288rpx;
			background: url(../../static/myImg/arena-bg.png) no-repeat center;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 34rpx 20rpx;
			margin-top: 48rpx;
			box-sizing: border-box;
			.right{
				height: 108rpx;
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #402200;	
				.username{
					font-size: 32rpx;
					line-height: 48rpx;
					font-weight: 500;
					margin-bottom: 12rpx;
				}
			}
		}
	}
	// 套餐模块
	.set_meal{
		height: calc(100vh - 227rpx);
		background: #111111;
		margin-top: -90rpx;
		.nav_select{
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 82rpx;
			border-bottom: 2rpx solid #666;
			.nav_select_item{
				position: relative;
				font-size: 32rpx;
				color: #fff;
				line-height: 82rpx;
				height: 82rpx;
				&.active{
					color: #FEC9A3;
					&::after{
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 4rpx;
						background: #FEC9A3;
						border-radius: 200rpx;
					}
				}
			}
		}
		.title{
			height: 128rpx;
			line-height: 128rpx;
			color: #3d3d3d;
			font-size: 36rpx;
			font-weight: 500;
		}
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 16rpx 30rpx;
			box-sizing: border-box;
			z-index: 9;
			background-color: #2B2B2B;
			.all_price{
				color: #999;
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.btn{
				width: 260rpx;
				height: 80rpx;
				background: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				color: #333;
				font-size: 28rpx;
				border-radius: 112rpx;
			}
		}
	}
}
</style>