<template>
	<view class="cash">
		<u-navbar title="申请提现" title-bold back-icon-color="#fff" :background="{background:'rgb(255, 117, 129)'}" immersive
			:border-bottom="false" title-color="#fff">
			<view slot="right" class="u-p-r-30 u-flex u-col-center  color-fff" @click="showRule">
				<text class="rule-btn">规则</text>
			</view>
		</u-navbar>
		<view class=""
			style="background-color: #ff7581;height: 400upx;border-bottom-right-radius: 40upx;border-bottom-left-radius: 40upx;">

			<view style="font-size: 32upx;color: #FFFFFF;padding-top: 100upx;">可提现总额</view>
			<view style="font-size: 40upx;color: #FFFFFF;padding-top: 20upx;">¥ {{ mayMoney }}</view>

			<view
				style="width: 90%;height: max-content;margin-left: 40upx;background-color: #FFFFFF;box-shadow: rgba(183, 183, 183, 0.3) 0px 1px 10px;margin-top: 50upx;border-radius: 20upx;">
				<view style="display: flex;flex-direction: row;padding: 20upx;">
					<view style="font-size: 32upx;color: #333333;">提现金额
						<!-- <text style="font-size: 28upx;color: #ff7581;"
              v-if="shouxufei">（注：提现手续费为{{shouxufei * 100}}%）</text> -->
					</view>
				</view>
				<view
					style="display: flex;flex-direction: row;padding: 20upx;justify-content: space-between;align-items: center;">
					<view style="display: flex;align-items: center;">
						<view style="font-size: 40upx;color: #333333;">¥</view>
						<input type="number" v-model="money" placeholder="请输入金额" @input="moneyInput" @blur="moneyBlur"
							style="font-size: 40upx;color: #333333;text-align: left;margin-left: 10upx;width: 80%;" />
					</view>
					<view @click="setAllMoney"
						style="font-size: 30rpx;color: #333333;background: #ff7581;color: white;border-radius: 10rpx;padding: 7rpx 15rpx;flex-shrink: 0;">
						全部
					</view>

				</view>
				<view style="background: #E6E6E6;width: 100%;height: 1upx;"></view>

				<!-- <view style="display: flex;flex-direction: row;flex-wrap: wrap;">
          <view style="display: flex;flex-direction: row;" v-for="(item, index) in moneyList" :key="index">
            <view>
              <view style="padding: 20upx;" @click="getOut1(item.money)">
                <view
                  style="padding-top: 40upx;width: 180upx; height: 120upx;background-color: #FFFFFF;border:1px solid #ff7581;border-radius: 10upx;">
                  {{ item.money }}
                </view>
              </view>
            </view>
          </view>
        </view> -->
			</view>
			<view @click="withdraw"
				style="margin: 32upx;font-size: 18px;background: #ff7581;color: white;border-radius: 10px;height: 40px;line-height: 40px;">
				{{!isWithdraw?'观看广告提现':'立即提现'}}
			</view>

			<view style="display: flex;width: 100%;justify-content: center;">
				<view class="u-flex-1" style="color: grey;padding-bottom: 30px;padding-top: 20upx;" @click="goZhifuBao">
					提现账号
				</view>
				<view class="u-flex-1" style="color: grey;padding-bottom: 30px;padding-top: 20upx;" @click="goqianbao">
					红包明细
				</view>
				<!-- <view style="color: grey;padding-bottom: 30px;padding-top: 20upx;width: 33%;" @click="gojilu">提现记录
        </view> -->
			</view>

			<view style="text-align: left" class="moneyList u-p-b-30">
				<view v-if="list.length" v-for="(item, index) in list" :key="index" class="item">
					<view>
						<view style="margin-bottom: 8upx;text-align: right;">
							<text style="margin-bottom: 8upx;color: green" v-if="item.state===1"> 提现成功</text>
							<text style="margin-bottom: 8upx;color: green" v-if="item.state===0||item.state==3">
								提现中</text>
							<text style="margin-bottom: 8upx;color: #FD6416" v-if="item.state===-1||item.state===2">
								提现失败
							</text>
						</view>

						<view style="color: #999999;font-size: 28upx;">
							<view style="margin-bottom: 8upx"> 收款人账号：{{ item.zhifubao }}</view>
							<view style="margin-bottom: 8upx"> 收款人姓名：{{ item.zhifubaoName }}</view>
							<view style="margin-bottom: 8upx"> 发起时间：{{ item.createAt }}</view>
							<view style="margin-bottom: 8upx" v-if="item.state===1">成功时间 {{ item.outAt }}</view>
							<view style="margin-bottom: 8upx;color: #FD6416" v-if="item.state===-1||item.state===2">
								失败原因：{{ item.refund }}
							</view>

							<view style="margin-bottom: 8upx;text-align: right;">
								<!-- 提现金额： -->
								<text style="color: #FD6416;font-size: 32upx;font-weight: 600"> ￥{{ item.money }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="page-box" v-if="!list.length">
					<view class="centre">
						<image src="../../static/images/learn/none.png" mode=""></image>
						<view class="tips">
							暂无记录
						</view>
					</view>
				</view>

			</view>

		</view>

		<u-modal v-model="ruleShow" confirm-text="知道了" title="规则说明" :title-style="{fontWeight:'700'}" confirm-color="rgb(255, 117, 129)">
			<view class="u-p-30 u-text-left">
				<scroll-view scroll-y="true" style="max-height: 50vh;" >
					<rich-text class="color-666" :nodes="ruleInfo"></rich-text>
				</scroll-view>
			</view>
			
		</u-modal>
		
		<!-- 激励视频广告 -->
		<ad-rewarded-video v-if="adRewardedVideo" ref="adRewardedVideo" adpid="1531580352" :loadnext="true" v-slot:default="{loading, error}"
			:url-callback="urlCallback" @load="onadload" @close="onadclose" @error="onaderror">
			<view class="ad-error" v-if="error">{{error}}</view>
		</ad-rewarded-video>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ruleShow: true,
				ruleInfo: `
				用户在平台中对奖励提现的，适用以下规则：
				<br/>
				<br/>
				1，用户的收益达到最低提现金额要求后，可以申请提现。每日发起前10笔提现为自动到账，超出则需第二个工作日后到账。
				<br/>
				2，用户需要通过支付宝提现，需按照要求绑定支付宝账号并填写提现金额或其他提现所需信息，请确保提供的信息准确无误，以免提现失败。
				<br/>
				3，如果用户发现显示「提现失败」，需确认当前填写或绑定的支付宝账号或银行卡账号是否正确，以及支付宝账号是否可用。如果用户发现显示「提现成功」但没到账
				<br/>
				(1)如果用户有多个支付宝账号，请检查用户是否提现到了其他支付宝账号。
				<br/>
				(2)高峰期提现人数多会导致网络拥堵，显示提现成功之后72小时内属于正常现象，请耐心等候。
				<br/>
				4，每日23:00至次日11:00为系统维护时间，活动的对应奖励可能延迟到账。提现通常会在72小时内到账，如遇双休日、节假日，提现到账时间可能会延长。活动高峰期间，由于网络拥堵，用户可能存在短时间内无法提现的情况。平台将尽最大努力及时恢复提现功能，但无需因此承担任何责任。
				<br/>
		`,
				money: '',
				mayMoney: '0',
				shouxufei: '',
				moneyList: [{
						money: '10'
					},
					{
						money: '20'
					},
					{
						money: '50'
					},
					{
						money: '100'
					},
					{
						money: '200'
					},
					{
						money: '500'
					}
				],
				value: 0,
				min: '',
				token: '',
				userId: '',
				zhifubao: '',
				zhifubaoName: '',
				certNum: '',
				list: [],
				page: 1,
				limit: 10,
				totalCount: 0,
				cashMoney: 0,
				urlCallback: null,
				adRewardedVideo: true,
				adRewardedVideoloadNum: 0,
				isWithdraw: false,
			};
		},
		onLoad() {
			this.getExtractFei();
			this.getMoneyDetail();
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			this.userId = uni.getStorageSync('userId')
			this.zhifubao = uni.getStorageSync('zhiFuBao')
			this.zhifubaoName = uni.getStorageSync('zhiFuBaoName')
			this.certNum = uni.getStorageSync('certNum')
			this.getcashMoney()

		},
		onReachBottom: function() {
			if (this.page * this.limit < this.totalCount) {
				this.page = this.page + 1;
				this.getMoneyDetail();
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			// that.list = []
			this.getMoneyDetail();
		},
		onNavigationBarButtonTap() {
			// this.list();
		},
		onReady() {
			this.$nextTick(()=>{
				this.adRewardedVideoloadNum = 0
				this.$refs.adRewardedVideo.load();
			})
			this.getCanCash()
		},
		methods: {
			/**
			 * 获取看广告状态
			 */
			getCanCash() {
				this.$Request.getT('app/cash/canCash').then(res => {
					console.log(res)
					if (res.code == 0) {
						this.isWithdraw = res.data;
					} else {
						this.isWithdraw = false;
					}
				})
			},
			/**
			 * 广告数据加载成功回调
			 * @param {Object} e
			 */
			onadload(e) {
				this.adRewardedVideo = true;
				console.log('广告数据加载成功');
			},
			
			/**
			 * 广告加载失败回调
			 * @param {Object} e
			 */
			onaderror(e) {
				if ( this.adRewardedVideoloadNum >=3 ) {
					this.adRewardedVideo = false;
					return
				} 
				this.adRewardedVideoloadNum++
				setTimeout(() => {
					this.$refs.adRewardedVideo.load();
				}, 1000); // 10
				console.log("广告加载失败")
			},
			
			/**
			 * 广告播放成功回调
			 * @param {Object} e
			 */
			async onadclose(e) {
				const detail = e.detail
				if (detail && detail.isEnded) {
					// 正常播放结束
					let res = await this.$Request.getT('app/ad/state', {
						extraKey: this.urlCallback.extra
					})
					this.getCanCash()
				} else {
					// 播放中途退出
				}
			},
			withdraw() {
					
				if ( !this.isWithdraw ) {
					this.urlCallback = {
						userId: uni.getStorageSync('userId'),
						extra: 'cash:'+uni.getStorageSync('userId') + "" + new Date().getTime(),
					}
					this.$refs.adRewardedVideo.show();
				} else {
					this.getOut()
				}
				
			},
			/**
			 * 规则弹窗打开
			 */
			showRule(){
				this.ruleShow=true
			},
			moneyInput(e) {
				let num = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				this.$nextTick(() => {
					this.money = num;
				});

			},
			moneyBlur(e) {
				let num = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				this.$nextTick(() => {
					this.money = num;
				});
			},
			setAllMoney() {
				this.money = Math.floor(this.mayMoney * 100) / 100
			},
			
			/**
			 * 获取提现记录
			 */
			getMoneyDetail() {
				let that = this;
				let token = uni.getStorageSync('token')
				if (token) {
					//可以提现金额查询预估收入查询
					let data = {
						page: this.page,
						limit: this.limit
					}
					this.$Request.getT('app/cash/selectPayDetails', data).then(res => {
						this.totalCount = res.data.totalCount;
						if (res.data.list.length > 0) {
							this.list = [...this.list, ...res.data.list];
						}
					})
				}

			},

			//获取收取费
			getExtractFei() {
				this.$u.get('app/common/type/152').then(res => {
					if (res.code === 0) {
						if (res.data && res.data.value) {
							this.shouxufei = res.data.value;
						}
					}
				});
				this.$u.get('app/common/type/112').then(res => {
					if (res.code === 0) {
						if (res.data && res.data.value) {
							this.cashMoney = res.data.value;
						}
					}
				});

			},
			
			/**
			 * 可提现金额
			 */
			getcashMoney() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				
				this.$Request.getT('app/moneyDetails/selectUserMoney').then(res => {
					if (res.code == 0) {
						this.mayMoney = res.data.amount || 0
					}
				})
			},
			
			/**
			 * 提现记录
			 */ 
			gojilu() {
				uni.navigateTo({
					url: '/me/invite/cashList'
				});
			},
			
			/**
			 * 红包明细
			 */
			goqianbao() {
				uni.navigateTo({
					url: '/me/invite/moneyList?moneyType=1&viewType=2'
				});
			},
			
			/**
			 * 绑定支付宝
			 */
			goZhifuBao() {
				uni.navigateTo({
					url: '/me/invite/zhifubao'
				});
			},
			
			getMoney() {
				let that = this;
				let token = that.token
				let userId = that.userId
				if (token) {
					//this.$queue.showLoading("加载中...");
					//可以提现金额查询预估收入查询
					let data = {
						amount: that.money
					}
					uni.showLoading({
						title: '提现中'
					});
					this.$u.api.withdraw(data).then(res => {
						console.log(res)
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							that.money = ''
							setTimeout(function() {
								that.getcashMoney()
							}, 1500)

						} else if (res.code == 9991) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							setTimeout(function() {
								uni.navigateTo({
									url: '/me/invite/zhifubao'
								});
							}, 1500)
							
					    } else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			
			getOut() {
				let that = this;
				let token = that.token
				let userId = that.userId
				let cashMoney = that.cashMoney;

				if (token) {
					if (that.zhifubao && that.zhifubaoName) {
						if (!/^\d+(\.\d{1,2})?$/.test(that.money)) {
							uni.showToast({
								icon: 'none',
								title: '请输入正确金额，不能包含中文，英文，特殊字符和小数'
							});
							return;
						}
						let shouxufei = parseFloat(that.money * that.shouxufei).toFixed(2);
						if (parseFloat(that.mayMoney).toFixed(2) >= parseFloat(that.money)) {
							// if (parseFloat(that.mayMoney).toFixed(1) >= parseFloat(that.money) + shouxufei * 1) {
							if (parseFloat(that.money).toFixed(2) >= parseFloat(cashMoney)) {
								if (that.shouxufei > 0) {

									uni.showModal({
										title: "提现申请提示",
										content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + that
											.money + '元\n\n收款人账号：' + that.zhifubao + '',
										// content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + that
										// 	.money + '元\n\n提现手续费：' + shouxufei +
										// 	'\n\n收款人账号：' + that.zhifubao + '',
										success: (e) => {
											if (e.confirm) {
												// that.money = money
												that.getMoney();
												that.getMoneyDetail();
											}
										}
									});
								} else {
									uni.showModal({
										title: "提现申请提示",
										content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + that
											.money + '元\n\n收款人账号：' + that.zhifubao +
											'',
										success: (e) => {
											if (e.confirm) {
												// that.money = money
												that.getMoney();
												that.getMoneyDetail();
											}
										}
									});
								}

							} else {
								uni.showToast({
									icon: 'none',
									title: "提现金额必须大于或等于" + cashMoney + "元才可提现"
								});
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: "您的余额不足"
							});
						}
					} else {
						uni.navigateTo({
							url: "/me/invite/zhifubao"
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			},
			getOut1(money) {
				let that = this;
				let token = that.token
				let userId = that.userId
				if (token) {
					if (that.zhifubao && that.zhifubaoName) {
						if (parseFloat(this.mayMoney).toFixed(1) >= parseFloat(money)) {
							if (parseFloat(money).toFixed(1) >= 10) {
								if (this.shouxufei > 0) {
									let shouxufei = parseFloat(money * this.shouxufei).toFixed(2);
									uni.showModal({
										title: '提现申请提示',
										content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + money +
											'元\n\n收款人账号：' + that.zhifubao + '',
										// content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + money +
										// 	'元\n\n提现手续费：' + shouxufei +
										// 	'\n\n收款人账号：' + that.zhifubao + '',
										confirmColor: '#ff7581',
										success: e => {
											if (e.confirm) {
												this.money = money
												that.getMoney();
												// uni.showToast({
												// 	icon: 'none',
												// 	title: '提现成功'
												// })
											}
										}
									});
								} else {
									uni.showModal({
										title: '提现申请提示',
										content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + money +
											'元\n\n收款人账号：' + that.zhifubao +
											'',
										success: e => {
											if (e.confirm) {
												this.money = money
												that.getMoney();
												// uni.showToast({
												// 	icon: 'none',
												// 	title: '提现成功'
												// })
											}
										}
									});
								}
							} else {
								uni.showToast({
									icon: 'none',
									title: '提现金额必须大于或等于10元才可提现'
								});
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '您的余额不足'
							});
						}
					} else {
						uni.navigateTo({
							url: '/me/invite/zhifubao'
						});
					}
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	// @import '../../static/css/index.css';
	.rule-btn {
		font-size: 16px;
		// padding: 2rpx 10rpx;
		// border: 1px solid rgba(255, 255, 255, .8);
		// border-radius: 4rpx;
	}

	.view2-view-text {
		font-size: 14px;
		color: #000000;
		margin-left: 20upx;
		width: 80%;
	}

	.view2-view-image-right {
		width: 18upx;
		height: 30upx;
		margin-left: 50upx;
	}

	.cash {
		text-align: center;
		background: white;
		height: 100%;
		position: absolute;
		width: 100%;

		.cash-top {
			padding: 32upx 32upx 50upx 32upx;
			/* border-bottom: 1px solid gainsboro; */
			background: #5074FF;
		}

		.leiji {
			font-size: 14px;
			color: #ffffff;
			margin-bottom: 10px;
		}
	}

	.moneyList {
		.item {
			background: white;
			padding: 32rpx;
			margin: 32rpx;
			font-size: 28rpx;
			box-shadow: 7px 9px 34px rgba(0, 0, 0, 0.1);
			border-radius: 16upx;
		}

		.item:first-child {
			margin-top: 0;
		}
	}


	.centre {
		text-align: center;
		padding: 200rpx 0;
		font-size: 32rpx;
		box-sizing: border-box;

		image {
			width: 360rpx;
			height: 360rpx;
			// margin-bottom: 20rpx;
			margin: 0 auto 20rpx;
			// border: 1px dotted #000000;
		}

		.tips {
			font-size: 34rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 600rpx;
			border-radius: 32rpx;
			line-height: 90rpx;
			color: #ffffff;
			font-size: 34rpx;
			background: #ff7581;
		}
	}
</style>