<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>
