<template>
	<view>
		<navBar leftText="会员中心"></navBar>
		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
		<view v-if="memberInfo" class="vipC" :style="'margin-top:'+navH+'px;'">
			<view class="vipInfoC relative">
				<image v-if="memberInfo.is_member" class="bg" src="/pagesMine/static/image/vip/vipTopBg.png" mode="widthFix"></image>
				<image v-else class="bg" src="/pagesMine/static/image/vip/noVipTopBg.png" mode="widthFix"></image>
				<view v-if="memberInfo.is_member" class="infoC vip absolute">
					<view class="title">尊贵的{{memberInfo.subscription_type}}VIP会员</view>
					<view class="tips">会员有效期至：{{memberInfo.member_expire_date}}</view>
				</view>
				<view v-else class="infoC absolute">
					<view class="title">价值前沿</view>
					<view class="tips">您还不是会员 加入尊享N项服务</view>
				</view>
			</view>
			<view class="privilegeCompareC relative">
				<view class="titleC flexCenter">
					<image v-if="memberInfo.is_member" class="icon" src="/pagesMine/static/icon/vip/titleLeft_v.png" mode="widthFix"></image>
					<image v-else class="icon" src="/pagesMine/static/icon/vip/titleLeft.png" mode="widthFix"></image>
					<view class="title">特权对比</view>
					<image v-if="memberInfo.is_member" class="icon" src="/pagesMine/static/icon/vip/titleRight_v.png" mode="widthFix"></image>
					<image v-else class="icon" src="/pagesMine/static/icon/vip/titleRight.png" mode="widthFix"></image>
				</view>
				<view :class="'privilegeList '+(memberInfo.is_member?'vip':'')">
					<view class="header flex">
						<view class="privilege item">专属特权</view>
						<view class="item free">普通免费</view>
						<view class="item vip">VIP会员</view>
					</view>
					<view class="list">
						<view class="item flex" v-for="(item,index) in privilegeList" :key="index">
							<view class="optionItem privilege flex">{{item}}</view>
							<view class="optionItem free flexCenter">
								<block v-if="index==0||index==1||index==2">
									<image class="notContain" src="/pagesMine/static/icon/vip/notContain.png" mode="widthFix"></image>
								</block>
								<block v-if="index==3||index==4">
									<block v-if="index==3">限制查看数量</block>
									<block v-if="index==4">每日查看2只</block>
								</block>
								<block v-if="index==5||index==6">
									<image class="contain" src="/pagesMine/static/icon/vip/contain.png" mode="widthFix"></image>
								</block>
							</view>
							<view class="optionItem vip flexCenter">
								<image class="contain" src="/pagesMine/static/icon/vip/contain.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="memberInfo" class="joinVipC fixed" @click="clickJoinVip()">{{memberInfo.is_member?'您已是年度VIP':'立即加入年度VIP'}}</view>
	</view>
</template>

<script>
	import { inject } from 'vue';
	import { membershipStatus } from '@/request/api';
	
	export default {
		data() {
			return {
				navH:inject('navHeight'),
				memberInfo:null,		//会员信息
				privilegeList:['高效选股工具','股票基金明星榜单','定期专属晨报、股票动态','独家产业研报','个股产业分析','股票、基金基础指标','7x24 财经直播']
			}
		},
		onLoad() {
			this.getMemberStatus()
		},
		methods: {
			/**
			 * 点击加入vip
			 */
			clickJoinVip()
			{
				if(!this.memberInfo.is_member)
				{
					//如果不是会员
					uni.showModal({
						content:'请点击下方按钮复制链接并在浏览器中打开以完成会员购买流程',
						showCancel:false,
						confirmText:'复制',
						success(res) {
							if(res.confirm)
							{
								uni.setClipboardData({
									data:"https://valuefrontier.cn/home/pages/account/subscription"
								})
							}
						}
					})
				}
			},
			/**
			 * 获取会员状态
			 */
			getMemberStatus()
			{
				membershipStatus().then(res=>{
					if (res.code==200) {
						this.memberInfo = res.data
					} else 
						uni.showToast({
							title:res.message,
							icon:'none'
						})
				}).catch(error=>{
					
				})
			}
		}
	}
</script>

<style lang="less">
.topBg 
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.vipC
{
	padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
	.vipInfoC
	{
		margin: 0 25rpx;
		.bg 
		{
			width: 100%;
			height: auto;
		}
		.infoC 
		{
			top: 130rpx;
			left: 38rpx;
			.title 
			{
				font-size: 40rpx;
				font-weight: bold;
				color: #556B87;
			}
			.tips 
			{
				font-size: 28rpx;
				font-weight: 500;
				color: #65758A;
			}
		}
		.infoC.vip
		{
			.title
			{
				color: #AB3D1A;
			}
			.tips 
			{
				color: #AB3D1A;
			}
		}
	}
	.privilegeCompareC
	{
		background-color: white;
		margin-top: -70rpx;
		padding-top: 40rpx;
		border-radius: 20rpx 20rpx 0 0;
		.titleC
		{
			.icon  
			{
				width: 54rpx;
				height: auto;
			}
			.title 
			{
				margin: 0 20rpx;
				font-size: 50rpx;
				font-weight: bold;
				color: #222;
			}
		}
		.privilegeList
		{
			margin: 0 25rpx;
			padding: 0 30rpx;
			box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
			border-radius: 10rpx;
			.header
			{
				margin-top: 50rpx;
				padding-top: 14rpx;
				border-bottom: solid 1rpx #F3F4F6;
				.item 
				{
					line-height: 90rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #555;
				}
				.item.privilege
				{
					padding-left: 24rpx;
					width: 300rpx;
				}
				.item.free 
				{
					width: 174rpx;
					text-align: center;
				}
				.item.vip
				{
					width: 160rpx;
					text-align: center;
				}
			}
			.list 
			{
				.item 
				{
					.optionItem
					{
						height: 90rpx;
						border-bottom: solid 1rpx #F3F4F6;
						.contain 
						{
							width: 21rpx;
							height: auto;
						}
						.notContain
						{
							width: 17rpx;
							height: auto;
						}
					}
				}
				.optionItem.privilege 
				{
					width: 300rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #222;
				}
				.optionItem.free 
				{
					width: 174rpx;
					font-size: 20rpx;
					color: #555;
					text-align: center;
				}
				.optionItem.vip
				{
					width: 160rpx;
				}
			}
		}
		.privilegeList.vip 
		{
			box-shadow: 0px 0px 9px 0px rgba(249,115,22,0.4);
		}
	}
}

.joinVipC
{
	background-color: #F97316;
	margin: 0 25rpx;
	left: 0;
	right: 0;
	bottom: calc(20rpx + env(safe-area-inset-bottom));
	line-height: 80rpx;
	border-radius: 20rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: white;
	text-align: center;
}
</style>
