<template>
	<view class="vipMain" :style="{ height: contentHeight }">
		<view class="vipContent" v-if="isShow" :style="{ backgroundImage: 'url(' + dataList.fxGradeCustom.BackImage + ')', backgroundSize: 'cover' }">
			<view class="vipInner" :style="{backgroundColor:dataList.fxGradeCustom.BackColor}">
				<view class="vip_yue">
					<view class="vipIcon"><img :src="dataList.fxGradeCustom.VipICO" alt="" /></view>
					<view>
						<view class="vip_Month">
							<span v-if="month>0">{{ month }}</span>个月
							<text class="vip_yellow">{{ dataList.fxGrade[0].BuyMoney }}</text>
							元
						</view>
					</view>
				</view>
				<button class="my_VipBtn" :class="{'disBtn':month==0}" @click="openImediate">立即开通</button>
				<view class="my_buyRecord"><text @click="goUrl('/pages/share/buyRecord/index')">购买记录</text></view>
			</view>
			<view class="vip_activeRule" @click="showDialog = true">活动规则>></view>
		</view>
		<view class="agreementbox_t" v-if="showDialog == true">
			<view class="agreement_b">
				<view style="height: 40px;line-height: 40px;width:100%;text-align: center;position: relative;">
					活动规则
					<view class="buyVipClose" @click="showDialog = false">×</view>
				</view>
				<view style="width: 100%;height: 660rpx;padding: 20rpx;overflow:scroll;line-height:25px;">
					<Text class="vip_buyRule">{{ dataList.fxGradeCustom.BottomRule }}</Text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: 'vip购买',
				contentHeight: 0,
				mainColor: '',
				secondary: '',
				dataList: {},
				showDialog: false,
				month: 0,
				isShow: false
			};
		},
		onLoad(option) {},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.init();
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = '/' + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync('basedata') ? wx.getStorageSync('basedata').bar_title : [];
			pages.forEach(x => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle
			});
		},
		methods: {
			//初始化信息
			init() {
				uni.showNavigationBarLoading();
				this.request2({
						url: '/api/AppletUser/GetUserVipSettings',
						data: {}
					},
					res => {
						this.isShow = true;
						uni.hideNavigationBarLoading();
						if (res.resultCode == 1) {
							this.dataList = res.data;
							if (this.dataList.fxGrade.length > 0) {
								this.month = this.dataList.fxGrade[0].Year * 12;
							}
						}
					}
				);
			},
			//点击立即开通
			openImediate() {
				if (this.month > 0) {
					var Myobj = this.dataList.fxGrade[0];
					uni.navigateTo({
						url: '/pages/share/buyInterest/index' + '?GradeId=' + Myobj.Id + '&Money=' + Myobj.BuyMoney
					});
				}
			},
			//跳转
			goUrl(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>

<style>
	.vipMain {
		background: #f3f4f6;
	}

	.vip_buyRule {
		word-break: break-all;
		white-space: normal;
	}

	.vipContent {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.vipInner {
		width: 90%;
		height: 170px;
		position: absolute;
		bottom: 70px;
		left: 50%;
		margin-left: -45%;
		border-radius: 4px;
	}

	.vipMain .vip_yue {
		width: 78%;
		margin: 20px auto 10px;
		vertical-align: top;
		display: flex;
		justify-content: space-around;
		flex-wrap: nowrap;
		color: #fff;
	}

	.vipMain .vipIcon {
		width: 50px;
		height: 50px;
	}

	.vipMain .vipIcon img {
		width: 100%;
		height: 100%;
	}

	.vipMain .vip_Month {
		font-size: 26px;
		color: #fff;
	}

	.vipMain .vip_yellow {
		color: #fff100;
		font-size: 36px;
		margin: 0 5px;
	}

	.vipMain .vip_lastDiv {
		font-size: 12px;
		color: #fff;
	}

	.vipMain .my_VipBtn {
		width: 85%;
		height: 40px;
		line-height: 40px;
		border: none;
		margin: auto;
		background-color: #fff100;
		color: #510a63;
		text-align: center;
		border-radius: 20px;
	}

	.vip_activeRule {
		width: 100%;
		position: absolute;
		bottom: 25px;
		text-align: center;
		color: #dd6ada;
	}

	.vipMain .agreementbox_t {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.6);
	}

	.vipMain .agreementbox_t .agreement_b {
		width: 80%;
		border-radius: 10px;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
	}

	.vipMain .agreementbox_t .agreement_bottom {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.vipMain .buyVipClose {
		width: 40px;
		height: 40px;
		position: absolute;
		right: 7px;
		top: 0;
		font-size: 25px;
	}

	.vipMain .my_buyRecord {
		width: 100%;
		text-align: right;
		padding-right: 30px;
		margin-top: 15px;
		color: #fff100;
	}

	.disBtn {
		background-color: gray !important;
		color: #fff !important;
	}
</style>