<template>
	<view class="content">
		<view class="header">
			<image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
			<view class="info-block flex-y-center">
				<view class="info">
					<view class="desc"> 可提现余额 (元)</view>
					<view class="title">{{money}}</view>
				</view>
			</view>
		</view>

		<form @submit="formSubmit">

			<view class="content-row">
				<view class="content-row-title">
					提现金额
				</view>
				<view class="flex-y-center border-b content-row-ip">
					<text class="content-row-pirce">￥</text>
					<input class="flex-grow-1" style="font-size: 40rpx;" type="digit" name="cash_money" :value="relmoney" placeholder="请输入提现金额" />
					<text @click="all" class="content-row-oil">全部提现</text>
				</view>
				<view class="box-pack-between item flex-y-center ft32">
					<text>提现至</text>
					<view class="uni-input flex-y-center" @click="open">
						<image v-if="actIndex==0" src="../../static/images/ali.png" mode=""></image>
						<image v-else-if="actIndex==1" src="../../static/images/wx.png" mode=""></image>
						<image v-else src="../../static/images/black.png" mode=""></image>
						{{array[actIndex].bank_name}}
						<text class="iconfont icongengduo"></text>
					</view>
				</view>
			</view>
			
			<block v-if="actIndex<=1">
				
				<view class="box-pack-between list flex-y-center br">
					<text class="ft32">姓名</text>
					<input class="flex-grow-1 tr ft28" type="text" maxlength="16" name="cash_name" placeholder="请填写姓名"></input>
				</view> 

				<view class="box-pack-between list flex-y-center br">
					<text class="ft32">提现账号</text>
					<input class="flex-grow-1 tr ft28" type="text" maxlength="64" name="cash_num" placeholder="请填写提现账号"></input>
				</view>
			</block>
			
			<button formType="submit" class="flex-center ft28 submit">立即提现</button>
		</form>


		<view class="bottom-bar flex-center">
			<navigator url="addbank">添加银行卡</navigator>
			<navigator url="history" style="margin-left: 30rpx;">提现明细</navigator>
		</view>

		<zx-uni-popup ref="popup" type="bottom">
			<view class="popup-content">
				<view class="popup-content-title ft32 flex-center">
					请选择提现方式
				</view>
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="box-pack-between flex-y-center ft32 pay-list" v-for="(item,index) of array" :key='index' @click="bindArr"
					 :data-index='index' :data-cardname='item.card_name' :data-cardnum='item.card_num'>
						<view class="flex-grow-1 uni-input flex-y-center">
							<image v-if="index==0" src="../../static/images/ali.png" mode=""></image>
							<image v-else-if="index==1" src="../../static/images/wx.png" mode=""></image>
							<image v-else src="../../static/images/black.png" mode=""></image>
							{{item.bank_name}}
						</view>
						<view class="flex-grow-0">
							<image class="round" v-if="index==actIndex?true:false" src="../../static/images/checked.png"></image>
							<view class="round" v-else></view>
						</view>
					</view>
				</scroll-view>
				<navigator url="addbank" class="addback flex-center ft28">
					+添加银行卡
				</navigator>
			</view>
		</zx-uni-popup>
	</view>
</template>

