<template>
	<view>
		<view class="accounmt">
			<view v-show="isadd && !motify">
				<p class="selectadd" style="margin-bottom: 20px;">选择添加类型</p>
				<u-input style="width:100%;" v-model="accountform.paytype" type="select" @click="psytypeshow = true"
					placeholder='选择添加类型' />
				<u-select v-model="psytypeshow" :list="payList" @confirm="paychange"
					mode="mutil-column-auto"></u-select>
				<div style="border: 1px dashed #EBEBEB;margin: 20px 0;"></div>
				<div v-if="accountform.paytype == '支付宝'"
					style="display: flex;align-items: center;margin-bottom:10px;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<img style="width:19px;height:19px;margin-right:5px;" src="/static/crowd/PAYB.png" alt="">
						<p class="selectadd">支付宝账号</p>
					</view>
					<view v-if="allowRest" @click="accountReset('支付宝')" style="color: #2587FA;">重置账号</view>
				</div>
				<div v-if="accountform.paytype == '银行卡'"
					style="display: flex;align-items: center;margin-bottom:10px;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<img style="width:18px;height:15px;margin-right:5px;" src="/static/crowd/bankcad.png" alt="">
						<p class="selectadd">银行卡账号</p>
					</view>
					<view @click="accountReset('银行卡')" style="color: #2587FA;">重置账号</view>
				</div>
				<u-form :model="accountform" ref="accountform" label-position='left' label-width='140'
					border-bottom='false'>
					<view v-if="accountform.paytype == '支付宝' && !accountdata.alipay">
						<u-form-item label="姓   名：" prop="name" border-bottom='false' required='true'>
							<u-input style="" v-model="accountform.name"></u-input>
						</u-form-item>
						<u-form-item label="账   号：" prop="alipay" border-bottom='false' required='true'>
							<u-input v-model="accountform.alipay"></u-input>
						</u-form-item>
						<!-- <view class="tishi">
							<image style="width: 21rpx;height: 21rpx;margin-right: 10rpx;"
								src="../../../static/crowd/zhuyi.png" mode=""></image>
							账号添加后暂不支持更改，请仔细检查后再提交确定
						</view> -->
						<view class="addbtn">
							<view class="addbtnff" v-if="accountform.paytype == '支付宝' && !accountdata.alipay"
								@click="acsumbit('determine')"
								style='background: linear-gradient(90deg, #5EA6FD, #1A81F9);'>确定</view>

							<view v-if="accountform.paytype == '支付宝' && !accountdata.alipay" class="addbtnff"
								@click="acsumbit('cancel')"
								style="border: 1px solid #E0E0E0;background: #FFFFFF;color: #666666;">取消</view>

						</view>
					</view>
					<view v-if="accountform.paytype == '银行卡' && !accountdata.bankAccount">
						<u-form-item label="姓   名：" prop="name" border-bottom='false' required='true'>
							<u-input style="" v-model="accountform.name"></u-input>
						</u-form-item>
						<u-form-item label="开户行：" prop="bankDeposit" border-bottom='false' required='true'>
							<u-input v-model="accountform.bankDeposit"></u-input>
						</u-form-item>
						<u-form-item label="账   号：" prop="bankAccount" border-bottom='false' required='true'>
							<u-input v-model="accountform.bankAccount"></u-input>
						</u-form-item>
						<!-- <view class="tishi">
							<image style="width: 21rpx;height: 21rpx;margin-right: 10rpx;"
								src="../../../static/crowd/zhuyi.png" mode=""></image>
							账号添加后暂不支持更改，请仔细检查后再提交确定
						</view> -->
						<view class="addbtn">
							<view class="addbtnff" v-if="accountform.paytype == '银行卡' && !accountdata.bankAccount"
								@click="acsumbit('determine')"
								style='background: linear-gradient(90deg, #5EA6FD, #1A81F9);'>确定</view>
							<view v-if="accountform.paytype == '银行卡' && !accountdata.bankAccount" class="addbtnff"
								@click="acsumbit('cancel')"
								style="border: 1px solid #E0E0E0;background: #FFFFFF;color: #666666;">取消</view>
						</view>
					</view>
				</u-form>

				<!-- 已添加账号 -->
				<view class="yitianjiaed" v-if="accountform.paytype == '支付宝' && accountdata.alipay">
					<view class="yitianjiaedtext">
						<text>*</text>
						姓名：{{ accountdata.name }}
					</view>
					<view class="yitianjiaedtext">
						<text>*</text>
						账号：{{ accountdata.alipay }}
					</view>
				</view>
				<view class="yitianjiaed" v-if="accountform.paytype == '银行卡' && accountdata.bankAccount">
					<view class="yitianjiaedtext">
						<text>*</text>
						姓名：{{ accountdata.name }}
					</view>
					<view class="yitianjiaedtext">
						<text>*</text>
						开户行：{{ accountdata.bankDeposit }}
					</view>
					<view class="yitianjiaedtext">
						<text>*</text>
						账号：{{ accountdata.bankAccount }}
					</view>
				</view>
			</view>
			<view v-show="!isadd && !motify">
				<view v-if="accountdata.alipay && accountdata.bankAccount" @click="accountdatadia('查看账户')"
					style="display:flex;align-items:center;font-size:15px;cursor: pointer;">
					<!-- <img style="width:20px;height:20px" src="/static/crowd/add.png" alt=""> -->
					<p style="color:#2286FA;margin: 0 5px;">查看账户</p>
				</view>
				<view v-else @click="accountdatadia('添加账户')"
					style="display:flex;align-items:center;font-size:15px;cursor: pointer;">
					<img style="width:20px;height:20px" src="/static/crowd/add.png" alt="">
					<p style="color:#2286FA;margin: 0 5px;">添加账户</p>
					<p v-if="!accountdata.alipay && !accountdata.bankAccount" style="color:#666666FF;font-size:13px;">
						(还未添加账户,无法提现)</p>
				</view>
				<div class="test_content">
					<div
						style="padding:20px;background: #F2F4F7FF;border-radius: 6px 6px 0px 0px;border: 1px solid #E6E8EB;">
						<p style="font-size:26px;color:#1A1A1AFF;font-weight: bold;">账户余额</p>
						<p style="margin: 20px 0 0 0;">
							<span style="font-size:30px;color:#F65B24FF;">{{ accountdata.balance }}</span>
							<span style="font-size:18px;color:#A6A6A6;margin-left: 10px;">元</span>
						</p>
					</div>
					<div class="Withdrawable">
						<p>可提现余额：{{ accountdata.availableBalance }}元</p>
					</div>
					<!-- <u-divider use-solt='false'></u-divider> -->
					<!-- <div class="linex"></div> -->
					<div style="margin-top:35px;display: flex;">
						<button class="applbtn" @click="chongzhi"
							style='background: linear-gradient(90deg, #5EA6FD, #1A81F9);'>充值</button>
						<button class="applbtn" @click="openwitd"
							style='border: 1px solid #2468F6;color: #2468F6; background: #FFFFFF;'>提现</button>
						<!-- <button @click="openwitd" class="addbtnff" style='border: 1px solid #2468F6;'>提现</button> -->
						<!--  <view style="width:150px;height:50px;font-size: 18px;margin-right:20px;">充值</view>
						<view  style="width:150px;height:50px;font-size: 18px;margin-left:20px;">提现</view> -->
					</div>
				</div>

			</view>
			<view v-if="motify">
				<u-form :model="accountform" ref="accountform" label-position='left' label-width='140'
					border-bottom='false'>
					<view v-if="accountform.paytype == '支付宝' && accountdata.alipay">
						<u-form-item labelWidth="0" prop="name" border-bottom='false' required='true'>
							<u-input v-model="accountform.name" placeholder="请输入姓名"></u-input>
						</u-form-item>
						<u-form-item labelWidth="0" prop="alipay" border-bottom='false' required='true'>
							<u-input v-model="accountform.alipay" placeholder="请输入支付宝账号"></u-input>
						</u-form-item>
						<u-form-item labelWidth="0" prop="mobile" border-bottom='false' required='true'>
							<u-input v-model="accountform.mobile" placeholder="请输入手机号" disabled></u-input>
						</u-form-item>
						<u-form-item labelWidth="0" prop="code" border-bottom='false' required='true'>
							<div style="display: flex;">
								<u-input v-model="accountform.code" placeholder="请输入验证码" style="width: 70%;"></u-input>
								<view :class="verifyCodeText.disabled ? 'btnDisable getVerifyCode' : 'getVerifyCode'"
									@click="getVerifyCode">{{ verifyCodeText.text }}</view>
							</div>
						</u-form-item>
						<view class="resetSubmit">
							<view class="resetBtn" @click="acsumbit('determine')"
								style='background: linear-gradient(90deg, #5EA6FD, #1A81F9);'>提交</view>
						</view>
					</view>
					<view v-if="accountform.paytype == '银行卡' && accountdata.bankAccount">
						<u-form-item labelWidth="0" prop="name" border-bottom='false' required='true'>
							<u-input v-model="accountform.name" placeholder="请输入姓名"></u-input>
						</u-form-item>
						<u-form-item labelWidth="0" prop="bankDeposit" border-bottom='false' required='true'>
							<u-input v-model="accountform.bankDeposit" placeholder="请输入开户行"></u-input>
						</u-form-item>
						<u-form-item labelWidth="0" prop="bankAccount" border-bottom='false' required='true'>
							<u-input v-model="accountform.bankAccount" placeholder="请输入银行卡号"></u-input>
						</u-form-item>
						<u-form-item labelWidth="0" prop="mobile" border-bottom='false' required='true'>
							<u-input v-model="accountform.mobile" placeholder="请输入手机号" disabled></u-input>
						</u-form-item>
						<u-form-item labelWidth="0" prop="code" border-bottom='false' required='true'>
							<div style="display: flex;">
								<u-input v-model="accountform.code" placeholder="请输入验证码" style="width: 70%;"></u-input>
								<view :class="verifyCodeText.disabled ? 'btnDisable getVerifyCode' : 'getVerifyCode'"
									@click="getVerifyCode">{{ verifyCodeText.text }}
								</view>
							</div>
						</u-form-item>
						<view class="resetSubmit">
							<view class="resetBtn" @click="acsumbit('determine')"
								style='background: linear-gradient(90deg, #5EA6FD, #1A81F9);'>提交</view>
						</view>
					</view>
				</u-form>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- 充值弹层 -->
		<u-popup style="background:#66666;padding:20px;" v-model="lqPasswordShow" mode="bottom" length="80%"
			height='40%' border-radius="15" :closeable='true' :mask-close-able="false">
			<!-- <u-code-input dot v-model="qbpassword" :maxlength="6"></u-code-input> -->
			<view style="height:100rpx">

			</view>
			<view style="font-weight: 500;font-size: 26rpx;color: #1A1A1A;margin-bottom: 40rpx;">充值金额</view>
			<u-input v-model="chongzhinum" type="digit" :border="true" />
			<view class="button-g"
				style="width:80vw; background: linear-gradient(90deg, #5EA6FD, #1A81F9);color: #FFFFFF;margin-top: 80rpx;margin-left: 80rpx;"
				@click="chongzhipay">充值</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			lqPasswordShow: false,
			chongzhinum: null,
			accountdata: {},
			wxUserInfo: null,
			isadd: false,
			verifyCodeText: {
				text: '获取验证码',
				timer: '',
				disabled: false
			},
			motify: false,
			psytypeshow: false,
			payList: [{ value: '1', label: '支付宝' }, { value: '2', label: '银行卡' },],
			accountform: { paytype: '支付宝', name: '', alipay: '', bankDeposit: '', bankAccount: '' },
			accountRules: {
				name: [
					{ required: true, message: "姓名不能为空", trigger: "blur" },
					{ max: 4, message: '最多输入4个中文', trigger: 'change' },
					{
						pattern:
							/^(?:[\u4e00-\u9fa5·]{2,16})$/,
						message: "请输入中文",
						trigger: "blur",
					},
				],
				code: [
					{ required: true, message: "请输入验证码", trigger: "blur" },
				],
				bankDeposit: [
					{ required: true, message: "开户行不能为空", trigger: "blur" },
					{
						pattern:
							/^(?:[\u4e00-\u9fa5·]{2,16})$/,
						message: "请输入中文",
						trigger: "blur",
					},
				],
				alipay: [
					{ required: true, message: "账号不能为空", trigger: "blur" },
					{ max: 25, message: '账号格式不对', trigger: 'blur' },
					{
						message: '账号格式不对',
						trigger: 'blur',
						pattern: /(^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$)|(^1[3|4|5|6|7|9|8]\d{9}$)/,
					},
				],
				bankAccount: [
					{ required: true, message: "账号不能为空", trigger: "blur" },
					// {min:16, message: '账号格式不对', trigger: 'change' },
					// {max:19, message: '账号格式不对', trigger: 'change' },
					//       { 
					//           message: '账号格式不对',
					//           trigger: 'change',
					// 	pattern:/^[1-9]\d*$/,
					//       }
					{
						validator: (rule, value, callback) => {
							const str = value.replace(/\s/g, '');
							if (/^[1-9]\d*$/.test(str)) {
								if (str.length <= 19 && str.length >= 16) {
									callback()
								} else {
									callback(new Error('账号位数错误'));
								}
							} else {
								callback(new Error('卡号只能为数字'));
							}
						},
						trigger: ['blur'],
					}
				],
			},
			Withdrawalform: { withdraw: 'alipay', recordAmount: '', password: '' }
		}
	},

	onReady() {
		this.$refs.accountform.setRules(this.accountRules);
	},
	onShow() {
		if (this.isadd) {
			uni.setNavigationBarTitle({
				title: '添加账户'
			});

		} else {
			uni.setNavigationBarTitle({
				title: '账户概览'
			});
		}
	},
	onLoad() {
	},
	mounted() {
		this.wxUserInfo = uni.getStorageSync('wxUserInfo');
		let userId = this.wxUserInfo.userId
		this.http.quickGet(`/mpay/my/account/${userId}`, true).then(res => {
			this.accountdata = res.data
			this.accountform.name = res.data.name
			this.accountform.alipay = res.data.alipay
			this.accountform.bankDeposit = res.data.bankDeposit
			this.accountform.bankAccount = res.data.bankAccount
		})
	},
	computed: {
		allowRest() {
			console.log(this.accountform.paytype);
			console.log(this.accountform.bankAccount);
			console.log(this.accountform.alipay);
			if (this.accountform.paytype == '银行卡' && this.accountform.bankAccount) {
				return true
			} else if (this.accountform.paytype == '支付宝' && this.accountform.alipay) {
				return true
			} return
		}
	},
	methods: {
		paychange(e) {
			this.accountform.paytype = e[0].label
		},
		// 添加账户
		accountdatadia(val) {
			this.isadd = true
			uni.setNavigationBarTitle({
				title: val
			});
		},
		accountReset(val) {
			uni.setNavigationBarTitle({
				title: '重置账户'
			});
			this.motify = true
			this.accountform = { paytype: '', name: '', alipay: '', bankDeposit: '', bankAccount: '' }
			this.accountform.paytype = val
			console.log(this.wxUserInfo);
			this.accountform.mobile = this.wxUserInfo.phonenumber
		},
		// 获取验证码
		getVerifyCode() {
			if (this.verifyCodeText.disabled) {
				return
			}
			const url = this.wxUserInfo.phonenumber
			this.verifyCodeText.disabled = true
			this.http.quickGet('/captchaUserLogin?phoneNumber=' + url)
				.then((res) => {
					if (res.data.code == 200) {
						this.accountform.uuid = res.data.uuid
						uni.showToast({
							title: '发送成功',
							icon: 'none',
							duration: 1000,
						})
						const TIME_COUNT = 60 //更改倒计时时间
						if (!this.verifyCodeText.timer) {
							this.verifyCodeText.text = TIME_COUNT
							this.verifyCodeText.disabled = true
							this.verifyCodeText.timer = setInterval(() => {
								if (this.verifyCodeText.text > 0 && this.verifyCodeText.text <= TIME_COUNT) {
									this.verifyCodeText.text--
								} else {
									this.verifyCodeText.disabled = false
									// this.verifyCodeText.show = true
									clearInterval(this.verifyCodeText.timer) // 清除定时器
									this.verifyCodeText.timer = null
									this.verifyCodeText.text = '获取验证码'
								}
							}, 1000)
						}
					} else {
						this.verifyCodeText.disabled = false
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1000,
						})
					}
				})
				.catch((err) => {
					this.verifyCodeText.disabled = false
					console.log('err', err)
				})
		},
		// 添加账户
		acsumbit(type) {
			if (type == 'cancel') {
				this.isadd = false
				uni.setNavigationBarTitle({
					title: '账户概览'
				});
			} else {
				this.$refs.accountform.validate((valid) => {
					console.log('1');
					
					if (valid) {
						let data = {};
						if (this.accountform.paytype == '支付宝') {
							data = {
								name: this.accountform.name,
								accountId: this.accountdata.accountId,
								userId: this.wxUserInfo.userId,
								alipay: this.accountform.alipay
							}
						} else {
							data = {
								name: this.accountform.name,
								accountId: this.accountdata.accountId,
								userId: this.wxUserInfo.userId,
								bankAccount: this.accountform.bankAccount.replace(/\s/g, ''),
								bankDeposit: this.accountform.bankDeposit
							}
						}
						console.log('添加账号data---', data)
						// return;
						let url = ''
						if (this.motify) {
							data.uuid = this.accountform.uuid
							data.code = this.accountform.code
							url = `/mpay/update/account`
						} else {
							url = `/mpay/setting/account`
						}
						this.http.quickPost(url, data, true).then(res => {
							console.log('res---', res)
							let toastTitle = '';
							this.motify ? (toastTitle = '重置成功') : (toastTitle = '添加成功')
							if (res.data.data.code == 200) {
								this.$refs.uToast.show(
									{
										type: 'success',
										title: toastTitle,
										duration: 2000,
									}
								)
								// uni.showToast({ title: '添加成功', icon: 'none', duration: 1000, success() {
								// 	this.isadd = false
								// } });
								// 获取最新账号信息
								this.isadd = false
								this.motify = false
								this.wxUserInfo = uni.getStorageSync('wxUserInfo');
								let userId = this.wxUserInfo.userId
								this.http.quickGet(`/mpay/my/account/${userId}`, true).then(res => {
									this.accountdata = res.data
									this.accountform.name = res.data.name
									this.accountform.alipay = res.data.alipay
									this.accountform.bankDeposit = res.data.bankDeposit
									this.accountform.bankAccount = res.data.bankAccount
								})
							} else {
								this.$refs.uToast.show(
									{
										type: 'error',
										title: "添加失败",
										duration: 2000,
									}
								)
							}
						})
					} else {
						console.log('效验失败---', data)
					}
				})
			}
		},
		// 提现
		openwitd() {
			// 如果没有提现额度
			if (this.accountdata.availableBalance == 0) {
				return this.$refs.uToast.show(
					{
						type: 'default',
						title: "您的提现额度不足, 无法提现",
					}
				)
			}
			// 如果两个账户都没有
			if (!this.accountform.alipay && !this.accountform.bankAccount) {
				this.$refs.uToast.show(
					{
						type: 'default',
						title: "请先添加提现账户",
					}
				)
			} else {
				uni.navigateTo({
					url: '/pages/personal/setup/Withdrawal'
				})
			}
		},
		// 打开充值
		chongzhi() {
			this.lqPasswordShow = true
		},
		// 充值
		chongzhipay() {
			const that = this
			const data = {
				paytype: 'W06',
				userId: this.accountdata.userId,
				accountId: this.accountdata.accountId,
				remark: '',
				price: this.chongzhinum,
				recordName: '小程序端微信充值',
			}
			this.http.quickPost(`/play/recharge`, data, true).then(res => {
				const info = JSON.parse(res.data.payinfo)
				uni.requestPayment({
					timeStamp: info.timeStamp,
					nonceStr: info.nonceStr,
					package: info.package,
					signType: info.signType,
					paySign: info.paySign,
					success(r) {
						that.wxUserInfo = uni.getStorageSync('wxUserInfo');
						let userId = that.wxUserInfo.userId
						that.http.quickGet(`/mpay/my/account/${userId}`, true).then(res => {
							that.accountdata = res.data
							that.accountform.name = res.data.name
							that.accountform.alipay = res.data.alipay
							that.accountform.bankDeposit = res.data.bankDeposit
							that.accountform.bankAccount = res.data.bankAccount
						})
						uni.showToast({
							icon: 'none',
							title: '充值成功'
						})
						that.lqPasswordShow = false
						that.chongzhinum = ''
					},
					fail(error) {
						console.log(error);
						uni.showToast({
							icon: 'none',
							title: '充值失败'
						})
					}
				})
			})
		}
	}
}
</script>

