<template>
	<view class="main">
		<TopBar title="加入包年计划" :bold="true" />
		<text class="ins_btn" @click="$jump('/pages/monthlyIntroduce/monthlyIntroduce',2)">说明</text>
		<view class="bar">
			<text class="title1">选择您的包年计划</text>
			<text class="title2">/ 选择计划开通时限</text>
		</view>
		<view class="plan_card">
			<view class="card_btn_box">
				<view class="card_btn" v-for="(item, index) in ruleList" :key="index" :class="{act: index=== key}" @click="changeMonth(index)">
					开通{{item.contract_period}}个月
					<!-- <view class="label">最划算</view> -->
				</view>
			</view>
			<view class="card_tips" v-if="tips">
				<text>请根据您{{ruleList[key]['contract_period']}}个月内计划采购总量，选择折扣方案</text>
				<text @click="closeTips">×</text>
			</view>
			<view class="now_plan">
				<text class="left">当前方案：</text>
				<text class="right">
					采购量需≥<text class="amount">{{ruleList[key]['child'][monthKey]['min_quantity']}}</text> 元
				</text>
			</view>
			<view class="overdate">{{overdate}} 到期</view>
			<view class="pre_box">
				<view class="pre_item" v-for="(item, index) in ruleList[key]['child']" :key="index" :class="{act: monthKey === index}" @click="changeDiscount(index)">
					<view class="title1">商品折扣</view>
					<view class="title2">{{Number(item.discount)*10}}折</view>
					<view class="title3">包年计划内商品</view>
					<view class="label" v-if="item.cheap_flg === '1'">最优惠</view>
				</view>
			</view>
		</view>
		<view class="bar">
			<text class="title1">选择押金方案</text>
			<text class="title2">/ 达成计划后将退还押金</text>
		</view>
		<view class="pay_card">
			<view class="title1" v-if="depositKey === '1'">先缴纳押金，可立享即时折扣</view>
			<view class="title1" v-else>0押金，先按原价购买</view>
			<view class="title2" v-if="depositKey === '1'">达成计划：退还押金¥{{Number(ruleList[key]['child'][monthKey]['min_quantity'])*Number(ruleList[key]['child'][monthKey]['deposit'])/100}}</view>
			<view class="title2" v-else>达成计划：满¥{{ruleList[key]['child'][monthKey]['min_quantity']}}按{{Number(ruleList[key]['child'][monthKey]['discount'])*10}}折返现</view>
			<view class="pay_box">
				<view class="pay_item" :class="{act: depositKey === '1'}" @click="changeDeposit('1')">
					<view class="title1">押金：<text>¥{{Number(ruleList[key]['child'][monthKey]['min_quantity'])*Number(ruleList[key]['child'][monthKey]['deposit'])/100}}</text></view>
					<view class="title2">达成计划后退还</view>
				</view>
				<view class="pay_item" :class="{act: depositKey === '0'}" @click="changeDeposit('0')">
					<view class="title1">押金：<text>0</text></view>
					<view class="title2">达成计划后返现</view>
				</view>
			</view>
		</view>
		<view class="bottom_fixed">
			<view class="fixed_top">
				<text class="checked eosfont" v-if="checked" @click="check">&#xe61e;</text>
				<text class="uncheked" v-else @click="check"></text>
				<text>我已阅读</text>
				<text class="contract" @click="previewContract">《谛宝多多包年会员合同》</text>
			</view>
			<view class="fixed_bottom" @click="submit">同意并签署合同</view>
		</view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar.vue';
	import moment from 'moment';
	export default {
		data() {
			return {
				tips: true,
				checked: false,
				ruleList: [{
					child: [
						{contract_period:1, min_quantity:0}
					]
				}],
				key: 0,
				monthKey: 0,
				depositKey: '1', // 1交押金 0不交押金
				month_rule_id: '',
				auth_status: '', // 是否四要素
				overdate: '',
				auth_id: ''
			}
		},
		onLoad() {
			uni.request({
				url:'/uni/api/month_signcontract/MonthRuleList',
				method: 'GET',
				dataType: 'json',
				success: (res) => {
					if(res.data.code === 0) {
						this.ruleList = res.data.data.ruleList;
						this.month_rule_id = res.data.data.ruleList[0]['child'][0]['month_rule_id'];
						this.auth_status = res.data.data.auth_status;
						let month = this.ruleList[0]['contract_period'];
						this.overdate = moment().add(month,'M').format('YYYY.MM.DD');
					}
				}
			});
			uni.request({
				url: '/uni/api/certification/GetRealnameAuth',
				method: 'GET',
				dataType: 'json',
				success: (res) => {
					if(res.data.code === 0) {
						this.auth_id = res.data.data.auth_id;
					}
				}
			});
		},
		methods: {
			closeTips() {
				this.tips = false;
			},
			check() {
				this.checked = !this.checked;
			},
			changeMonth(key) {
				this.key = key;
				this.monthKey = 0;
				this.month_rule_id = this.ruleList[key]['child'][this.monthKey]['month_rule_id'];
				let month = this.ruleList[key]['contract_period'];
				this.overdate = moment().add(month,'M').format('YYYY.MM.DD');
			},
			changeDiscount(key) {
				this.monthKey = key;
				this.month_rule_id = this.ruleList[this.key]['child'][key]['month_rule_id'];
			},
			changeDeposit(key) {
				this.depositKey = key;
			},
			submit() {
				if(!this.checked) {
					uni.showToast({
						title: '请先勾选《谛宝多多包年会员合同》',
						icon: 'none'
					})
					return
				}
				// 是否四要素校验
				if(this.auth_status === '1') {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					uni.request({
						url: '/uni/api/month_signcontract/AddContract',
						method: 'POST',
						dataType: 'json',
						data: {
							is_deposit: this.depositKey,
							month_rule_id: this.month_rule_id
						},
						success:(res) => {
							if(res.data.code === 0) {
								uni.hideLoading();
								uni.showToast({
									title: '合同已签署',
									icon: 'none'
								})
								// 是否交押金
								if(this.depositKey === '1') {
									// 交押金
									setTimeout(() => {
										this.$jump(`/pages/monthlyDeposit/monthlyDeposit?month_apply_id=${res.data.data.month_apply_id}`,2);
									}, 2000);
								} else {
									// 不交押金
									setTimeout(() => {
										this.$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${res.data.data.month_apply_id}`,2);
									}, 2000);
								}
							} else {
								uni.hideToast();
								if(res.data.message.indexOf('未进行授权') !== -1) {
									uni.showToast({
										title: '校验信息已过期，请重新校验',
										icon: 'none'
									});
									setTimeout(() => {
										this.$jump(`/pages/certification/certification?month_rule_id=${this.month_rule_id}&is_deposit=${this.depositKey}&auth_id=${this.auth_id}`,2)
									}, 2000);
								} else {
									uni.showToast({
										title: res.data.message,
										icon: 'none'
									});
								}
							}
						}
					})
				} else {
					this.$jump(`/pages/certification/certification?month_rule_id=${this.month_rule_id}&is_deposit=${this.depositKey}`,2)
				}
			},
			previewContract() {
				uni.showLoading({
					title: '获取合同中'
				});
				uni.request({
					url: '/uni/api/month_signcontract/PreviewContract',
					method: 'POST',
					data: {
						is_deposit: this.depositKey,
						month_rule_id: this.month_rule_id
					},
					dataType: 'json',
					success: (res) => {
						if(res.data.code === 0) {
							uni.hideLoading();
							uni.navigateTo({
							  url: `/pages/web/web?contract_url=${res.data.data.viewUrl}`
							});
						} else {
							uni.hideLoading();
							if(res.data.message.indexOf('未进行授权') !== -1) {
								uni.showToast({
									title: '校验信息已过期，请重新校验',
									icon: 'none'
								});
								setTimeout(() => {
									this.$jump(`/pages/certification/certification?month_rule_id=${this.month_rule_id}&is_deposit=${this.depositKey}&auth_id=${this.auth_id}`,2)
								}, 2000);
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'none'
								});
							}
						}
					}
				})
			}
		},
		components: {
			TopBar
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 80rpx 24rpx  168rpx;
		background-color: #fff;
		.ins_btn {
			font-size: 26rpx;
			color: #000;
			height: 36rpx;
			line-height: 36rpx;
			position: fixed;
			right: 24rpx;
			top: 22rpx;
			z-index: 101;
		}
		.bar {
			height: 98rpx;
			line-height: 98rpx;
			.title1 {
				font-size: 32rpx;
				color: #000;
				height: 44rpx;
				line-height: 44rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
			}
			.title2 {
				color: #7C7C7C;
				font-size: 26rpx;
				height: 36rpx;
				line-height: 36rpx;
				margin-left: 16rpx;
			}
		}
		.plan_card {
			width: 100%;
			border-radius: 20rpx;
			box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.06);
			.card_btn_box {
				height: 82rpx;
				display: flex;
				background:linear-gradient(270deg,rgba(255,251,238,1) 0%,rgba(255,246,217,1) 100%);
				.card_btn {
					text-align: center;
					line-height: 82rpx;
					font-size: 30rpx;
					color: #7B5100;
					flex: 1;
					.label {
						width: 80rpx;
						height: 32rpx;
						line-height: 32rpx;
						text-align: center;
						background: #FF6400;
						border-radius:16rpx 16rpx 16rpx 0px;
						color: #fff;
						font-size: 18rpx;
						position: absolute;
						right: 18rpx;
						top: -10rpx;
					}
				}
				.act {
					background-color: #FFF;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color: #000;
					position: relative;
				}
				.act:after {
					content: '';
					width: 40rpx;
					height: 6rpx;
					background-color: #FF6400;
					border-radius: 3rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -20rpx;
				}
				.card_btn:nth-of-type(1) {
					border-top-right-radius: 16rpx;
				}
				.card_btn:nth-of-type(2) {
					border-bottom-left-radius: 16rpx;
				}
			}
			.card_tips {
				height: 56rpx;
				width: 654rpx;
				border-radius: 8rpx;
				background-color: #2F2E33;
				line-height: 56rpx;
				color: #F3D8A6;
				font-size: 24rpx;
				padding: 0 24rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				margin: 30rpx auto 32rpx;
			}
			.now_plan {
				width: 654rpx;
				height: 44rpx;
				line-height: 44rpx;
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
				.left {
					color: #333;
					font-size: 28rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
				}
				.right {
					font-size: 24rpx;
					.amount {
						font-size: 32rpx;
						color: #B48000;
						font-family:PingFangSC-Semibold,PingFang SC;
						font-weight:600;
						margin: 0 16rpx;
					}
				}
			}
			.overdate {
				font-size: 24rpx;
				color: #7C7C7C;
				height: 34rpx;
				line-height: 34rpx;
				margin: 0 0 32rpx 24rpx;
			}
			.pre_box {
				width: 654rpx;
				display: flex;
				flex-wrap: wrap;
				margin: 0 auto 16rpx;
				.pre_item {
					width: 204rpx;
					height: 200rpx;
					box-sizing: border-box;
					border-radius: 16rpx;
					border: 2rpx solid #ECECEC;
					box-sizing: border-box;
					text-align: center;
					position: relative;
					margin-bottom: 26rpx;
					.label {
						width: 96rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						font-size: 22rpx;
						color: #fff;
						background: #FF6400;
						border-radius:30rpx 20rpx 20rpx 0;
						position: absolute;
						left: 0;
						top: -18rpx;
						z-index: 10;
					}
					.title1 {
						font-size: 28rpx;
						color: #333;
						height: 40rpx;
						line-height: 40rpx;
						font-family:PingFangSC-Semibold,PingFang SC;
						font-weight:600;
						margin-top: 24rpx;
					}
					.title2 {
						color: #CE9300;
						font-size: 36rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-family:PingFangSC-Semibold,PingFang SC;
						font-weight:600;
						margin: 14rpx auto 8rpx;
					}
					.title3 {
						color: #979797;
						font-size: 22rpx;
						height: 32rpx;
						line-height: 32rpx;
					}
				}
				.pre_item:nth-of-type(3n-1) {
					margin: 0 20rpx;
				}
				.act {
					border: 4rpx solid #F2D8A4;
					background-color: #FFFBF3;
					.title3 {
						color: #CE9300;
					}
				}
			}
		}
		.pay_card {
			padding: 24rpx 24rpx 28rpx;
			border-radius: 20rpx;
			box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.07);
			.title1 {
				color: #977035;
				font-size: 28rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
			}
			.title2 {
				color: #979797;
				font-size: 26rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
			.pay_box {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 24rpx;
				.pay_item {
					width: 318rpx;
					height: 120rpx;
					border-radius: 16rpx;
					border: 2px solid #ECECEC;
					text-align: center;
					box-sizing: border-box;
					.title1 {
						color: #333333;
						font-size: 28rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-family:PingFangSC-Semibold,PingFang SC;
						font-weight:600;
						margin-top: 20rpx;
						text {
							color: #FF4A00;
						}
					}
					.title2 {
						margin-top: 8rpx;
						color: #979797;
						font-size: 22rpx;
						height: 32rpx;
						line-height: 22rpx;
					}
				}
				.act {
					border: 4rpx solid #F2D8A4;
					background-color: #FFFBF3;
					.title2 {
						color: #CE9300;
					}
				}
			}
		}
		.bottom_fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 168rpx;
			.fixed_top {
				height: 80rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #000;
				.uncheked {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					background-color: #fff;
					margin: 0 16rpx 0 24rpx;
					display: inline-block;
					box-sizing: border-box;
					border: 1px solid rgba(0,0,0,0.5);
				}
				.checked {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					background-color: #FFCD00;
					display: inline-block;
					text-align: center;
					line-height: 32rpx;
					margin: 0 16rpx 0 24rpx;
				}
				.contract {
					color: #009BFF;
					text-decoration: underline;
				}
			}
			.fixed_bottom {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background-color: #FFCD00;
				font-size: 32rpx;
				color: #000;
			}
		}
	}	
</style>