<script>
	import zxUniPopup from '@/components/zx-uni-popup/uni-popup.vue'
	export default {
		components: {
			zxUniPopup,
		},
		data() {
			return {
				info: {},
				money: "",
				price: "",
				card_name: "",
				card_num: "",
				array: [{
						bank_name: "支付宝",
						cash_type: 2,
					},
					{
						bank_name: "微信",
						cash_type: 1,
					},
				],
				index: 0,
				actIndex: 0,
				relmoney: ""
			}
		},


		onLoad(e) {
			this.money = e.money || "";
		},

		onShow(e) {
			this.request({
				url: "Advertiser/userbank",
				data: {
					token: uni.getStorageSync("token"),
				},
			}).then(res => {
				this.info = res;
				console.log(res, "res")
				if (res.code === '200') {
					let arr = res.data;
					for (let i of arr) {
						i.cash_type = 3
					}
					this.array = this.array.concat(arr);
					console.log(this.array, "this.array");
				}
			});
		},

		onHide() {
			this.array = [{
					bank_name: "支付宝",
					cash_type: 2,
				},
				{
					bank_name: "微信",
					cash_type: 1,
				},
			];
		},

		onUnload() {
			this.array = [{
					bank_name: "支付宝",
					cash_type: 2,
				},
				{
					bank_name: "微信",
					cash_type: 1,
				},
			];
		},

		methods: {

			all(e) {
				this.relmoney = this.money;
			},
			more(e) {
				this.price = Number(this.money);
			},

			open(e) {
				this.$refs.popup.open();
			},

			bindArr(e) {
				let index = e.currentTarget.dataset.index;
				this.card_name = e.currentTarget.dataset.cardname;
				this.card_num = e.currentTarget.dataset.cardnum;
				this.actIndex = index;
				this.$refs.popup.close();
			},

			formSubmit(e) {
				
				let data = e.detail.value;
				
				data.token = uni.getStorageSync("token");
				console.log(this.actIndex,this.array)
				data.cash_type = this.array[this.actIndex].cash_type;
				data.cash_type_name = this.array[this.actIndex].bank_name;
				if(Number(this.actIndex)>1){
					data.cash_name = this.array[this.actIndex].card_name;
					data.cash_num = this.array[this.actIndex].card_num;
				}
				this.request({
					url: "Advertiser/cash",
					data,
				}).then(res => {
					console.log(res, "res")
					if (res.code === "200") {
						uni.showToast({
							title: "申请成功",
							icon: 'none',
							duration: 2000,
							success: (res) => {
								setTimeout(() => {
									uni.navigateBack();
								}, 2e3)
							},
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
				});
			},
		}
	}
</script>

<style>
	@import url("@/static/css/header.css");
	.content-row {
		padding: 0 40rpx;
	}

	.content-row-title {
		font-size: 36rpx;
		padding: 64rpx 0rpx;
	}

	.content-row-pirce {
		font-size: 48rpx;
	}

	.content-row-oil {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #368bfe;
	}

	.content-row-ip {
		padding-bottom: 24rpx;
	}

	.item {
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
	}

	.uni-input image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.round {
		width: 30rpx;
		height: 30rpx;
		border: 1rpx solid #C8C7CC;
		border-radius: 50%;
	}

	.block {
		background: #fff;
		padding: 30rpx 24rpx;
	}

	.uni-input image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.user-money {
		font-size: 15pt;
	}

	.cash-max-day {
		font-size: 9pt;
		margin-top: 18rpx;
		color: #888;
	}

	.cash-cny {
		font-size: 19pt;
		color: #000;
		line-height: 1.7;
	}

	.cash-input {
		font-size: 19pt;
		height: 100%;
		width: 100%;
		padding: 0 32rpx;
	}

	.cash-min {
		font-size: 9pt;
	}

	.cash-btn {
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(132deg, $uni-oil-btn-color-left 0%, $uni-oil-btn-color-right 100%);
		box-shadow: 0px 2rpx 12rpx $uni-oil-btn-color-left;
		opacity: 1;
		border-radius: 45rpx;
		margin: 0 auto;
	}

	.cash-max-detail {
		border: 1rpx solid #bbb;
		padding: 4rpx 8rpx;
		border-radius: 5rpx;
		margin-left: 24rpx;
	}


	.popup-content {
		width: 100%;
		height: 656rpx;
		background: #fff;
		padding: 40rpx;
	}

	.scroll-view {
		width: 100%;
		height: 456rpx;
	}

	.pay-list .none {
		display: none;
	}

	.addback {
		width: 300rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 1);
		border: 2px solid rgba(244, 244, 244, 1);
		opacity: 1;
		border-radius: 4rpx;
		color: #000;
		margin: 0 auto;
	}

	.pay-list {
		height: 110rpx;
	}

	.submit {
		width: 670rpx;
		height: 98rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 80rpx;
	}

	.bottom-bar {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #3387ff;
		width: 100%;
		padding: 15px 0;
		position: fixed;
		bottom: 10px;
	}

	.list {
		height: 100rpx;
		padding: 0 30rpx;
		background: #fff;
	}
</style>
