<template>
	<view class="graybg">		
		<view class="rrcard">
			<view class="t">充值账号</view>
			<view class="box">
				<view class="custom"><input v-model="telNo" placeholder="请输入手机号" /></view>
			</view>
		</view>
		<view class="rrcard">
			<view class="t">会员姓名</view>
			<view class="box">
				<view class="custom"><input v-model="userName" placeholder="请输入会员姓名" /></view>
			</view>
		</view>
		<view class="rrcard">
			<view class="t">充值金额</view>
			<view class="box">
				<view class="plist">
					<view v-for="(p,index) in priceList" :key="index" :class="isActive == index ? 'active' : ''"
						@click="changePrice(p, index)">
						￥<text>{{p}}</text>
					</view>
				</view>
				<view class="custom">
					<text>￥</text>
					<input type="number" @change="changeMyAmount" v-model="myAmount" placeholder="输入充值金额（只能大于最低金额）" />
				</view>
			</view>
		</view>
		<view class="rrcard" v-if="card.isVip">
			<view class="t">会员卡</view>

			<view class="vipBox">
				<image class="fm" :src="vTypeImg"></image>
				<image class="vv" src="/static/vip.png"></image>
				<view class="poInfo">
					<view class="flexline">
						<view class="typeStr">{{ card.vipInfo.name }}</view>
						<view class="cardCode">{{ card.info.cardCode }}</view>
					</view>
					<view class="flexline mt40">
						<view class="ye">
							余额(元)
							<text>{{ card.info.balance }}</text>
						</view>

						<view class="zk">
							折扣
							<view>
								<text>{{ (100 - card.info.discountPercent) / 10 }}</text>
								折
							</view>
						</view>
					</view>
				</view>

				<view class="cardBottom">
					<text>有效期至{{ card.info.expirationTime }}</text>
				</view>
			</view>
		</view>

		<view class="rrcard">
			<view class="t">支付方式</view>
			<view class="whitebg">
				<radio-group @change="payChange">
					<label class="uni-list-cell uni-list-cell-pd">
						<view>微信支付</view>
						<view>
							<radio checked="checked" />
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="payBtn" @click="goPay" v-if="card.isVip">立即支付</view>
		<view class="payBtn" @click="goPay" v-else>立即充值成为会员</view>
	</view>
	<uni-popup ref="alertPayOk" type="dialog">
		<uni-popup-dialog type="success" confirmText="查看会员卡" content="充值成功" @confirm="goCardDetail">
		</uni-popup-dialog>
	</uni-popup>
	<view v-if="popNotice" class="popContent">
		<view class="textbody">
			<!-- 充值提示 -->
			<view class="h3">充值提示</view>
			<view class="texts">{{content}}</view>
			<view class="button" @click="closepopNotice">我已知晓</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import * as api from '@/common/api.js';
	const app = getApp();
	const vTypeImg = ref('/static/v1.png');
	const card = ref({});
	// const projectList = ref([]);
	// const projectArr = ref([]);
	const orderId = ref('');
	const telNo = ref('');
	const userName = ref('');
	const alertPayOk = ref(null);
	const isActive = ref(null);
	const amount = ref(0);
	const myAmount = ref(null);
	const priceList = ref(['500', '1000', '2000', '3000', '5000', '10000']);
	const popNotice = ref(false);
	const content = ref('');
	
	onLoad(() => {
		content.value = app.globalData.venue.rechargeNotice
		popNotice.value = true
	})

	onShow(() => {
		// api.listCanUse().then(res => {
		// 	projectList.value = res.rows
		// 	for (var p of projectList.value) {
		// 		projectArr.value.push({
		// 			value: p.projectId,
		// 			text: p.projectName
		// 		})
		// 	}
		// })
		api.getOwnMemberInfo().then(res => {
			card.value = res.data;
			if (card.value.isVip) {
				telNo.value = card.value.info.memberTelno
				userName.value = card.value.info.memberName
			} else {
				telNo.value = uni.getStorageSync('currUser').realTelno
				userName.value = ""
			}
		});

	});
	function closepopNotice(){
		popNotice.value = false
	}
	function goPay() {
		if (!telNo.value) {
			uni.showToast({
				title: `请填写充值手机号`,
				icon: 'none'
			});
			return
		}
		if (!userName.value) {
			uni.showToast({
				title: `请填写姓名`,
				icon: 'none'
			});
			return
		}
		if (myAmount.value) {
			amount.value = myAmount.value
		}
		if (amount.value == 0) {
			uni.showToast({
				title: `请选择或填写充值金额`,
				icon: 'none'
			});
			return
		}
		api.getMemberLevelTip(telNo.value,amount.value).then(res=>{
			console.log(res)
			if(res.data.name != card.value.vipInfo.name){
				if(res.data.discountPercent<card.value.vipInfo.discountPercent){
					var changeDis = "降级"
				} else {
					var changeDis = "升级"
				}
				uni.showModal({
					title: '温馨提示',
					content: `充值成功后，您将${changeDis}为${res.data.name}，新的会员折扣为${(100-res.data.discountPercent)/10}折`,
					success: function (res) {
						if (res.confirm) {
							goRecharge()
						} else if (res.cancel) {
							console.log('取消充值');
						}
					}
				})
			}else{
				goRecharge()
			}
		})

	}
	function goRecharge(){
		const currUser = uni.getStorageSync('currUser');
		api.rechargeCard({
			telNo: telNo.value,
			amount: amount.value,
			userName: userName.value
		}).then(res => {
			wePay(res.data.weixinData)
			orderId.value = res.data.orderId
		})
	}
	
	function wePay(configdata) {
		console.log(configdata)
		// 微信支付
		uni.requestPayment({
			"provider": "wxpay",
			"appId": configdata.appId,
			"nonceStr": configdata.nonceStr,
			"package": configdata.packageValue, // 随机字符串
			"timeStamp": configdata.timeStamp, // 时间戳（单位：秒）
			"signType": configdata.signType, // 签名，这里用的 MD5/RSA 签名
			"paySign": configdata.paySign,
			success(res) {
				// 支付成功跳转订单详情
				console.log(res)
				api.maRechargeConfirm({
					orderId: orderId.value,
					successFlag:true
				}).then(response => {
					console.log(response)
				})
				alertPayOk.value.open()	
			},
			fail(e) {
				console.log(e)
				uni.showToast({
					title: '支付取消',
					icon: 'none'
				});
				api.maRechargeConfirm({
					orderId: orderId.value,
					successFlag:false
				}).then(response => {
					console.log(response)
				})
			}
		})
	}

	function goCardDetail() {
		uni.redirectTo({
			url: `/pages/usercenter/mycard/mycard`
		})
	}

	function changePrice(item, index) {
		if (isActive.value == index) {
			isActive.value = null
			amount.value = 0
		} else {
			isActive.value = index
			amount.value = item
		}

		myAmount.value = null
	}

	function changeMyAmount(val) {
		if (myAmount.value) {
			isActive.value = -1
		}
	}

	function bindPickerChange(e) {
		console.log(e)
		projectId.value = e
	}
