<template>
  <view class="page-bg">
    <view class="main-container">
      <view class="tl-panel">
        <view class="tl-font-28-29">提现金额</view>
        <view class="input-box">
          ¥ <input type="text" placeholder="输入金额" placeholder-class="pch"
		   class="input-value" @blur="checkAmt()" value="" v-model="amt"/>
        </view>
        <view class="tl-font-28-9b">当前余额为￥{{userInfo.amt}} </view>
		<view class="tl-font-28-9b">小贴士：提现金额不少于1元 </view>
      </view>

      <view class="tl-red tl-title-62" v-if="checkFlag == true">输入金额超过当前余额</view>

      <view class="tl-font-28-29 tl-title-60">选择提现至</view>

      <view class="tl-panel-2 tl-flex-row">
        <radio-group @change="radioChange">
          <label v-for="(item, index) in creatorAccountList" :key="index">
            <view class="withdrawBox">
              <view v-if="item.type == '0'">
                <image :src="payType[0].icon" class="tl-img-76"></image>
              </view>
			  <view v-if="item.type == '1'">
			    <image :src="payType[1].icon" class="tl-img-76"></image>
			  </view> 
			  <view v-if="item.type == '2'">
			    <image :src="payType[2].icon" class="tl-img-76"></image>
			  </view><!-- 0->微信 1->银行卡 2->支付宝 -->
			  <view class="tl-font-28-34 tl-name" v-if="item.type == '0'">{{payType[0].title}}  {{item.accountNo}}</view>
			  <view class="tl-font-28-34 tl-name" v-if="item.type == '1'">{{payType[1].title}}  {{item.accountNo}}</view>
		      <view class="tl-font-28-34 tl-name" v-if="item.type == '2'">{{payType[2].title}}  {{item.accountNo}}</view>
			 <view>
			   <radio :value="item" color="#F2C827" :checked="item.isUse === '1'" class="radioStyle"/>
			 </view>
			</view>
          </label>
        </radio-group>
      </view>
      <view class="tl-footer">
        <button class="tl-btn-686 tl-font-28-29" @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: '',
				type: '',
				current: 0,
				payType: [{
							icon: '/static/wxPay.png',
							title: '微信',
						},
						{
						    icon: '/static/wxPay.png',
						    title: '银行卡',
						},
						{
						    icon: '/static/aliPay.png',
						    title: '支付宝',
						}],
			}
		},
		created() {
			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)
				console.log('res', res)
				if (res.data.code === 200) {
					that.creatorAccountList.push(...res.data.data)
					for (let param of res.data.data) {
							if(param.isUse === '1'){
								that.accountNo = param.accountNo;
								that.type = param.type;
							}
					}
					console.log('creatorAccountList', that.creatorAccountList)
				} else {
					uni.showModal({
						content: '获取艺术家账户列表数据加载失败！',
						showCancel: false
					});
				}
			},

			radioChange: function(evt) {
				console.log(JSON.stringify(evt.detail.value));
				let that = this;
				  that.type = evt.detail.value.type;
				  that.accountNo = evt.detail.value.accountNo;
				  console.log(that.type);
				  console.log(that.accountNo);
			    },
				
			//检查是否超出余额
			checkAmt:function(){
				let that = this;
				if(parseFloat(that.amt) > parseFloat(that.userInfo.amt)){
					that.checkFlag = true;
				}else{
					that.checkFlag = false;
				}
			},	
			
			//提现
			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){
							if(checkRes.data.data === true){
								//可提现
								const withdrawParam = {
									creatorId: that.userInfo.id,
									amt: that.amt,
									accountNo: that.accountNo,
									channel: that.type
								}
								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">
	.page-bg {
	  width: 100vw;
	  height: 100vh;
	  overflow: hidden;
	  background-size: 750rpx auto;
	  background-color: #F7F7F7;
	}
	
	.main-container {
	  width: 686rpx;
	  margin: 0 auto;
	  display: flex;
	  flex-direction: column;
	  margin-top: 36rpx;
	}
	.tl-panel{
	  width: 686rpx;
	  height: 296rpx;
	  padding: 32rpx;
	  background: #FFFFFF;
	  border-radius: 8rpx;
	}
	.tl-font-28-29{
	  font-size: 28rpx;
	  font-family: PingFangSC-Regular, PingFang SC;
	  font-weight: 400;
	  color: #292929;
	}
	.tl-font-28-9b{
	  font-size: 28rpx;
	  font-family: PingFangSC-Regular, PingFang SC;
	  font-weight: 400;
	  color: #9B9B9B;
	  margin-top: 18rpx;
	}
	.tl-font-32-29{
	  font-size: 32rpx;
	  font-family: PingFangSC-Regular, PingFang SC;
	  font-weight: 400;
	  color: #292929;
	}
	.input-box {
	  height: 100rpx;
	  width: 650rpx;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  font-size: 60rpx;
	  font-family: PingFang SC;
	  font-weight: bold;
	  color: #43413C;
	  opacity: 1;
	  border-bottom: 2rpx solid #E7E9EE;;
	}
	.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;
	}
	.tl-panel-2{
	  width: 686rpx;
	  padding: 32rpx;
	  background: #FFFFFF;
	  border-radius: 8rpx;
	}
	.tl-title-60{
	  margin: 30rpx 0 20rpx 0;
	}
	
	.tl-title-62{
	  margin: 25rpx 0 30rpx 0;
	}
	
	.tl-panel-card{
	  width: 194rpx;
	  height: 136rpx;
	  line-height: 136rpx;
	  background: #F7F7F7;
	  border-radius: 8rpx;
	}
	.active{
	  background: #FEF5DD;
	  border-radius: 8rpx;
	  font-size: 32rpx;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #F2C827;
	}
	
	.tl-footer{
	  margin-top: 120rpx;
	}
	.tl-btn-686{
	  width: 686rpx;
	  height: 88rpx;
	  line-height: 88rpx;
	  background: #185dff;
	  border-radius: 8rpx;
	  color:white;
	}
	.tl-blue{
	  font-size: 28rpx;
	  font-family: PingFangSC-Regular, PingFang SC;
	  font-weight: 400;
	  color: #2793F2;
	}
	
	.tl-img-76{
	  width: 76rpx;
	  height: 76rpx;
	  border-radius: 38rpx;
	}
	.tl-red{
	  font-size: 24rpx;
	  font-family: PingFangSC-Regular, PingFang SC;
	  font-weight: 400;
	  color: #E04646;
	}
	
	
	/*** 模态框  ***/
	.tl-flex-row{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.tl-line-down{
	  border-bottom: 2rpx solid #EAEAEA;
	  margin: 60rpx 0 20rpx 0;
	  padding-bottom: 30rpx;
	}
	
	.tl-line-16{
	  width: 748rpx;
	  height: 16rpx;
	  background: #F7F7F7;
	}
	.tl-font-60-02{
	  font-size: 60rpx;
	  font-family: DINAlternate-Bold, DINAlternate;
	  font-weight: bold;
	  color: #020202;
	}
	.tl-font-24-9b{
	  font-size: 24rpx;
	  font-family: PingFangSC-Regular, PingFang SC;
	  font-weight: 400;
	  color: #9B9B9B;
	}
	.ml-12{
	  margin-left: 12rpx;
	}
	
	.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: 40rpx 40rpx 20rpx 10rpx;
	}
	.radioStyle{
		margin-left: 200rpx;
	}
</style>
