<template>
	<view style="padding-bottom: 160rpx">
		<!-- <fu-custom :isBack="true" :isBottom="true" bgColor="cu-theme" backColor="text-white">
			<block slot="content"><text class="text-white">充值</text></block>
		</fu-custom> -->
		<!-- 选择金额 start -->
		<!-- <view class="cz_cont"> -->
			<!-- <view class="flex text-center mt32 pb16" style="border-bottom: 1px solid #FFFFFF;">
				<view v-for="(item, index) in navList" :key="index" class="cu-item flex-sub " :class="{ cur: tabCurrentIndex === index }" @click="tabClick(index)">
					{{ item.text || '' }}
					<view class="active-line"></view>
				</view>
			</view> -->
			<!-- <text class="tx_money  " style="color: #333333;" v-if="tabCurrentIndex == 0">
				充值金额
			</text>
			<view class="item_main" v-if="tabCurrentIndex == 0">
				<view class="list" :class="act_type == index ? 'act' : ''" @click="get_money(item, index)" :data-index="index" v-for="(item, index) in moneyData" :key="index">
					<text class="add_money">
						{{ item.money }}
						<text class="fs24">{{ i18n['元'] }}</text>
					</text>
          <image v-if="act_type == index " src="/static/my/checkmoney.png" mode=""></image>
				</view>
			</view> -->

			<!-- <view style="margin-top: 48rpx; padding: 0 24rpx;" v-if="tabCurrentIndex == '1'">
				<view class="fs32 text-blod font-d8">{{ i18n['卡号'] }}</view>
				<input
					type="number"
					value=""
					class="fs32 font-cc"
					style="height: 100rpx; border-bottom: 1px solid #FFFFFF;"
					placeholder-class="text-pr-lp"
					@input="handleChange"
					:placeholder="i18n['请输入礼品卡号']"
					v-model="change_money"
				/>
				<view class="flex text-999 fs24" style="flex-flow: column; padding: 40rpx 0;">
					<text>{{ i18n['温馨提示'] }}：</text>
					<text style="margin-top: 8rpx;">{{ '礼品卡充值成功之后不可退回，文字后台可设定' }}</text>
				</view>
			</view> -->
		<!-- </view> -->
		<!-- 选择金额 end -->

		<!-- 充值信息 start -->
		<view class="tx_cont" v-if="tabCurrentIndex == 0">
			<text class="tx_money">
				<!-- <image style="width: 6rpx; height: 28rpx; margin-right: 24rpx;" src="/static/my/zuobian.png"></image> -->
				自定输入金额
			</text>
			<view class="tx_box">
				<text style="color: #333333;">¥</text>
				<input type="number" value="" class=" font-cc" placeholder-class="text-pr" @input="handleChange" placeholder="0.00" v-model="change_money" />
			</view>
		</view>
		<!-- 充值信息 end -->

		<!-- 充值方式 start -->
		<view class="pay_box" v-if="tabCurrentIndex == 0">
			<view class="model_content">
				<view class="pay">
					<!-- <image style="width: 6rpx; height: 28rpx; margin-right: 24rpx;" src="/static/my/zuobian.png"></image> -->
					选择支付方式
				</view>
			</view>
			<view class="cu-list menu" style="border-radius: 24rpx;">
				<radio-group class="block" @change="RadioChange">
          <!-- #ifndef MP-WEIXIN -->
          <view class="cu-item cu-form-group " @click="handleSelect(1)">
          	<view class="title alipay fs28 ">支付宝</view>
          	<view class="content" style="display: flex;justify-content: space-between;align-items: center;">
          		<image class="image" v-if="acc_type == '1'" :src='STATIC_URL+"122.png"' mode="aspectFill"></image>
          		<image class="image" v-else :src='STATIC_URL+"123.png"'mode="aspectFill"></image>
          		<!-- <radio color="#FF5737" :class="acc_type == '2' ? 'checked' : ''" :checked="acc_type == '2' ? true : false" value="2"></radio> -->
          	</view>
          </view>
          <!-- #endif -->
					<view class="cu-item cu-form-group " @click="handleSelect(2)">
						<view class="title wxpay fs28 ">微信</view>
						<view class="content" style="display: flex;justify-content: space-between;align-items: center;">
							<image class="image" v-if="acc_type == '2'" :src='STATIC_URL+"122.png"' mode="aspectFill"></image>
							<image class="image" v-else :src='STATIC_URL+"123.png"' mode="aspectFill"></image>
							<!-- <radio color="#FF5737" :class="acc_type == '1' ? 'checked' : ''" :checked="acc_type == '1' ? true : false" value="1"></radio> -->
						</view>
					</view>

				</radio-group>
			</view>
		</view>
		<!-- 充值方式 end -->

		<!-- 立即充值按钮 -->
		<view class="tx_btn" @click="payFn">立即充值</view>
		<!-- 断网检测 -->
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
/**
 * @author 刘畅
 */
