<template>
	<view class="min-body mescroll-safearea">
		<u-gap height="30rpx"></u-gap>
		<view class="white-box">
			<view :class="rechargetype == 0 ? 'nyy' : 'nyy2'">
				<view class="rechargeVip_amount" v-if="rechargetype == 0">
					<view class="subsidy">
						<view class="subsidy_item">
							<text class="subsidy_detail">消费补贴卡面额</text>
							<text class="subsidy-denomination">50/张</text>
						</view>
						<view class="subsidy_number_box">
							<view class="subsidy_num">购买数量</view>
							<uni-number-box :min='1' :max="999" v-model="num"></uni-number-box>
						</view>
					</view>
					<view class="big-999">
						金额：<text style="color: #FF7700">￥{{ num }}</text>
					</view>
				</view>
				<u-input v-model="value" v-else type="text" :customStyle="cts"
					placeholder="请输入卡密"></u-input>
			</view>
			<view class="big-999">
				购买账户：<text style="color: #4e9ef8">{{ nickname }}</text>
			</view>
			<view class="vip_content" v-if="rechargetype== 0">
				<view class="recharge-title"> 套餐购买 </view>
				<image :src="vip" class="vipImg" @click="toRecharge"></image>
			</view>

		</view>
		<u-gap height="30rpx"></u-gap>
		<view v-if="rechargetype == 0" class="white-box">
			<view class="big-777"> 购买说明 </view>
			<view class="rich-text">
				<rich-text :nodes="html"></rich-text>
			</view>
		</view>


		<view class="agreement-content">
			<u-checkbox-group v-model="checked" @change="changeStatus">
				<u-checkbox activeColor="#FFAD02" shape="circle">
				</u-checkbox>
				<text class="greement" @click.stop="">我已阅读并知晓</text>
				<text :class="['greement','greement-supplement']" @click.stop="toAgreement">《补贴卡购买协议》</text>
			</u-checkbox-group>
		</view>
		<view :class="['mt-30']" @click.stop="addNew">
			<!-- <u-button  color="linear-gradient(45deg,#FFAD02,#FD8F3B)" text="确认购买"></u-button> -->
			<view class="recharge_btn">确认{{rechargetype == 0?'购买':'激活'}}</view>
		</view>
	</view>
</template>

<script>
	import {
		userAndRuleAPI,
		quotaRechargeAPI,
		onlineRechargeAPI,
	} from "@/request/recharge/index.js";
	import mixin from '@/static/js/mixin/mixin.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				rechargetype: 0,
				cts: {
					border: "none",
				},
				html: "",
				value: "",
				nickname: "",
				vip: 'https://img.agrimedia.cn/vip.png',
				checked: [],
				// 补贴卡购买数量
				// 价格
				price:1,
				num:1
			};
		},
		methods: {
				//跳转协议
		toAgreement(){
			uni.navigateTo({
					url:`/pages/pages-recharge/rechargeProtocol/index`
				})
		},
			toRecharge() {
				uni.navigateTo({
					url: '/pages/pages-recharge/rechargeVip/index'
				});
			},
			changeStatus() {
				console.log(this.checked, "hhah")
				this.checked = !this.checked
			},
			addNew() {
				console.log(this["rechargetype"]);
				if(!this.checked.length){
					uni.showToast({
							title:'请先阅读补贴卡协议',
							icon:'none'
						});
						return 
				}
				let param;
				if (this["rechargetype"] == 0) {
					param = {amount: this['price'] * this['num']};
					// 二次保险限制最大数量
					if (this['num'] >= 1000) return;
				}else{
					param = {sn: this['value']};
				}
				let fun =
					this["rechargetype"] == 1 ?
					quotaRechargeAPI(param) :
					onlineRechargeAPI(param);

				let _this = this;
				// quotaRechargeAPI 卡密充值
				// onlineRechargeAPI 付费充值
				fun.then((res) => {
					if (this.rechargetype == 0) {
						_this.$Payment.H5_Payment({
							pay_price:res['data']['pay_price'],
							order_sn:res['data']['order_sn'],
							type:res['data']['type'],
							openid:res['data']['openid'],
							return_url:`/pages/pages-recharge/success/index?order_sn=${res['data']['order_sn']}`,
						});
					}
					if (this.rechargetype == 1) {
						uni.showToast({
							title: res['msg']
						});
						setTimeout(() => {
							this.leftClick('/pages/pages-recharge/index/index')
						}, 1500)

					}
				});
			},
			/**
			 * @初始化
			 *
			 */
			init(parameters) {
				// 设置
				// this["rechargetype"] = parameters["rechargetype"] || 0;
				this["rechargetype"] = parameters["rechargetype"] || getApp()['globalData']['parameters']['rechargetype'];
				uni.setNavigationBarTitle({
					title: this["rechargetype"] == 0 ? "购买消费补贴卡" : "卡密激活",
				});
				/**
				 * @获取用户昵称和购买规则
				 */
				userAndRuleAPI().then((res) => {
					this["html"] = res["data"]["rule"];
					this[["nickname"]] = res["data"]["nickname"];
					console.log(this["html"]);
				});
			},
		},
		onLoad(parameters) {
			this.init(parameters);
		},
		// onBackPress(e) {
		// 	console.log(e,'eeeee')
		// 	// closePage();
		// 	if (e.from === 'backbutton') {

		// 		//return true 
		// 		//返回值为true 时,表示不执行默认的返回（默认返回上一页），执行自定义的返回
		// 		//如果要限制必须写成true
		// 		return true;
		// 	}

		// },
	};
</script>

<style lang="scss">
	.white-box {
		background-color: #fff;
		padding: 20rpx;
	}

	.nyy {
		// box-shadow: #ffcc9d 0px 0px 10px inset;
		border-radius: 20rpx;
		padding: 10rpx 0;
		margin-bottom: 20rpx;
	}

	.nyy2 {
		box-shadow: #ddd 0px 0px 10px inset;
		border-radius: 20rpx;
		padding: 10rpx 0;
		margin-bottom: 20rpx;
	}

	.rich-text {
		font-size: 24rpx;
		color: #666;
		padding-top: 30rpx;
	}

	.vipImg {
		height: 142rpx;
	}

	.big-999 {
		margin-bottom: 40rpx;
	}

	.recharge-title {
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.agreement-content {
		display: flex;
		justify-content: center;
		margin-bottom: 10rpx;
		margin-top: 66rpx;

	}

	.greement {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;

		color: #333
	}

	.greement-supplement {
		color: #1E86FE
	}

	.big-777 {
		font-size: 24rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #666666;
	}

	.recharge_btn {
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(90deg, #FFAD02 0%, #FD8F3B 100%);
		border-radius: 20rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		text-align: center;
	}
	.rechargeVip_amount{
		.subsidy_item{
			height: 100rpx;
			display: flex;
			align-items: center;
			    justify-content: space-between;
			.subsidy_detail{
				font-size: 29rpx;
				font-weight: 600;
				color: #FF7700;
			}
			.subsidy-denomination{
				font-weight: 600;
			}
		}
		
		.subsidy_number_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			.subsidy_num{
				font-size: 28rpx;
			}
		}
		
		
	}
	
</style>
