<template>
	<view class="rechargeVip_content" ref="rechargeVip_content">
		<view class="rechargeVip_amount">
			<view class="rechargeVip_tit">超级vip限量</view>
			<view class="vip_money">

				<view class="vip_money_item">
					<text class="vip_money_detail">超级VIP会员</text>
					<u--input :border="typeLine" v-model="value" :clearable="clearable" :type="number" :disabled="true"
						:class="['vip_input2','vip_input']">

					</u--input>
				</view>

				<view class="vip_account"> 购买账户：<text>{{ nickname }}</text></view>
				<view class="vip_number_box">
					<view class="vip_num">购买数量</view>
					<uni-number-box :min='1' :max="1000" v-model="num"></uni-number-box>
				</view>
				<view class="vip_money_item_copies">
					<text>剩余份数：</text>
					<text>{{inventory_num}}</text>
					<!-- <u--input :border="typeLine" v-model="inventory_num" :clearable="clearable" :type="number" :disabled="true"
				:class="['vip_input1','vip_input']">

				</u--input> -->
				</view>
			</view>
		</view>
		<view class="white-box">
			<view class="rich-text">
				<view class="big-777"> 购买说明 </view>
				<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="read">我已阅读并知晓</text>
				<text :class="['greement','greement-supplement']" @click.stop="toAgreement">《补贴卡购买协议》</text>
			</u-checkbox-group>
		</view>
		<view :class="['mt-30']" @click="confirm">
			<!-- <u-button  color="linear-gradient(45deg,#FFAD02,#FD8F3B)" text="确认购买"></u-button> -->
			<view class="recharge_btn">确认购买</view>
		</view>
	</view>
</template>

<script>
	import {
		toVipRecharge,
		getVipInfoAPI,
	} from "@/request/recharge/index.js";
	import mixin from '@/static/js/mixin/mixin.js'
	import vipEquity from '../vipEquity/index.vue'
	export default {
		mixins: [mixin],
		components: {
			vipEquity
		},
		data() {
			return {
				value: '1000',
				clearable: false,
				typeLine: 'bottom',
				num: 1,
				number: "number",
				checked: [],
				html: "",
				nickname: "",
				inventory_num: ""
			};
		},
		methods: {
			// k(val){
			// 	console.log(val)
			//  this.nickname=val
			// },
			changeStatus(value) {
				this.checked = value
			},
			read() {

			},
			confirm() {
				if (!this.checked.length) {
					uni.showToast({
						title: '请先阅读补贴卡购买协议',
						icon: 'none'
					});
					return
				}
				toVipRecharge({
					num: this.num
				}).then((res) => {
					if (res) {
						// const {
						// 	code,
						// 	data
						// } = res;
						const {
							pay_price,
							order_sn,
							type,
							openid
						} = res['data'];
						this.$Payment.H5_Payment({
							pay_price,
							order_sn,
							type,
							openid,
							return_url: `/pages/pages-recharge/success/index?order_sn=${order_sn}`
						});
						// if (code == 200) {
						// 	res['data']['redirect_url'] = '/pages/pages-recharge/success/index';
						// 	this.payment(res['data']);

						// }
					}



				}).catch((error) => {

				})
			},


			//跳转协议
			toAgreement() {
				uni.navigateTo({
					url: `/pages/pages-recharge/rechargeProtocol/index`
				})
			},
			//购买说明	 
			getRule() {
				console.log("呼呼")
				// console.log(,"父组件22")
				getVipInfoAPI().then((res) => {

					if (res) {
						const {
							code,
							data
						} = res
						if (code == 200) {
							this.html = res?.data?.desc
							this.nickname = res["data"]?.["nickname"];
							this.inventory_num = res["data"]?.["inventory_num"];
						}
					}


				}).catch((error) => {

				})
			},


		},
		onLoad(parameters) {
			this.getRule()

			// console.log(this.$refs.vipEquityName.nickname,"几号回家暗示法")
		},

	};
</script>

<style lang="scss" scoped>
	.rechargeVip_content {
		padding: 20rpx 24rpx;

		/deep/ .u-input--square {
			background: #fff !important
		}

		/deep/ .u-border-bottom {
			border-bottom: 2rpx solid #EDEDED;
		}

		.white-box {
			background-color: #fff;
			padding: 16rpx 0 40rpx 0;
		}

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

		.rechargeVip_tit {
			font-size: 56rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			padding-bottom: 86rpx;
		}

		.vip_money {
			.vip_money_item_copies {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;

				color: #666666;
				font-size: 14px;
				font-family: PingFangSC-Semibold, PingFang SC;
				margin-top: 10rpx;

				text:nth-child(1) {
					color: #666666;
				}

				text:nth-child(2) {

					font-weight: 600;
					color: #FF7700;
				}
			}

			.vip_money_item {
				position: relative;
			}

			.vip_money_detail {
				position: absolute;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				display: inline-block;
				top: 36rpx;
				color: #FF7700;
			}

			.vip_input2 {
				// &:after {
				// 	content: '元';
				// 	font-size: 28rpx;
				// 	font-family: PingFangSC-Regular, PingFang SC;
				// 	font-weight: 400;
				// 	color: #333333;
				// 	padding-left: 3rpx;
				// 	padding-top: 10rpx;
				// }
			}

			.vip_input {
				padding-top: 20rpx !important;

				/deep/ .uni-input-input {
					font-size: 52rpx;
					font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
					font-weight: 800;
					color: #333333;
					text-align: right;
					// padding-top: 20rpx!important;

				}


				/deep/ .u-input__content__field-wrapper__field {
					height: 60rpx;
					line-height: 60rpx;
				}
			}

			.vip_input1 {
				&:after {
					content: '份';
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #333333;
					padding-left: 3rpx;
					padding-top: 10rpx;
				}

				/deep/ .uni-input-input {
					font-size: 40rpx;
					font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
					color: #333333;
					text-align: right;
					font-weight: 400 !important;
					// padding-top: 20rpx!important;

				}
			}

			.vip_account {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				padding-top: 10rpx;
				margin-bottom: 20rpx;

				text {
					color: #4D9DF7
				}
			}

			.vip_number_box {
				display: flex;
				justify-content: space-between;

				.vip_num {
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
				}

				.uni-numbox {

					border-radius: 6rpx;
					border: 2rpx solid #999999
				}

				/deep/ .uni-numbox__minus {
					//   width: 44rpx;
					//   height: 44rpx;
					background: #fff !important;
					//   border-radius:  4px;
					border-right: 2rpx solid #999999;

					/deep/ .uni-numbox--text {
						color: rgba(199, 199, 199, 1);
						font-size: 40rpx !important;
						font-weight: 400;

					}
				}

				/deep/ .uni-numbox__plus {
					//   width: 44rpx;
					//   height: 44rpx;
					background: #fff !important;

					border-left: 2rpx solid #999999;

					//   border-top-right-radius: 10rpx;
					/deep/ .uni-numbox--text {
						color: rgba(102, 102, 102, 1);
						font-size: 40rpx !important;
						font-weight: 400;
					}
				}

				/deep/ .uni-numbox__value {
					background-color: transparent !important;
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;

				}

			}
		}

		.vip_notice {
			margin-top: 46rpx;
			min-height: 200rpx;

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

		.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;
			}
		}



		.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;
		}

	}
</style>