export default {
	data() {
		return {
      number:1,
			tabCurrentIndex: 0, //顶部导航 选择的第几个
			navList: [
				{
					state: 0,
					text: global.i18n['余额充值']
				},
				{
					state: 1,
					text: global.i18n['礼品卡充值']
				}
			], //冻结顶部导航
			change_money: '', // {String} 充值金额
			acc_type: 1, // {Number} 充值方式 1:支付宝；2：微信；
			act_type: -1, // {Number} 选择充值的金额
			wxChannel: '', // {String} 获取微信服务供应商
			aliChannel: '', // {String} 获取阿里服务供应商
			moneyData: [], // {Array.<Object>} 选择充值那些金额
			showPopup: false, // {Boolean} 弹窗是否显示
			is_show: true, // {Boolean}
			product_id: 0, // {Number} 选择充值金额的产品id，0：自定义；
			money: '' // {String} 充值金额
		};
	},
	/**
	 * @function
	 * @description 获取系统信息，获取包支持的服务商信息
	 */
	onLoad(options) {
     //  #ifdef MP-WEIXIN
     this.acc_type=2
      // #endif
		this.setNavigationBarTitle('充值');
		let that = this;
		uni.getProvider({
			service: 'payment',
			success: function(res) {
				let provider = res.provider;
				provider.forEach(item => {
					if (item == 'wxpay') {
						that.wxChannel = item;
					} else {
						that.aliChannel = item;
					}
				});
			}
		});
		this.getDetali();
		if (uni.getSystemInfoSync().platform == 'ios') {
			this.is_show = false;
		} else {
			this.is_show = true;
		}
	},
	onNavigationBarButtonTap(e) {
		this.showPopup = true;
	},
	methods: {
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		handleSelect(value) {
			this.acc_type = value;
		},
		/**
		 * @function
		 * @description 获取充值规则
		 * @property {Number} group -【规则分组。类型：int(11) unsigned，默认0通用，1 IOS】
		 */
		getDetali() {
      // return
			this.$api
				.get(global.apiUrls.getRechargeRule, {
					// group: 0
				})
				.then(res => {
					console.log(res);
					this.moneyData = res.data.data;
				});
		},
		/**
		 * @event 手动输入
		 * @description 手动输入充值金额
		 */
		handleChange() {
			this.act_type = -1;
			this.product_id = 0;
			console.log(this.change_money);
		},
		/**
		 * @description 不知道有啥用，但是不敢删
		 */
		confirm: async function() {
			let _self = this;
			if (_self.checked) {
				//下单
				if (_self.payType == 'wxpay') {
					_self.requestPayment('wxpay', _self.order_sn);
					uni.showLoading({
						title: '请稍等，正在发起支付'
					});
				} else if (_self.payType == 'alipay') {
					_self.requestPayment('alipay', _self.order_sn);
					uni.showLoading({
						title:'请稍等，正在发起支付'
					});
				}
			}
		},
		/**
		 * @function
		 * @description 支付成功
		 * @param {Object} sn - 支付成功
		 */
		paySuccess(sn) {
			this.$message.success('支付成功');
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				});
			}, 800);

			// if (this.order_type == 12) {
			//   uni.redirectTo({
			//     url: '/pages/integral/integralgoods/exchange-success/index',
			//     order_sn: sn,
			//   })

			// } else {
			//   this.$urouter.redirectTo({
			//     url: '/pages/order/order-process/pay-success/index',
			//     params: {
			//       order_sn: sn,
			//       order_type: 3,
			//       pay_type: this.payType
			//     }
			//   })
			// }
		},
		/**
		 * @event
		 * @description 点击选择充值金额
		 * @param {Obejct} item - 点击的哪一项的详细信息
		 * @param {Number} index - 点击的哪一项的序号
		 */
		get_money(item, index) {
			this.act_type = index;
			this.change_money = item.money;
			this.money = item.money;
			this.product_id = item.id;
		},
		/**
		 * @event
		 * @description 切换充值方式
		 */
		RadioChange(e) {
			this.acc_type = e.detail.value;
		},
		// get_type(e) {
		//   this.acc_type = e.currentTarget.dataset.index;
		// },
		/**
		 * @event
		 * @description 点击立即充值按钮
		 * @property {Obejct} arr - 请求接口携带的参数
		 * @property {Number} arr.order_type - 【订单类型。类型：int(11) unsigned】1 ：'现金充值'，2：'虚拟币充值'，3 ：'商城交易'
		 * @property {String} arr.pay_type - 【支付渠道。类型：varchar(256)】wxpay:微信，alipay:支付宝，appleiap:苹果内购
		 * @property {String} arr.payable_money - 【应付金额。类型：decimal(10,2)】选填，也可以服务器计算
		 * @property {String} arr.order_info - 【商品订单等订单的附加信息。类型：字符串object】
		 * @property {String} arr.coupon_id - 【我使用的优惠券id。类型：int(10) unsigned】
		 */
		payFn() {
			// uni.redirectTo({
			// 	url: '/pages/order/order-process/pay-success/index',
			// 	order_sn: 1
			// });
			// return;
      // if(this.number==2){
      //   return
      // }
			console.log(this.change_money);
			let { acc_type, change_money, money } = this;
      console.log(this.product_id )
			if (this.product_id == 0) {
				if (!change_money) return this.$message.info('请输入充值金额');
				if (change_money < 0.01) return this.$message.info('输入金额不能小于0.01元');
			}
			let data = {
				amount: this.change_money
			};
			console.log(data);
      console.log(global.apiUrls.postAddOrder)
			this.$api
				.post(global.apiUrls.post6710d191613f2, data)
				.then(res => {
					console.log(res);
					if (res.data.code == 1) {
            console.log(res.data)
						// let sn = res.data.data.order_sn;
            uni.requestPayment({
              provider: 'wxpay',
              timeStamp: res.data.data.result.payCode.timeStamp,
              nonceStr: res.data.data.result.payCode.nonceStr,
              package: res.data.data.result.payCode.package,
              signType: res.data.data.result.payCode.signType,
              paySign: res.data.data.result.payCode.paySign,
              success: res => {
              	uni.showToast({ title: '支付成功~', icon: 'none' });
              	setTimeout(()=> {
                  uni.navigateBack({delta: 1})
                }, 800)
              },
              fail: err => {
              	console.log('fail:' + JSON.stringify(err));
              }
            });

					}else{
            this.$message.info(res.data.msg);
          }
				})
				.catch(e => {
					console.log(e);
					this.$message.info('网络繁忙,请稍后重试');
				});
		},

    // 唤醒支付
    startPay(provider,orderInfo){
      let { modes, payOptions } = this
      console.log(provider)
      console.log(orderInfo)
       let self = this;
       let types=1
       if(provider=='wxpay'){
         types=2
       }
     uni.requestPayment({
       provider:provider, //alipay  wxpay
       orderInfo: orderInfo, // 微信、支付宝订单数据
       success: function (res) {
         console.log(res)
         uni.$emit('caozuo_payrder', { msg: '支付成功' });
         self.number=1
         uni.navigateTo({
         	url: '/pages/user/wallet/recharge-success/index?type='+self.acc_type,
         });
         // if(self.paylei==1){
         //   uni.navigateBack({ })
         // }else{
            // uni.redirectTo({
            //   url:'/pages/goods/pay-success/index?order='+self.order_sn +'&type='+types
            // })
         // }

       },
       fail: function (err) {
          self.number=1
         console.log('fail:' + JSON.stringify(err));
         self.$message.info('取消支付')
       }
     });
    },


    // 小程序支付
    startPayWechat(options){
      let { modes, payOptions } = this
      console.log(options)
      console.log(22222)
      let _this=this
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: options.timeStamp,
        nonceStr: options.nonceStr,
        package: options.package,
        signType: options.signType,
        paySign: options.paySign,
        success: function (res) {
          uni.$emit('caozuo_payrder', { msg: '支付成功' });
          _this.number=1
          uni.navigateTo({
          	url: '/pages/user/wallet/recharge-success/index?type='+_this.acc_type,
          });
        },
        fail: function (err) {
          _this.submitBtnLoading = false
          console.log('fail:' + JSON.stringify(err));
        }
      });
    },


	}
};
</script>

