<template>
	<view class="page-bg">
		<view class="main-container">
			<view class="withdraw-input-box">
				<view class="withdraw-title">提现金额</view>
				<view class="input-box">
					¥ <input type="text" placeholder="输入金额" placeholder-class="pch" class="input-value"
						@blur="checkAmt()" value="" v-model="amt" />
				</view>
				<view class="withdraw-amount">
					<span>当前余额为￥{{userInfo.amt}}</span>
					<span class="all-withdraw" v-if="userInfo.amt > 0" @click="allWithdraw">全部提现</span>
				</view>
				<view class="withdraw-amount-tip">小贴士：提现金额不少于1元 </view>
			</view>

			<view class="error-message" v-if="checkFlag == true">输入金额超过或少于可提现余额</view>

			<view class="withdraw-title tl-title-margin">选择提现至</view>

			<view class="withdraw-account-list">
				<radio-group @change="radioChange" :style="'width: 100%'">
					<label v-for="(item, index) in creatorAccountList" :key="index">
						<view class="withdrawBox">
							<view class="withdrawBox-title">
								<view class="account-icon" v-if="item.type == '0'">
									<uni-icons custom-prefix="iconfont" :type="payType[0].icon" size="20"
										:color="payType[0].color"></uni-icons>
								</view>
								<view class="account-icon" v-if="item.type == '1'">
									<uni-icons custom-prefix="iconfont" :type="payType[1].icon" size="20"
										:color="payType[1].color"></uni-icons>
								</view>
								<view class="account-icon" v-if="item.type == '2'">
									<uni-icons custom-prefix="iconfont" :type="payType[2].icon" size="20"
										:color="payType[2].color"></uni-icons>
								</view><!-- 0->微信 1->银行卡 2->支付宝 -->
								<view class="account-title" v-if="item.type == '0'">
									{{payType[0].title}} {{item.accountNo}}
								</view>
								<view class="account-title" v-if="item.type == '1'">
									{{payType[1].title}} {{item.accountNo}}
								</view>
								<view class="account-title" v-if="item.type == '2'">
									{{payType[2].title}} {{item.accountNo}}
								</view>
							</view>
							<view>
								<radio :value="JSON.stringify(item)" color="#0b6375" :checked="item.isUse === '1'"
									class="radioStyle" />
								<!-- <uni-data-checkbox v-model="item" :localdata="range" @change="change"></uni-data-checkbox> -->
							</view>
						</view>
					</label>
				</radio-group>
			</view>
			<view class="tl-footer">
				<button class="withdraw-btn" @click="$noMultipleClicks(withdraw)">提现</button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getWithdrawList,
		getCreatorAccount,
		checkWithdraw,
		withdraw,
		getCreatorInfo
	} from '@/api/userInfo.js'
	export default {
		data() {
			return {
				amt: '',
				userInfo: {},
				checkFlag: false,
				noClick: true, //防止重复提交
				creatorAccountList: [],
				accountNo: '',
				accountRealNo: '', //真实已加密账户账号
				type: '',
				current: 0,
				payType: [{
						icon: 'icon-weixin',
						title: '微信',
						color: '#15ba11'
					},
					{
						icon: 'icon-yinhangka',
						title: '银行卡',
						color: '#0b6375'
					},
					{
						icon: 'icon-zhifubao',
						title: '支付宝',
						color: '#027aff'
					}
				],
			}
		},
		onShow() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				console.log('havent userInfo')
				uni.showModal({
					content: '艺术家账户过期,请重新登录！',
					showCancel: false,
					success() {
						//没有缓存则跳转登录页面
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});
			} else {
				this.userInfo = userInfo;
				console.log('have userInfo')
				this.getCreatorAccount();
			}

		},
		methods: {
			// 查询艺术家账户列表
			async getCreatorAccount() {
				let that = this;
				const res = await getCreatorAccount(that.userInfo.id)
				if (res.data.code === 200) {
					if (!res.data.data.length) {
						return uni.showModal({
							title: '提示',
							content: '当前暂无银行卡，请点确认绑定',
							success: ({
								confirm,
								cancel
							}) => {
								confirm && uni.navigateTo({
									url: '/pages-userInfo/creatorAccount/createAccount'
								})
								cancel && uni.navigateBack()

							}
						})
					}
					that.creatorAccountList.push(...res.data.data)
					for (let param of res.data.data) {
						if (param.isUse === '1') {
							that.accountNo = param.accountNo;
							that.accountRealNo = param.accountRealNo;
							that.type = param.type;
						}
					}
					console.log('creatorAccountList', that.creatorAccountList)
				} else {
					uni.showModal({
						content: '获取艺术家账户列表数据加载失败！',
						showCancel: false
					});
				}
			},

			radioChange: function(evt) {
				const param = JSON.parse(evt.detail.value);
				let that = this;
				that.type = param.type;
				that.accountNo = param.accountNo;
			},

			//检查是否超出余额或少于1元
			checkAmt: function() {
				let that = this;
				if (parseFloat(that.amt) > parseFloat(that.userInfo.amt)) {
					that.checkFlag = true;
				} else if (parseFloat(that.amt) < parseFloat(1)) {
					that.checkFlag = true;
				} else {
					that.checkFlag = false;
				}
			},
			allWithdraw() {
				let that = this;
				if (that.userInfo.amt > 0)
					that.amt = that.userInfo.amt;
			},
			//提现
			async withdraw() {
				let that = this;
				console.log('点击了提现，金额为', that.type)
				if (that.amt == null || that.amt == '') {
					uni.showModal({
						content: '请输入提现金额！',
						showCancel: false
					});
				}
				if (that.checkFlag == true) {
					//console.log('that.checkFlag',that.checkFlag)
					uni.showModal({
						content: '输入金额超过或少于可提现余额！',
						showCancel: false
					});
				} else {
					//校验服务器是否可以提现
					const param = {
						creatorId: that.userInfo.id,
						amt: that.amt
					}
					const checkRes = await checkWithdraw(param);
					if (checkRes.data.code === 200) {
						//服务器返回true可提现
						if (checkRes.data.data === true) {
							const withdrawParam = {
								creatorId: that.userInfo.id,
								amt: that.amt,
								accountNo: that.accountRealNo,
								channel: that.type
							}
							console.log('withdrawParam', withdrawParam)
							const withdrawRes = await withdraw(withdrawParam);
							if (withdrawRes.data.code === 200) {
								//更新艺术家缓存
								const creatorInfo = await getCreatorInfo(that.userInfo.id);
								console.log('creatorInfo', creatorInfo)
								if (creatorInfo.data.code === 200) {
									uni.setStorage({
										key: 'userInfo',
										data: creatorInfo.data.data,
										success() {
											uni.showModal({
												title: '提示',
												content: '发起提现成功,请等待审核!',
												showCancel: false,
												success() {
													uni.reLaunch({
														url: '/pages-userInfo/withdraw/withdrawIndex'
													});
												}
											});
										}
									})
								} else {
									uni.showModal({
										content: '获取艺术家信息失败！',
										showCancel: false
									});
								}


							} else {
								uni.showModal({
									content: '发起提现申请失败！',
									showCancel: false
								});
							}
						} else {
							//不可提现
							uni.showModal({
								content: '输入金额超过或少于可提现余额！',
								showCancel: false
							});
						}
					} else {
						uni.showModal({
							content: '检查艺术家是否可提现失败！',
							showCancel: false
						});
					}

					// await checkWithdraw(param).then(res =>{
					// 	if(res.data.code === 200){
					// 		if(res.data.data === true){
					// 			//可提现
					// 			const withdrawParam = {
					// 				creatorId: that.userInfo.id,
					// 				amt: that.amt,
					// 				accountNo: that.accountNo,
					// 				channel: that.type
					// 			}
					// 			await withdraw(withdrawParam).then(resp =>{
					// 				if(res.data.code === 200){
					// 					uni.showToast({
					// 						title: '发起提现成功,请等待审核!',
					// 						duration: 2000,
					// 						success() {
					// 							uni.reLaunch({
					// 								url: '/pages-userInfo/withdraw/withdrawIndex'
					// 							});
					// 						}
					// 					});
					// 				}else{
					// 					uni.showModal({
					// 						content: '发起提现申请失败！',
					// 						showCancel: false
					// 					});
					// 				}
					// 			})
					// 		}else{
					// 			//不可提现
					// 			uni.showModal({
					// 				content: '输入金额超过可提现余额！',
					// 				showCancel: false
					// 			});
					// 		}
					// 	}else{
					// 		uni.showModal({
					// 			content: '检查艺术家是否可提现失败！',
					// 			showCancel: false
					// 		});
					// 	}
					// })
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-bg {

		.main-container {
			width: 670rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			margin-top: 36rpx;

		}

	}

	.withdraw-input-box {
		width: 590rpx;
		padding: 40rpx;
		background: $uni-bg-base-color;
		border-radius: 10rpx;
	}

	.withdraw-title {
		font-size: 28rpx;
		font-weight: 400;
		color: $uni-white;
	}

	.withdraw-amount {
		font-size: 28rpx;
		font-weight: 400;
		color: $uni-secondary-color;
		margin-top: 18rpx;
		display: flex;
		justify-content: space-between;

		.all-withdraw {
			color: $uni-primary;
		}
	}

	.withdraw-amount-tip {
		font-size: 28rpx;
		font-weight: 400;
		color: $uni-white;
		margin-top: 18rpx;
	}

	.input-box {
		height: 100rpx;
		width: 590rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 60rpx;
		font-weight: bold;
		color: $uni-white;
		opacity: 1;
		border-bottom: 2rpx solid $uni-secondary-color;
		;
	}

	.input-box .input-value {
		flex: 1 auto;
		margin-left: 10rpx;
		height: 80rpx;
	}

	.tl-flex-row {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
	}

	.withdraw-account-list {
		width: 590rpx;
		padding: 40rpx;
		background: $uni-bg-base-color;
		border-radius: 10rpx;
	}

	.tl-title-margin {
		margin: 20rpx 0;
	}

	.error-message {
		font-size: 26rpx;
		font-weight: 400;
		color: #E04646;
		margin: 20rpx 0 0;
	}


	.tl-text {
		width: 450rpx;
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
		/*溢出隐藏*/
	}

	.withdrawBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;

		.withdrawBox-title {
			display: flex;
			align-items: center;
			line-height: 48rpx;
		}

		.account-icon {
			height: 48rpx;
			width: 48rpx;
			text-align: center;
			margin-right: 20rpx;
		}

		.account-title {
			font-size: 26rpx;
			color: $uni-white;

		}
	}

	.tl-footer {
		margin-top: 120rpx;
	}

	.withdraw-btn {
		color: $uni-btn-text-color;
	}
</style>