</script>

<style scoped>
	.graybg {
		background: #f7f8fa;
		height: 100vh;
		padding: 0 0 100rpx;
		width: 100vw;
		overflow: auto;
	}

	.whitebg {
		background: #fff;
		margin-top: 15rpx;
		border-radius: 20rpx;
		margin-bottom: 90rpx;
	}
	.payBtn {
		width: 750rpx;
		line-height: 90rpx;
		height: 120rpx;
		text-align: center;
		background: #ff8124;
		color: #ffffff;
		font-size: 36rpx;
		border-radius: 20rpx 20rpx 0px 0px;
		position: fixed;
		bottom: 0;
	}
	.uni-list-cell::after {display: none;}
	.button{ width: 120rpx; margin: 20rpx auto;  font-size: 24rpx;  color: #fff;   background: linear-gradient(90deg, #00C176, #3ed89b);  padding: 6rpx 15rpx;text-align: center; border-radius: 6rpx;}
	.popContent{background:#fff; height: auto; position: fixed; width: 80vw; max-height: 50vh;   top: 20%; left: 0; right: 0;    border-radius: 10rpx;margin: auto;z-index: 99;    box-shadow: 0 0 0 100vh rgba(0,0,0,0.4);}
	.textbody{padding: 40rpx;}
	.textbody .h3{ text-align: center;font-size: 32rpx;}
	.textbody .texts{ overflow: auto;  line-height: 1.6;    text-indent: 2em;    color: #666;    max-height: 30vh;  text-align: justify;   margin: 20rpx 0 0;  font-size: 28rpx;}

</style>