<style lang="scss">
page {
	background: #F6F6F6;
}
.money {
	font-size: 24rpx;
	color: #999;
}
// input placeholder 样式 start
.placeholderClass {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #bfbfbf;
}

.tx_btn {
	width: calc(100% - 60upx);
	height: 88upx;
	background: #FF9300;
	border-radius: 44upx;
	font-size: 32upx;
	color: #FFFFFF;
	line-height: 88upx;
	text-align: center;
	position: fixed;
	bottom: 40upx;
	left: 30upx;
}

// 选择金额 start
.cz_cont {
	position: relative;
	height: auto;
	overflow: hidden;
	background: #FFFFFF;
	z-index: 10;
	// border-radius: 24rpx;
	// margin: 0 24rpx;
.title{
  color: #333333;
}
	.cu-item {
		position: relative;
		color: #333333;
		font-size: 32rpx;
		.active-line {
			position: absolute;
			bottom: -16rpx;
			left: 50%;
			transform: translateX(-50%);
			display: none;
			width: 40rpx;
			height: 6rpx;
			background: #ffd437;
			opacity: 1;
			border-radius: 10rpx;
		}
	}
	.cu-item.cur {
		color: #d8d8d8;
		font-weight: 500;
		border-bottom: 0 !important;
		.active-line {
			display: block;
		}
	}

	.cu-item.cur::after {
		content: '';
		display: none;
	}

	.item_main {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 0 32rpx;
		margin-top: 24rpx;
		width: 100%;
		align-content: space-around;
		.list {
			width: 32%;
			flex: none;
			text-align: center;
			height: 104rpx;
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-right: 2%;
			font-size: 32rpx;
			color: #1A1A1A;
      border: 1upx solid #CBCBCB;
			font-weight: bold;
      position: relative;
      image{
        width: 44upx;
        height: 44upx;
        top: 0;
        position: absolute;
        right: 0;
        z-index: 99;
      }
		}

		.act {
			border-radius: 8rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FF7600 !important;
			position: relative;
			// background: #ffd437;
      border-color: #FF7600;
			.money {
				font-size: 24rpx;
				color: #999;
			}
		}

		.list:nth-child(3n) {
			margin-right: 0;
		}
	}
}
// 选择金额 end

