<template>
	<view class="recharge_subgift">
		<view class="recharge_cardBg">
			<image :src="card" class="card" mode="widthFix"> </image>
			<view class="srecharge_surplus">
				<text>{{this.balance/100}}</text>
				<view>消费补贴卡余额(元)</view>
			</view>
		</view>
		<view class="recharge_subgift_detail">
			<view class="recharge_subgift_tit">
				<text>转赠方式</text>
				<view class="recharge_subgift_icon" @click="toSubgiftList"> <text>转赠记录 </text>
					<image :src='rightArrow'></image>
				</view>

			</view>
			<view class="recharge_type">
				<view class="recharge_type_item" v-for="(item,index) in rechargeTypeArr" :key="index"
					@click="tabChange(index)">
					<text>{{item}}</text>
					<text :class="['selectIcon',current==index?'selectActive':'']"></text>
				</view>

			</view>
			<view class="vip_money_content">
				<view class="vip_money" v-show="current">
					<text class="vip_money_detail">输入邀请码</text>
					<u-input :border="typeLine" v-model="codeVal" @blur="ckCode" @change="changeCode"
						:clearable="clearable" class="vip_input" placeholder="请输入接收人邀请码" placeholderClass="placeSty">

					</u-input>
					<text class="code_user" v-show="code_user">用户昵称：{{code_user}}</text>
				</view>
				<view class="vip_money" v-show="!current">
					<text class="vip_money_detail">转赠人数</text>
					<u-input :border="typeLine" v-model="codeNum" @change="changeCode1" type="digit"
						:clearable="clearable" class="vip_input" placeholder="请设置转赠人数" placeholderClass="placeSty">

					</u-input>
				</view>
				<view class="vip_money">
					<text class="vip_money_detail">单个转赠金额(元)</text>
					<u-input :border="typeLine" v-model="amount" @change="changeAmount" :clearable="clearable"
						type="number" class="vip_input" placeholder="请设置单个转赠金额" placeholderClass="placeSty">
					</u-input>
				</view>
				<view class="" v-if="!current">
					共计扣除：{{amount * codeNum}}元
				</view>
				<view class="vip_notice" v-if="!current">
					{{content}}
				</view>
			</view>
		</view>
		<view class="footer_btn" @click="toShowShare" v-if="current">
			确认转赠
		</view>
		<button type="default" open-type="share" class="footer_btn" @tap="shareSubgift" v-if="!current">去分享
		</button>
		<!-- <!- && !isWechat -> -->

		<image :src="shareImg" class="share_img" v-show="qrShow">
			<view class="qr-box">
				<canvas canvas-id="qrcode" style="width: 200rpx;height:200rpx;margin: 0 auto;" />
			</view>
		</image>
		<u-modal :show="show" :title="title" :content='content' :showCancelButton="true" @cancel="cancel"></u-modal>
	</view>
</template>