<style>
.button-g {
	width: 540rpx;
	height: 70rpx;
	background: linear-gradient(90deg, #FF8600, #FE2B2B);
	border-radius: 35rpx;
	text-align: center;
	line-height: 70rpx;
	color: #FFFFFF;
	font-size: 30rpx;
	margin-left: 13px;
}

/* #F2F4F7 */
.accounmt {
	background: #FFFFFF;
	width: 96vw;
	height: 96vh;
	margin: 2vh auto;
	border-radius: 10px;
	padding: 10px 13px;
}

.test_content {
	margin: 30px 0;
	/* background: #F2F4F7FF; */
	text-align: center;

}

.linex {
	height: 1rpx;
	width: 100%;
	background: #EBEBEB
}

.applbtn {
	border-radius: 50px;
	width: 150px;
	height: 40px;
	font-size: 18px;
	margin-right: 20px;
	background: #909399;
	text-align: center;
	line-height: 40px;
	color: #FFFFFF;
}

.Withdrawable {
	background: #DDE8F8;
	border-radius: 0px 0px 6px 6px;
	border: 1px solid #E6E8EB;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 16px;
	color: #666666FF;
}

.selectadd {
	color: #000000;
	font-size: 16px;
	font-weight: bold;

}

.u-input {
	padding: 0 10px !important;
	height: 35px;
	border-radius: 4rpx;
	border: 1px solid #E6E6E6;
}

.addbtn {
	display: flex;
	justify-content: space-evenly;
	position: fixed;
	bottom: 50px;
	width: 100%;
	margin-left: -40rpx;
}

.resetSubmit {
	margin-top: 30px;
	display: flex;
	justify-content: center;
}

.resetBtn {
	width: 85%;
	height: 70rpx;
	border-radius: 35rpx;
	line-height: 70rpx;
	font-weight: 500;
	font-size: 28rpx;
	color: #FFFFFF;
	text-align: center;
}

.getVerifyCode {
	width: 30%;
	border-radius: 5rpx;
	line-height: 60rpx;
	font-weight: 500;
	font-size: 28rpx;
	color: #FFFFFF;
	text-align: center;
	background: linear-gradient(90deg, #5EA6FD, #1A81F9);
}

.btnDisable {
	background: linear-gradient(90deg, #73a7e7, #4b8eda);
}

.addbtnff {
	width: 40%;
	height: 70rpx;
	border-radius: 35rpx;
	line-height: 70rpx;
	font-weight: 500;
	font-size: 28rpx;
	color: #FFFFFF;
	text-align: center;
}

.tishi {
	font-weight: 500;
	font-size: 22rpx;
	color: #808080;
	display: flex;
	align-items: center;
}

.yitianjiaed {
	width: 100%;
	background: #F5F7FA;
	border-radius: 4px;
	border: 1px solid #E6E6E6;
	box-sizing: border-box;
	padding: 20rpx;
	margin-top: 40rpx;
}

.yitianjiaedtext {
	font-weight: 500;
	font-size: 26rpx;
	color: #333333;
	margin-bottom: 25rpx;
}

.yitianjiaedtext text {
	color: red;
	margin-right: 10rpx;
}
</style>
