<template>
	<!-- 20221101 -->
	<view class="money-recharge-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-20">
			<!-- 充值金额，直接充值 -->
			<view class="padding-lr-40 padding-bottom-10 bg-ff">
				<view class="line-height-100 text-32 text-33">充值金额</view>
				<view class="padding-bottom-10 height-60 flex align-center">
					<view class="text-60">¥</view>
					<input class="flex-one margin-left-15 height-60 text-50" type="number" v-model="money"
						placeholder="请输入金额" placeholder-class="text-50 text-cc" @tap="choose('')">
				</view>
			</view>

			<!-- 充值卡列表 -->
			<view class="margin-top-15 padding-lr-40 padding-top-30 padding-bottom-20 border-bottom-ed bg-ff" v-if="list.length">
				<view class="flex flex-wrap">
					<view v-for="(item,index) in list" :key="index"
						class="card-item margin-bottom-20 margin-right-20 padding-25 radius-10"
						:class="cardIndex === index ? 'active' : ''" v-show="index <= 5 || isCardOpen"
						@tap="choose(index)">
						<view class="text-40 text-bold">¥{{item.price}}</view>
						<view class="margin-top-10 text-26 text-80">赠送¥{{item.give_money}}</view>
					</view>
				</view>

				<view class="flex align-center justify-end" v-if="list.length > 6">
					<view class="flex align-center" @tap="isCardOpen = !isCardOpen">
						<view class="text-26 text-80">{{isCardOpen ? '收起' : '展开'}}</view>
						<text class="tyIcon-xiala1 text-18 text-b3"
							:style="isCardOpen ? 'transform: rotate(180deg);' : ''"></text>
					</view>
				</view>
			</view>

			<!-- 充值按钮 -->
			<view class="margin-40 line-height-90 bg-main-gradient text-center text-32 text-ff radius-45"
				@tap="confirm">
				充值
			</view>

			<!-- 充值说明 -->
			<view class="notice_block margin-lr-40 padding-30 radius-10 text-28 text-4d">
				<text>{{rechargeNotice}}</text>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
			<!-- 订单支付方式 -->
			<ty-layer-pay :show.sync="isPayLayerShow" :pay-money="payMoney" :pay-way="payWay" @pay="pay">
			</ty-layer-pay>
		</view>
	</view>
</template>

<script>
	import money from "./api/money.js"
	export default {
		data() {
			return {
				// 余额充值说明
				rechargeNotice: '',
				// 充值卡列表
				list: {},
				// 充值卡是否展开 true--展开 false--未展开
				isCardOpen: false,
				// 选中充值卡index ''为输入充值金额未选充值卡
				cardIndex: '',
				// 是否显示支付浮层 false--不显示  true--显示
				isPayLayerShow: false,
				// 输入充值金额
				money: '', 
				// 购买方式 1--直接充值 2--购买充值卡
				buyType: 1, 
				// 支付金额
				payMoney: 0.00,
				// 支付方式
				payWay: ['weixin', 'alipay'],
			}
		},

		onShow() {
			// #ifdef H5
			// 是否为跳转H5支付返回
			if (this.cn.userAgent() == 'h5') { //H5环境
				// H5微信支付时，已跳转H5微信支付页面
				if (uni.getStorageSync('hasOpenMwebUrl')) {
					uni.removeStorageSync('hasOpenMwebUrl')
					// 弹窗提示
					this.cn.confirm('请确认支付是否已完成', "已取消支付", "已完成支付").then(res => {
						uni.redirectTo({
							url: '/pages/money/list'
						})
					})
				}
			}
			// #endif
		},

		onReady() {
			// #ifdef H5
			if (this.cn.userAgent() == 'weixin') {
			    // 兼容微信公众号支付路径，避免报错“当前URL未注册”
			    let url = window.location.href
			    if (!url.match(/\?#/)) {
			        location.replace(window.location.href.split('#')[0] + '?' + window.location.hash)
			    }
			}
			// #endif
			
			// 加载充值配置
			this.loadData()
			
			// 加载充值卡列表
			this.loadCardList()
		},

		methods: {
			/** 
			 * 加载充值配置
			 * @date 2022-11-01
			 */
			loadData() {
				money.getRechargeConfig().then(res => {
					this.rechargeNotice = res.data.config.recharge_notice
				})
			},

			/**
			 * 加载充值卡列表
			 * @date 2022-11-01
			 */
			loadCardList() {
				money.listCard().then(res => {
					this.list = res.data.list
				})
			},

			/**
			 * 切换充值卡和输入框
			 * @param {Object} index 0及以上数字为充值卡INDEX 空为输入充值金额未选充值卡
			 * @date 2022-11-01
			 */ 
			choose(index) {
				// 充值卡INDEX
				this.cardIndex = index
				if (index !== '') {
					// 清空充值金额
					this.money = ''
				}
			},

			/**
			 * 点击充值按钮
			 * @date 2022-11-01
			 */
			confirm() {
				console.log(this.cardIndex)
				if (this.cardIndex === ''){
					// 正则校验 最多为2位小数
					let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
					if (!reg.test(this.money) || this.money <= 0) {
						this.cn.toast('请输入正确的充值金额')
						return false
					}
					// 需支付金额
					this.payMoney = this.money
					// 购买方式为1--直接充值
					this.buyType = 1
				} else {
					// 需支付金额
					this.payMoney = this.list[this.cardIndex].price
					// 购买方式为2--购买充值卡
					this.buyType = 2
				}
				// 显示浮层
				this.isPayLayerShow = true
			},

			/**
			 * 提交订单并支付
			 * @param {Object} e
			 * @date 2022-11-01
			 */
			pay(e) {
				// 充值卡ID
				let cardId = this.cardIndex === '' ? '' : this.list[this.cardIndex].id
				
				// 提交订单并支付
				money.insertOrder(this.buyType, this.money, cardId, e.pay_type).then(res => {
					if (res.code == 0) {
						// H5调起支付宝支付
						if (this.cn.userAgent() == 'h5' && e.pay_type == 2) {
							this.rawHtml = res.data.pay_params
							// H5调起微信支付
						} else if (this.cn.userAgent() == 'h5' && e.pay_type == 1) {
							// 关闭支付浮层
							this.isPayLayerShow = false
							// 记录已跳转状态
							uni.setStorageSync('hasOpenMwebUrl', 1)
							// 跳转H5支付
							window.location.href = res.data.pay_params
							// 其他情况
						} else {
							// 1--微信支付 2--支付宝支付
							let payType = e.pay_type
							// 调起支付
							this.cn.requestPayment(res.data.pay_params, payType).then(res => {
								uni.navigateBack({
									delta: 1
								})
							}).catch(res => {
								uni.navigateBack({
									delta: 1
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 充值卡 */
	.card-item {
		width: 325rpx;
		height: 140rpx;
		border: 2rpx solid #e6e6e6;
		background: #fff;
	}

	.card-item:nth-child(2n) {
		margin-right: 0 !important;
	}

	.card-item.active {
		border: 2rpx solid var(--main);
		background: var(--mainLight);
	}

	/* 提示 */
	.notice_block {
		border: 1rpx solid #FBEFC7;
		background: #FFFCF2;
	}
</style>