<script>
	import {
		toCkInvitation,
		toInvitationShare,
		getVipRechargeCode,
		conWalletInfoAPI
	} from "@/request/recharge/index.js";
	import mixin from '@/static/js/mixin/mixin.js'
	import {
		subgiftSharing,
	} from '@/static/js/share.js';
	// import uQRCode from './qrcode.js'

	// import uQRCode from '../../../static/js/qrcode'
	export default {
		mixins: [mixin],
		data() {
			return {
				card: 'https://img.agrimedia.cn/vipCard.png',
				rightArrow: 'https://img.agrimedia.cn/right-arrow.png',
				shareFriends: '/static/shareFriends.png',
				shareMoments: '/static/shareMoments.png',
				amount: '',
				codeVal: "",
				clearable: false,
				typeLine: 'bottom',
				number: 'number',
				digit: "digit",
				rechargeTypeArr: [
					'分享转赠',
					'邀请码转赠'
				],
				current: 0,
				platformType: "",
				isSucess: false, //校验邀请码
				isShowShare: false,
				show: false, //分享确认弹窗
				content: '点击分享按钮，发放金额即进行预扣除！若用户没有在24小时之内领取完成，消费补贴金额将返回您的账户！',
				title: "分享确认",
				balance: "",
				codeNum: '', //转赠人数
				code_sn: "",
				qrShow: false,
				shareImg: 'https://img.agrimedia.cn/shareImg.png',
				code_user: "",
				isWechat: getApp()['globalData']['parameters']['isWechat'],
				fdFlag: null,
				isRecharge: false,
				isShare: false
			};
		},
		methods: {

			//跳转到转赠记录
			toSubgiftList() {
				uni.navigateTo({
					url: '/pages/pages-recharge/subgiftTotal/index'
				});
			},

			tabChange(index) {
				this.current = index
				this.codeVal = ""
				this.amount = ""
				this.isSucess = false
				this.codeNum = ""
			},

			async toShowShare() {
				if (!this.current) {
					if (!this.amount || !this.codeNum) {
						uni.showToast({
							title: '请先输入转赠金额及人数',
							icon: 'none',
							duration: 2000
						})
						return
					}
					await this.getShareCode()

					if (this['globalData']?. ['parameters']?.isWechat) {
						// this.show = true
					} else {
						//  await  this.appShare()
					}

				} else {
					// console.log("呵呵",!this.amount,this.amount,!0)
					if (this.amount==0||this.amount<0) {
						console.log("哈哈")
						uni.showToast({
							title: "请输入正确的转赠金额",
							icon: 'none'
						});
						return

					}
					// this.debounce()
					// if (!this.isRecharge) {
						uni.$u.debounce(this.invitationShare, 1000,true)
						// this.invitationShare()
					// }




				}
			},
			//小程序分享按钮
			// toShare() {
			// 	this.show = false
			// },
			//转赠
			debounce() {
				if (this.fdFlag) {
					clearTimeout(this.fdFlag)
				}
				this.fdFlag = setTimeout(() => {
					this.invitationShare()
					this.fdFlag = null
				}, 1000)
			},


			//获取分享码
			getShareCode() {
				getVipRechargeCode({
					amount: this.regYuanToFen(this.amount, 100),
					num: Number(this.codeNum),
				}).then((res) => {
					if (res) {
						const {
							code,
							data
						} = res
						if (code == 200) {
							this.code_sn = data.code_sn;
							console.log(this.code_sn, 'code_sn');
							if (this.platformType == "android" || this.platformType == "ios") {
								this.makeCode()
							}
						}
					}

				}).catch((error) => {
					// uni.showToast({
					// 	title: error.msg,
					// 	icon: 'none'
					// });
				})
			},


			//邀请码验证
			ckCode() {
				if (!this.codeVal) {
					return
				}
				toCkInvitation({
					invite_code: this.codeVal
				}).then((res) => {
					if (res) {
						const {
							code,
							data
						} = res

						if (code == 200 && data.ck == 1) {
							this.isSucess = true
							this.code_user = data.name
						} else {
							uni.showToast({
								title: "邀请码不存在",
								icon: 'none'
							});
						}
					}

				}).catch((error) => {
					// uni.showToast({
					// 	title: error.msg,
					// 	icon: 'none'
					// });
				})

			},

			//确认转赠
			invitationShare() {
				
				// uni.$u.debounce(()=>{
					
					
				// 	// console.log('觸發');
				// }, 1000,true);
				
				// this.isRecharge = true;
				uni.showLoading({
					title: '转赠中'
				});
				const params = {
					invite_code: this.codeVal,
					amount: this.regYuanToFen(this.amount, 100)
				}
				toInvitationShare({
					...params
				}).then((res) => {
					const {
						code
					} = res
					if (code == 200) {
						this.amount=""
				        this.codeVal=""
						uni.showToast({
							title: "转赠成功",
							icon: 'none',
							duration: 2000

						});
						uni.hideLoading();
						setTimeout(() => {
							uni.navigateBack({})
						}, 2000)

					}
				}).catch((error) => {
				 
					uni.hideLoading();
				})
			},
			//改变邀请码或者手机号
			changeCode(e) {
				this.codeVal = e;
			},
			changeCode1(e) {
				// let reg=/[1-9]\d*$"/
				var reg = /^(0?|-?[1-9]\d*)$/
				console.log(reg.test(e))
				if (!reg.test(e)) {
					this.codeNum = ""
					return
				}
				console.log("wirriworiow")
				// this.codeNum=e
			},

			//改变金额
			changeAmount(e) {
				console.log(e, "88")
			
				this.amount = e;
				this.WXGetCode();
			},
			//取消分享
			cancel() {
				this.show = false;
				this.WXGetCode();
			},


			// 小程序方式获取转赠码
			async WXGetCode() {
				if (getApp()['globalData']['parameters']['isWechat']) {
					const amount = this.regYuanToFen(this.amount, 100);
					const num = Number(this.codeNum);
					if (amount && num) {
						const code = await getVipRechargeCode({
							amount,
							num,
						});
						// 设置微信分享标识
						wx.miniProgram.postMessage({
							data: {
								share_id: 101,
								code_sn: code['data']['code_sn']
							},
						});
					}
				}
			},

			// H5分享二维码转赠
			async shareSubgift() {
			
				uni.$u.debounce(async () => {
					const amount = this.regYuanToFen(this.amount, 100);
					const num = Number(this.codeNum);
					const code = await getVipRechargeCode({
						amount,
						num,
					})
					// debugger
					// uni.navigateTo({
					// 	url: `/pages/pages-recharge/rechargeSubgift/QR_code?code_sn=${code['data']['code_sn']}`
					// })
					// return

					if (this['isWechat']) {
						// 设置微信分享标识
						wx.miniProgram.postMessage({
							data: {
								share_id: 101,
								code_sn: code['data']['code_sn']
							},
						});
						return;
					};

					uni.navigateTo({
						url: `/pages/pages-recharge/rechargeSubgift/QR_code?code_sn=${code['data']['code_sn']}`
					})
				}, 1000, true)



			},
			makeCode() {
				// this.qrShow = true
				// uQRCode.make({
				// 	canvasId: 'qrcode',
				// 	componentInstance: this,
				// 	// text: `/pages/pages-recharge/shareRedEnvelopes/index?code=${this.code_sn}`,
				// 	text:"https://jc.laimaidi.com/mkmk/index.html?bm_yq_code=0614925&code=WCS_4_1672905048146406&H5URL=https://jc.laimaidi.com/privilege/pages/pages-recharge/shareRedEnvelopes/index",
				// 	size: 150,
				// 	margin: 0,
				// 	backgroundColor: '#ffffff',
				// 	foregroundColor: '#000000',
				// 	fileType: 'jpg',
				// 	errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				// 	success: res => {}
				// })
			},
			// 余额剩余
			init() {
				conWalletInfoAPI().then(res => {
					// 获取钱包信息
					this.walletInfo = res['data'];
					if (res) {
						const {
							data,
							code
						} = res
						if (code == 200) {
							this.balance = res?.data?.amount
						}

					}
				}).then(res => {

				}).then(res => {

				})
			},
		},
		onLoad(parameters) {
			this.platformType = uni.getSystemInfoSync().platform
			this.init()
			// this.balance = parameters?.balance;
			// console.log(parameters, "获取手机类型")
		},
		// async onShareAppMessage() {
		// 	// //menu 右上角点击转发
		// 	// if (e.from == 'button') {
		// 	// 	// 点击button按钮分享的
		// 	// 	subgiftSharing({
		// 	// 		code_sn: this.code_sn
		// 	// 	})
		// 	// }
		// 	const code = await getVipRechargeCode({
		// 		amount: this.regYuanToFen(this.amount, 100),
		// 		num: Number(this.codeNum),
		// 	});
		// 	return {
		// 		title: '好友喊你领取消费补贴啦',
		// 		path: `/pages/pages-recharge/shareRedEnvelopes/index?code=${code['data']['code_sn']}`,
		// 		imageUrl: 'https://img.agrimedia.cn/chwl/newsh.jpg',
		// 		desc: "消费补贴卡权益覆盖餐饮、话费、电商、影音娱乐、外卖打车等多种消费场景，消费补贴当钱花，快来领取吧！",
		// 	}
		// },


		//分享到朋友圈 ，只支持部分安卓机型
		// async onShareTimeline() {
		// 	const code = await getVipRechargeCode({
		// 		amount: this.regYuanToFen(this.amount, 100),
		// 		num: Number(this.codeNum),
		// 	});
		// 	return {
		// 		title: '好友喊你领取消费补贴啦',
		// 		path: `/pages/pages-recharge/shareRedEnvelopes/index?code=${code['data']['code_sn']}`,
		// 		imageUrl: 'https://img.agrimedia.cn/chwl/newsh.jpg',
		// 		desc: "消费补贴卡权益覆盖餐饮、话费、电商、影音娱乐、外卖打车等多种消费场景，消费补贴当钱花，快来领取吧！",
		// 	}
		// },



	};
