<template>
	<view class="graybg">		
		<view class="rrcard">

			<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>{{p}}金币</view>
					</view>
				</view>
<!-- 				<view class="custom">
					<text>￥</text>
					<input type="number" @change="changeMyAmount" v-model="myAmount" placeholder="输入充值金额（只能大于最低金额）" />
				</view> -->
			</view>
		</view>
		
		<view style="padding: 30rpx;font-size: 28rpx;color: #ccc;line-height: 1.6;">
			充值说明：<br/>最终的充值结果，会在 [我的] 页面呈现，如有疑问您可以通过 [我的] - [专属客服] 咨询客服人员，
			充值成功后暂不支持退款。 最终解释权归易佳德咨询。
		</view>
		

		<view class="payBtn" @click="goPay">微信支付</view>
	</view>
	<uni-popup ref="alertPayOk" type="dialog">
		<uni-popup-dialog type="success" confirmText="查看余额" content="充值成功" @confirm="goPath('/usercenter/mycard/mycard')">
		</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(['5', '50', '100', '500', '1000', '1500']);
	const popNotice = ref(false);
	const content = ref('');
	const currUser = uni.getStorageSync('currUser');
	onLoad(() => {
		if(content.value){
			popNotice.value.open()
		}
	})
	onShow(() => {


	});
	function goPath(path) {
		uni.redirectTo({
			url: path
		});
	}

	function goPay() {
		if(amount.value==0){
			uni.showToast({
				icon:'none',
				title:'请选择充值金额'
			})
			return
		}
		api.createOrder({
			total: amount.value,
			payType: 1
		}).then(res => {
			const openId = currUser.openId
			// const openId = 'oRufa4ifoP2I3hnoLAwoAreKkppA'
			api.payForOrder({
				payId: res.data.payId,
				openId: openId
			}).then(Response => {
				wePay(Response.data.weixinData)
			})
		})
	}
	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)
				alertPayOk.value.open()	
			},
			fail(e) {
				console.log(e)
				uni.showToast({
					title: '支付取消',
					icon: 'none'
				});
			}
		})
	}

	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>