<template>
	<view class="body-container">
		<swiper indicator-dots style="height: 120rpx;" autoplay indicator-active-color="#fff">
			<swiper-item>
				<image src="/static/images/banner_1.png" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/banner_2.png" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
		</swiper>
		<!-- 充值金额输入 -->
		<view class="card-box sum-input-box">
			<view class="mt-20">充值金额</view>
			<view class="sum-input mt-20">
				<text style="font-size: 12px;margin-bottom: 6px;">¥</text>
				<input class="input-money" type="digit" placeholder-style="font-size:23px;" placeholder="请输入金额"
					@input="obMoney" :value="payMoney" />
			</view>
			<scroll-view scroll-x class="mt-20">
				<view class="list-tabs">
					<block v-for="(item,index) in paySumOptions" :key="index">
						<view :class="currentTab==index? 'tab-select' :'tab-normal'" class="item-margin"
							@click="doChangePayMoney" :data-value="item" :data-index="index">
							<text>{{item}}</text>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 付款方式 -->
		<view class="card-box">
			<view>付款方式</view>
			<radio-group class="form-radio_wrap">
				<view class="pay-option-item mt-20" @click="doChangePayWay" data-value="1">
					<view class="option-type">
						<view class="icon icon-wechat"></view>
						<view>微信支付</view>
					</view>
					<radio color="#FFA900" style="transform:scale(0.8)" :checked="payWay==1" value="1"></radio>
				</view>
				<view class="pay-option-item" @click="doChangePayWay" data-value="2">
					<view class="option-type">
						<view class="icon icon-card"></view>
						<view>对公转账</view>
					</view>
					<radio color="#FFA900" style="transform:scale(0.8)" :checked="payWay==2" value="2"></radio>
				</view>
			</radio-group>
		</view>
		<!-- 套餐包 -->
		<view class="card-box">
			<view class="bag-box">
				<view :class="currentBagTab=='MATERIAL'?'bag-select':'bag-normal'" class="border-left"
					@click="doChangeBagTab" data-value="MATERIAL">写材料套餐包</view>
				<view :class="currentBagTab=='ALL'?'bag-select':'bag-normal'" class="border-right"
					@click="doChangeBagTab" data-value="ALL">全托管套餐包</view>
			</view>
			<ContainerLoading style="min-height: 40vh;" :loadingVisible="listLoading" @doRefresh="doRefreshList">
				<view class="bag-list" style="min-height: 40vh;">
					<!-- 列表 -->
					<block v-for="(item,index) in bagList" :key="index">
						<view class="bag-item">
							<view class="bag-item-title-box">
								<view class="p-title">{{item.packageName}}</view>
								<view class="sum">{{item.packageMoney/100}}</view>
							</view>
							<view class="bag-item-desc-box">
								<view class="desc">{{item.packageDescription}}</view>
								<view class="btn" @click="chooseBag" :data-value="item">选购</view>
							</view>
						</view>
					</block>
				</view>
			</ContainerLoading>
		</view>
		<view class="bottom-btn-box">
			<view class="green-bottom-btn" @click="doPay">确认充值</view>
		</view>
	</view>
	<view>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import ContainerLoading from '@/components/container-loading.vue';
	import PayService from '../../../static/utils/net/payApi.js';
	export default {
		components: {
			ContainerLoading
		},
		data() {
			return {
				paySumOptions: [100, 300, 500, 1000, 2000, 5000],
				currentTab: 0, //充值金额选项
				payMoney: 100, //支付金额
				currentBagTab: 'MATERIAL', //当前套餐包tab
				bagList: [], //套餐包列表
				payWay: 1, //支付方式  1微信   2对公
				showError: false,
				errorHint: '',
				showSuccess: false,
				successHint: '',
				listLoading: 'loading',
				selectBag: {}, //选中的套餐包
				msgType: 'info',
				msgTxt: '',
			}
		},
		onLoad() {
			const _self = this
			uni.setNavigationBarTitle({
				title: 'AI喵著'
			})
			uni.setNavigationBarColor({
				frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
				backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
				animation: { // 可选项
					duration: 500,
					timingFunc: 'easeIn'
				}
			})
			_self.doGetPackageList(_self.currentBagTab)
		},
		methods: {
			doRefreshList() {
				this.doGetPackageList(this.currentBagTab)
			},
			//获取可以购买的套餐包
			doGetPackageList(path) {
				const _self = this
				_self.listLoading = 'loading'
				const data = {
					page: 1,
					rows: 20
				}
				PayService.doGetBuyPackageList(path, data)
					.then(res => {
						console.log(res)
						_self.listLoading = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						_self.bagList = res.rows
					})
					.catch(err => {
						console.log(err)
						_self.listLoading = 'error'
						_self.msgType = 'error'
						_self.msgTxt = '不好意思，没能获取到套餐数据。请您再试一次，相信马上就能看到啦。'
						_self.$refs.msg.open()
					})
			},
			//监听充值金额选项
			doChangePayMoney(e) {
				this.payMoney = e.currentTarget.dataset.value
				this.selectBag = {}
				this.currentTab = e.currentTarget.dataset.index
			},
			//监听充值金额变化
			obMoney(e) {
				var _self = this
				const inputValue = e.detail.value
				const regex = /^[+-]?(\d+(\.\d*)?|\.\d+)$/;
				if (inputValue != '') {
					if (regex.test(inputValue)) {
						//数字
						_self.payMoney = e.detail.value
						_self.selectBag = {}
						_self.currentTab = -1
					} else {
						_self.msgTxt = '请输入数字'
						_self.msgType = 'error'
						_self.$refs.msg.open()
						setTimeout(() => {
							_self.payMoney = 100
							_self.selectBag = {}
						}, 1000);
					}
				}
			},
			//切换套餐包
			doChangeBagTab(e) {
				this.currentBagTab = e.currentTarget.dataset.value
				this.doGetPackageList(this.currentBagTab)
			},
			//切换支付方式
			doChangePayWay(e) {
				this.payWay = e.currentTarget.dataset.value
			},
			//选中套餐包
			chooseBag(e) {
				const _self = this
				const selItem = e.currentTarget.dataset.value
				_self.payMoney = selItem.packageMoney / 100
				_self.currentTab = -1
				_self.selectBag = selItem
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			//调用微信支付
			toWeChatPay() {
				const _self = this
				uni.showLoading({
					title: '支付中...',
				})
				const data = {
					rechargeMoney: _self.payMoney,
					packageInfoId: _self.selectBag.packageInfoId ? _self.selectBag.packageInfoId : ''
				}
				PayService.doGetWxPayParams(data)
					.then(res => {
						uni.hideLoading()
						if (res && res.paySign && res.paySign != '') {
							uni.requestPayment({
								provider: 'wxpay',
								nonceStr: res.nonceStr,
								package: `prepay_id=${res.prepayId}`,
								paySign: res.paySign,
								timeStamp: res.timeStamp + '',
								signType: 'RSA',
								success: res => {
									if (res.errMsg && res.errMsg == 'requestPayment:ok') {
										_self.msgTxt = '恭喜，您的充值已成功到账！'
										_self.msgType = 'success'
										_self.$refs.msg.open()
										setTimeout(() => {
											uni.navigateBack()
										}, 2000);
									} else {
										_self.msgTxt = '很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
										_self.msgType = 'error'
										_self.$refs.msg.open()
									}
								},
								fail: err => {
									var hint = '很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
									if (err && err.errMsg && err.errMsg == 'requestPayment:fail cancel') {
										//主动取消
										hint = '本次支付已被您主动取消。若您改变主意，重新支付流程很便捷哦。'
									}
									_self.msgTxt = hint
									_self.msgType = 'error'
									_self.$refs.msg.open()
								}
							})
						} else {
							_self.msgType = 'error'
							_self.msgTxt = err.msg ? err.msg : '很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
							_self.$refs.msg.open()
						}
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgType = 'error'
						_self.msgTxt = err.msg ? err.msg : '很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
						_self.$refs.msg.open()
					})
			},
			//去支付
			doPay() {
				const _self = this
				//判断钱大于0
				if (_self.payMoney > 0) {
					if (_self.payWay == '1') {
						//微信
						_self.toWeChatPay()
					} else {
						//对公 需要传递参数 选中套餐 or 直接冲钱
						const id = _self.selectBag.packageInfoId
						const name = _self.selectBag.packageName
						uni.redirectTo({
							url: `/pages/pay/publicPay/publicPay?packageId=${id}&name=${name}&money=${_self.payMoney}`,
						})
					}
				} else {
					//显示输入金额提示
					_self.msgTxt = '请输入要充值的金额'
					_self.msgType = 'error'
					_self.$refs.msg.open()
				}
			}
		}
	}
</script>

<style>
	.input-money {
		font-size: 48rpx;
		font-weight: bold;
		height: 24px;
		line-height: 24px;
		text-align: left;
	}

	.input-money-placeholder {
		font-size: 24px;
		font-weight: bold;
		height: 24px;
		line-height: 24px;
		text-align: left;
	}

	.card-box {
		margin-top: 20rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		background-color: white;
		border: 1rpx solid #F5F5F5;
	}

	.sum-input-box {
		font-size: 28rpx;
	}

	.sum-input-box .title {
		font-size: 12px;
		color: black;
	}

	.sum-input-box input {
		font-size: 42rpx;
		color: black;
		padding: 20rpx 10rpx;
		flex: 1;
	}

	.sum-input {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: baseline;
		border-bottom: 1rpx solid #dbdada;
		font-weight: bold;
	}

	.pay-option-item {
		display: flex;
		flex-direction: row;
	}

	.pay-option-item .option-type {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		margin: 20rpx 0rpx;
	}

	.option-type .icon {
		width: 48rpx;
		height: 48rpx;
		padding-right: 20rpx;
	}

	.list-tabs {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.bag-box {
		display: flex;
		flex-direction: row;
		font-size: 28rpx;
	}

	.bag-select {
		flex: 1;
		text-align: center;
		background-color: #FFA900;
		color: white;
		padding: 20rpx;
	}

	.bag-normal {
		flex: 1;
		text-align: center;
		background-color: #FFFFFF;
		color: #FFA900;
		border: 1rpx solid #FFA900;
		padding: 20rpx;
	}

	.tab-select {
		font-size: 20rpx;
		color: black;
		background-color: #FAE9D0;
		text-align: center;
		padding: 5rpx 30rpx;
		white-space: nowrap;
	}


	.item-margin {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.item-margin:nth-of-type(n+2) {
		margin-left: 20rpx;
	}

	.tab-normal {
		font-size: 20rpx;
		color: #F4CC92;
		background: #FFFFFF;
		border: 1rpx solid #F4CC92;
		text-align: center;
		padding: 5rpx 30rpx;
		white-space: nowrap;
	}

	.bottom-btn-box {
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
		width: 100vw;
		line-height: 100rpx;
		border-radius: 20rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 80px;
	}

	.green-bottom-btn {
		background-color: #37AD46;
		color: white;
		text-align: center;
		height: 42px;
		width: 90vw;
		line-height: 42px;
		border-radius: 20rpx;
		margin-bottom: 20px;
	}


	.green-bottom-btn:active {
		background-color: #7ef58e;
		color: white;
	}

	.bag-list {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-bottom: 110rpx;
		width: 86vw;
	}

	.bag-item {
		display: flex;
		flex-direction: column;
		border: 1rpx solid rgba(239, 239, 239, 1);
		padding: 20rpx;
	}

	.bag-item:nth-of-type(n+2) {
		border-top: none;
		border-left: 1rpx solid rgba(239, 239, 239, 1);
		border-right: 1rpx solid rgba(239, 239, 239, 1);
		border-bottom: 1rpx solid rgba(239, 239, 239, 1);
	}

	.bag-item-title-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.p-title {
		font-size: 14px;
		font-weight: 800;
		color: black;
	}

	.bag-item-title-box .title {
		font-size: 40rpx;
		color: black;
		font-weight: 500;
	}

	.bag-item-title-box .sum {
		font-size: 14px;
		color: black;
		font-weight: 400;
	}

	.bag-item-title-box .sum::before {
		content: "¥";
		font-size: 24rpx;
		color: black;
		font-weight: 400;
	}

	.bag-item-desc-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 2px;
	}

	.bag-item-desc-box .desc {
		font-size: 28rpx;
		color: #363636;
	}

	.bag-item-desc-box .btn {
		padding: 1px 15px;
		color: white;
		border-radius: 47px;
		background-color: rgba(255, 198, 125, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 14px;
		text-align: center;
		font-family: PingFangSC-regular;
	}
</style>