</script>

<style lang="scss" scoped>
	page {
		background: #F8F8F8;
	}

	.share_img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;

		z-index: 2;
	}

	.qr-box {
		width: 200rpx;
		height: 200rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		position: absolute;
		top: 42%;
		right: 68rpx;
		z-index: 3;
	}

	.recharge_subgift {
		background: #F8F8F8;

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

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

		.recharge_cardBg {
			background: #F8F8F8;
			padding: 20rpx 24rpx 0 24rpx;
			position: relative;

			.card {
				border-radius: 0 20rpx 0 0;
				height: 168rpx;
				width: 100%;
			}

			.srecharge_surplus {
				position: absolute;
				left: 60rpx;
				top: 50%;
				transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
				-moz-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
				-o-transform: translateY(-50%);

				text {
					font-size: 44rpx;
					font-family: SourceHanSansCN-Bold, SourceHanSansCN;
					font-weight: bold;
					color: #333333;
				}

				view {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #BAA656;
				}
			}
		}

		.recharge_subgift_detail {
			padding: 20rpx 26rpx;
			box-shadow: 0 -2rpx 6rpx 0 rgba(0, 0, 0, 0.1);
			background: #fff;
			padding-bottom: 214rpx;
			margin-bottom: 290rpx;

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

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
				}

				.recharge_subgift_icon {
					display: flex;

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999
					}

					image {
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
						margin-top: 4rpx;
						margin-left: 8rpx;
					}
				}

			}

			.recharge_type {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.recharge_type_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 50%;
					height: 116rpx;
					line-height: 116rpx;
					border-radius: 20rpx;
					border: 2rpx solid #EDEDED;
					padding-left: 20rpx;
					padding-right: 20rpx;

					text:nth-child(1) {
						font-size: 28rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #666666;
					}

					.selectIcon {
						width: 32rpx;
						height: 32rpx;
						border: 2rpx solid #DEDEDE;
						border-radius: 50%;
					}

					.selectActive {
						border: 1px solid #FF7700;
						position: relative;

						&:after {
							position: absolute;
							content: "";
							width: 18rpx;
							height: 18rpx;
							background: #FF7700;
							left: 6rpx;
							top: 6rpx;
							border-radius: 8rpx;
						}
					}

				}

				.recharge_type_item:nth-child(2) {
					margin-left: 20rpx;
				}
			}

			.vip_money_content {
				.vip_money {
					position: relative;
					margin-top: 24rpx;

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

					.code_user {
						display: block;
						text-align: right;
						color: red;
						font-size: 28rpx;
					}

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

						}
					}

					/deep/ .placeSty {
						text-align: right;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}


				}

				.vip_notice {
					color: red;
					font-size: 28rpx;
					margin-top: 40rpx;
				}
			}

		}

		.footer_btn {
			margin: 0 26rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(90deg, #FFAD02 0%, #FD8F3B 100%);
			border-radius: 20rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}

		.appShare {
			display: flex;
			background: #ffff;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 160rpx;

			.shareItem {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				view {
					margin-top: 20rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
				}

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.shareConfimBg {
			position: fixed;
			background-color: rgba(0, 0, 0, 0.5);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;

			.share_content_total {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: #fff;
				margin-left: 60rpx;
				margin-right: 60rpx;
				padding: 40rpx;
				border-radius: 20rpx;

				.share_content {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					width: 100%;
					margin: 0 80rpx;
				}

				.shareBtn {
					display: flex;
					align-items: center;
					margin-top: 40rpx;

					text {
						font-size: 36rpx;
						margin-left: 80rpx;
						color: #999999;
					}

				}
			}

			uni-button[type=default] {
				background-color: transparent;
				color: #FD8F3B
			}
		}
	}
</style>
