<template>
	<view class="cash">
		
		<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;">¥ {{ data.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;">提现金额
					</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="data.money" placeholder="请输入金额" @input="moneyInput"
							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>
			<view @click="goWithdraw" style="margin: 32upx;font-size: 18px;background: #ff7581;color: white;border-radius: 10px;height: 40px;line-height: 40px;">
				{{!data.isWithdraw?'观看广告提现':'立即提现'}}
			</view>

			<view style="display: flex;width: 100%;justify-content: space-around;width: 100%;">
				<view class="u-flex-1" style="color: grey;padding-bottom: 30px;padding-top: 20upx;" @click="navTo('/pages/me/withdraw/alipay')">
					提现账号
				</view>
				<view class="u-flex-1" style="color: grey;padding-bottom: 30px;padding-top: 20upx;" @click="navTo('/pages/me/withdraw/moneyList?moneyType=1&viewType=2')">
					红包明细
				</view>
			</view>

			<view style="text-align: left" class="moneyList u-p-b-30">
				<view v-if="data.list.length" v-for="(item, index) in data.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>
				<emprty-card v-if="!data.list.length" />
			</view>

		</view>

		<up-modal :show="data.ruleShow" confirm-text="知道了" title="规则说明" :title-style="{fontWeight:'700'}" @confirm="data.ruleShow=false" 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="data.ruleInfo"></rich-text>
				</scroll-view>
			</view>
			
		</up-modal>
		
		<!-- 激励视频广告 -->
		<!-- <ad-rewarded-video v-if="data.adRewardedVideo" ref="adRewardedVideo" adpid="1531580352" :loadnext="true" v-slot:default="{loading, error}"
			:url-callback="data.urlCallback" @load="onadload" @close="onadclose" @error="onaderror">
			<view class="ad-error" v-if="error">{{error}}</view>
		</ad-rewarded-video> -->
	</view>
</template>

<script setup>
	import { reactive, nextTick, ref } from 'vue';
	import { onReady,onLoad,onShow } from '@dcloudio/uni-app'
	import { selectUserMoney, selectPayDetails, canCash, state, withdraw } from '@/api/me/withdraw.js';
	import { commonType } from '@/api/init.js';
	
	let data = reactive({
		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',
		list: [],
		page: 1,
		limit: 10,
		totalCount: 0,
		cashMoney: 0,
		urlCallback: null,
		adRewardedVideo: true,
		adRewardedVideoloadNum: 0,
		isWithdraw: false,
	})
	const adRewardedVideo = ref(null);
	onLoad(() => {
		getExtractFei();
		getMoneyDetail();
	})
	onShow(() => {
		console.log(uni.getStorageSync('userInfo'))
		getcashMoney()
	})
	onReady(() => {
		nextTick(()=>{
			data.adRewardedVideoloadNum = 0
			adRewardedVideo.value.load();
		})
		getCanCash()
	})
	
	// 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();
	// },
	/**
	 * 获取看广告状态
	 */
	async function getCanCash() {
		canCash().then(res => {
			data.isWithdraw = res;
		})
		
	}
	/**
	 * 广告数据加载成功回调
	 * @param {Object} e
	 */
	function onadload(e) {
		data.adRewardedVideo = true;
		console.log('广告数据加载成功');
	}
	
	/**
	 * 广告加载失败回调
	 * @param {Object} e
	 */
	function onaderror(e) {
		if ( data.adRewardedVideoloadNum >=3 ) {
			data.adRewardedVideo = false;
			return
		} 
		data.adRewardedVideoloadNum++
		setTimeout(() => {
			adRewardedVideo.value.load();
		}, 1000); // 10
		console.log("广告加载失败")
	}
	
	/**
	 * 广告播放成功回调
	 * @param {Object} e
	 */
	async function onadclose(e) {
		const detail = e.detail
		if (detail && detail.isEnded) {
			// 正常播放结束
			let res = await state({
				extraKey: data.urlCallback.extra
			})
			getCanCash()
		} else {
			// 播放中途退出
		}
	}
	
	function onNavigationBarButtonTap() {
		console.log(1)
	    data.ruleShow = true
	}
		
	/**
	 * 提现触发
	 */
	function goWithdraw() {
			
		if ( !data.isWithdraw ) {
			data.urlCallback = {
				userId: uni.getStorageSync('userInfo').userId,
				extra: 'cash:'+uni.getStorageSync('userInfo').userId + "" + new Date().getTime(),
			}
			adRewardedVideo.value.show();
		} else {
			getOut()
		}
		
	}
	
	function moneyInput(e) {
		data.money = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
	}
	
	/**
	 * 全部提现赋值
	 */
	function setAllMoney() {
		data.money = data.mayMoney.toFixed(2)
	}
	
	/**
	 * 获取提现记录
	 */
	function getMoneyDetail() {
		selectPayDetails({
			page: data.page,
			limit: data.limit
		}).then(res => {
			data.totalCount = res.totalCount;
			if (res.list.length > 0) {
				data.list = [...data.list, ...res.list];
			}
		})
	}
	
	/**
	 * 获取最低提现金额
	 */
	function getExtractFei() {
		commonType(112).then(res => {
			if (res && res.value) {
				data.cashMoney = res.value;
			}
		});
	}
	
	/**
	 * 可提现金额
	 */
	function getcashMoney() {
		selectUserMoney().then(res => {
			console.log(res)
			data.mayMoney = res.amount || 0
		})
	}
	
	/**
	 * 跳转
	 * @param {Object} url
	 */
	function navTo(url) {
		uni.navigateTo({
			url: url
		});
	}
	
	function getMoney() {
		let data =
		uni.showLoading({
			title: '提现中'
		});
		withdraw({
			amount: data.money
		}).then(res => {
			data.money = ''
			setTimeout(function() {
				getcashMoney()
			}, 1500)
		}).catch(res =>{
			if (res.code == 9991) {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				setTimeout(function() {
					navTo('/pages/me/withdraw/alipay')
				}, 1500)
				
			}
		})
	}
	
	function getOut() {
		
		if (uni.getStorageSync('userInfo').zhiFuBao && uni.getStorageSync('userInfo').zhiFuBaoName && uni.getStorageSync('userInfo').certNo) {
			if (!/^\d+(\.\d{1,2})?$/.test(data.money)) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确金额，不能包含中文，英文，特殊字符和小数'
				});
				return;
			}
			if (parseFloat(data.mayMoney).toFixed(2) >= parseFloat(data.money)) {
				if (parseFloat(data.money).toFixed(2) >= parseFloat(data.cashMoney)) {
					uni.showModal({
						title: "提现申请提示",
						content: '请仔细确认收款人信息\n\n收款人姓名:' + uni.getStorageSync('userInfo').zhiFuBaoName + '\n\n提现金额:' + data
							.money + '元\n\n收款人账号：' + uni.getStorageSync('userInfo').zhiFuBao + '',
					
						success: (e) => {
							if (e.confirm) {
								getMoney();
								getMoneyDetail();
							}
						}
					});
			
				} else {
					uni.showToast({
						icon: 'none',
						title: "提现金额必须大于或等于" + data.cashMoney + "元才可提现"
					});
				}
			} else {
				uni.showToast({
					icon: 'none',
					title: "您的余额不足"
				});
			}
		} else {
			navTo('/pages/me/withdraw/alipay')
		}
	}
	
</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>