.tx_money {
	font-size: 32rpx;
	display: block;
	align-items: center;
	// color: #d8d8d8;
	margin-top: 30upx;
	padding: 0 30upx;
}

// 充值方式 start
.tx_main {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 0 30upx 30upx 30upx;
	background: white;
	border-top: 10px solid #f2f2f2;

	.payMain {
		display: flex;
		justify-content: space-between;
	}

	.tx_choose {
		font-size: 30upx;
		color: #333;
		line-height: 90upx;
		display: block;
	}

	.tx_mainBox {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46%;
		height: auto;
		overflow: hidden;
		border-radius: 10rpx;
		border: 1px solid #999;

		.tx_name {
			display: block;
			line-height: 100upx;
			font-size: 30upx;
			color: #333;
			text-align: center;
		}

		image {
			width: 50upx;
			height: 50upx;
			margin-right: 20upx;
		}
	}
}
// 充值方式 end

// 充值信息 start
.tx_cont {
	height: auto;
	overflow: hidden;
	background: #FFFFFF;
	// margin: 0 24rpx;
	// margin-top: 10rpx;
	// border-radius: 24rpx;

	.all_out {
		&:after {
			border: none;
		}

		display: inline-block;
		background: none;
		font-size: 24upx;
	}

	.tx_box {
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 0 30upx 20upx 30upx;
		margin-top: 20upx;
		position: relative;

		&:before {
			content: '';
			position: absolute;
			height: 1px;
			background: #eeeeee;
			left: 30upx;
			right: 0;
			bottom: 0;
			transform: scaleY(0.5);
		}

		text {
			display: block;
			font-size: 40upx;
			color: #333;
			font-weight: bold;
			float: left;
			line-height: 70upx;
		}

		input {
			display: block;
			width: auto;
			height: 70upx;
			font-size: 40upx;
			line-height: 70upx;
			padding: 0 30upx;
      color: #333;
		}

		.text-pr {
			font-weight: bold;
			font-size: 40upx;
			color: #8e8e93;
		}

		.text-pr-lp {
			font-size: 32px;
			font-weight: 400;
			color: #8e8e93;
		}
	}
}
// 充值信息 end

.fu-flex-center {
	background: $uni-text-color-inverse;
}

.pay_box {
	// margin: 24rpx 24rpx 0rpx 24rpx;
	background: #FFFFFF;
	// border-radius: 24rpx;
	.model_content {
		border-radius: 24rpx;
		height: auto;
		padding: 0 30upx;
		// margin-top: 20upx;
		background: #FFFFFF;
	}
	.pay {
		font-size: 32upx;
		height: 80upx;
		line-height: 80upx;
		color: #333333;
	}

	.cu-list.menu > .cu-item {
		padding: 0 !important;
	}

	.cu-list.menu > .cu-item.arrow:before {
		display: none !important;
	}
	.wxpay {
		background: url(https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/1d066923b9b33614a9df47ea787e5af9.png);
		padding-left: 80upx;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.alipay {
		background: url(https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/1d066923b9b33614a9df47ea787e5af9.png);
		padding-left: 80upx;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.image {
		height: 32rpx;
		width: 32rpx;
	}
	.cu-form-group + .cu-form-group {
		border-top: none;
	}
}
</style>
