<template>
	<el-layout>
		<el-navbar :fixed="true" :autoBack="true" :border="false" bgColor="transparent" :titleStyle="{ color: '#fff' }" title="申请提现"></el-navbar>
		<view class="header">
			<view class="wrap">
				<view class="text">可提现金额（元）</view>
				<view class="amount">
					<view>{{ config.amount || "0.00" }}</view>
					<view @click="navigateTo('pages/ucenter/withdraw/log')">提现记录</view>
				</view>
			</view>
		</view>
		
		<view class="wrapper">
			<view class="withdraw">
				<view class="withdraw-box">
					<view class="text">提现金额</view>
					<view class="amount">
						<view>￥</view>
						<view>
							<input type="number" v-model="amount" placeholder="请输入提现金额" placeholder-style="font-size: 30rpx" />
						</view>
					</view>
					
					<view class="payment">
						<view>提现至</view>
						<view @click="onWithdrawSelect">
							<text>{{ selected.name }}</text>
							<uni-icons type="right" color="#666"></uni-icons>
						</view>
					</view>
					
					<view class="account" v-if="selected.id != -1">
						<view>{{ isEmpty(bank) ? '-' : bank.real_name }}</view>
						<view @click="onBindSelect" v-if="isEmpty(bank)">填写</view>
						<view @click="onBindSelect" v-if="!isEmpty(bank)">修改</view>
					</view>
					
					<view class="submit" @click="onSubmit">确认提现</view>
				</view>
			</view>
			
			<view class="clause">
				<view class="clause-box">
					<view class="title">提现说明</view>
					<view class="content">
						<view v-for="(value,index) in config.content" :key="index">{{ value }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<el-popup ref="withdraw" class="withdraw-popup" direction="bottom" backgroundColor="rgb(248, 248, 248)" @close="onWithdrawClose">
			<view class="title">选择提现方式</view>
			<view style="width: 100%; height: 100rpx;"></view>
			<scroll-view :style="{ 'height' :  '300px' }">
				<view class="wrapper">
					<view class="list-wrap">
						<view 
						class="list-box" 
						v-for="(item,index) in list" 
						:key="index"
						@click="onWithdrawSelected(item)"
						>
							<view class="payment">
								<view>
									<image :src="item.icon"></image>
								</view>
								<view>{{ item.name }}</view>
							</view>
							<view class="selected">
								<view :class="{ active: item.id == selected.id }">
									<uni-icons class="icon" type="checkmarkempty" color="#fff" size="12"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</el-popup>
		
		<el-popup ref="bind" class="bind-popup" direction="bottom" backgroundColor="#fff" @close="onBindClose">
			<view class="title">绑定{{ selected.name }}</view>
			<view style="width: 100%; height: 100rpx;"></view>
			<scroll-view :style="{ 'height' :  '300px' }">
				<view class="wrapper">
					<view class="form-box">
						<view v-if="inArray(selected.code,['wechat','alipay'])">
							<view class="field-box">
								<view class="label">真实姓名</view>
								<view class="content">
									<input type="text" v-model="bindParams.online.real_name" placeholder="请输入真实姓名" placeholder-style="font-size: 28rpx" />
								</view>
							</view>
							<view class="field-box">
								<view class="label">绑定帐号</view>
								<view class="content">
									<input type="text" v-model="bindParams.online.account" :placeholder="selected.id == 1 ? '请输入微信号' : '请输入支付宝登录帐号(手机号|邮箱)'" placeholder-style="font-size: 28rpx" />
								</view>
							</view>
						</view>
						<view v-else>
							<view class="field-box">
								<view class="label">持卡人</view>
								<view class="content">
									<input type="text" v-model="bindParams.bank.real_name" placeholder="请输入持卡人" placeholder-style="font-size: 28rpx" />
								</view>
							</view>
							<view class="field-box">
								<view class="label">开户行</view>
								<view class="content">
									<input type="text" v-model="bindParams.bank.bank_name" placeholder="请输入开户行" placeholder-style="font-size: 28rpx" />
								</view>
							</view>
							<view class="field-box">
								<view class="label">银行卡号</view>
								<view class="content">
									<input type="text" v-model="bindParams.bank.bank_code" placeholder="请输入银行卡号" placeholder-style="font-size: 28rpx" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="footer">
				<text class="btn" @click="onSavePayment">保存</text>
			</view>
		</el-popup>
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { nextTick, ref } from "vue";
	import { inArray,isEmpty } from "@/el-ui/libs/check";
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const list      = ref([]);
	const config 	= ref({ amount: 0.00, status: 1 });
	const withdraw  = ref();
	const bind  	= ref();
	onLoad(()=>{
		getDetail();
	});
	
	const getDetail = ()=>{
		uni.$http.get("ucenter.withdraw/index").then(res=>{
			if(res.code && !isEmpty(res.data)){
				config.value = res.data.config;
				list.value   = res.data.payment;
			}
		});
	}
	
	const amount = ref('');
	const onSubmit = ()=>{
		if(!config.value.status){
			uni.$layer.showToast("提现已关闭，如有疑问请联系客服");
			return false;
		}
		
		if(amount.value <= 0){
			uni.$layer.showToast("请填写提现金额");
			return false;
		}
		
		if(selected.value.id == -1){
			uni.$layer.showToast("请选择汇款方式");
			return false;
		}
		
		uni.$http.post("ucenter.withdraw/index",{ pay_id: selected.value.id, price: amount.value }).then(res=>{
			if(res.code){
				getDetail();
				amount.value = '';
				uni.$layer.showToast("提现成功，请等待管理员审核。");
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
	const onWithdrawSelect = ()=>{
		withdraw.value?.open();
	}
	
	const bank     = ref();
	const selected = ref({ id: -1, code: "", name: "请选择" });
	const onWithdrawSelected = (value)=>{
		uni.$http.post("ucenter.withdraw/bank",{ id: value.id }).then(res=>{
			if(res.code){
				bank.value = res.data;
				if(!isEmpty(res.data)){
					if(inArray(value.code,['wechat','alipay'])){
						bindParams.value.online = res.data;
					}else{
						bindParams.value.bank   = res.data;
					}
				}
			}
		});
		selected.value = value;
		withdraw.value?.close();
	}
	
	const onWithdrawClose = ()=>{
		withdraw.value?.close();
	}
	
	const bindParams = ref({
		online: { real_name: "", account: "" },
		bank: { real_name: "", bank_name: "", bank_code: "" }
	});
	const onSavePayment = ()=>{
		if(selected.value.id == -1){
			uni.$layer.showToast("请选择汇款方式");
			return false;
		}
		
		let type = inArray(selected.value.code,['wechat','alipay']);
		if(type){
			if(isEmpty(bindParams.value.online.real_name)){
				uni.$layer.showToast("请填写真实姓名");
				return false;
			}
			
			if(isEmpty(bindParams.value.online.account)){
				uni.$layer.showToast("请填写绑定帐号");
				return false;
			}
		}else{
			if(isEmpty(bindParams.value.bank.real_name)){
				uni.$layer.showToast("请填写持卡人");
				return false;
			}
			
			if(isEmpty(bindParams.value.bank.bank_name)){
				uni.$layer.showToast("请填写开户行");
				return false;
			}
			
			if(isEmpty(bindParams.value.bank.bank_code)){
				uni.$layer.showToast("请填写银行卡号");
				return false;
			}
		}
		
		let params 	  = type ? bindParams.value.online : bindParams.value.bank;
		params.pay_id = selected.value.id;
		bank.value    = params;
		uni.$http.post("ucenter.withdraw/save",params).then(res=>{
			if(res.code){
				bind.value?.close();
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
	const onBindSelect = ()=>{
		bind.value?.open();
	}
	
	const onBindClose = ()=>{
		bind.value?.close();
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 400rpx;
		background-color: var(--ui-bg-color);
		border-radius: 0 0 13% 13%;
		display: flex;
		justify-content: center;
		.wrap {
			width: 90%;
			display: flex;
			flex-direction: column;
			margin-top: 70px;
			.text {
				color: #fff;
				font-size: 28rpx;
				padding-bottom: 10rpx;
			}
			.amount {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				view {
					color: #fff;
					&:nth-child(1){
						font-size: 60rpx;
						font-weight: bold;
					}
					&:nth-child(2){
						border: 1px solid #fff;
						border-radius: 20rpx;
						font-size: 28rpx;
						height: 40rpx;
						padding: 5rpx 20rpx;
					}
				}
			}
		}
	}
	.wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		top: -50px;
		.withdraw {
			background-color: #fff;
			width: 92%;
			min-height: 300rpx;
			border-radius: 15rpx;
			.withdraw-box {
				padding: 30rpx;
				.text {
					font-size: 28rpx;
				}
				.amount {
					display: flex;
					flex-direction: row;
					border-bottom: 1px solid #eee;
					margin-top: 10rpx;
					padding: 30rpx 0 15rpx 0;
					view {
						&:nth-child(1){
							font-size: 50rpx;
							color: #666;
							position: relative;
							top: 5rpx;
							/* #ifdef MP-WEIXIN */
							top: -11rpx;
							/* #endif */
						}
						&:nth-child(2){
							position: relative;
							top: 5rpx;
							width: 100%;
							input {
								font-size: 50rpx;
							}
						}
					}
				}
				.payment {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					height: 80rpx;
					align-items: center;
					view {
						font-size: 28rpx;
						color: #666;
					}
				}
				.account {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					height: 40rpx;
					align-items: center;
					view {
						font-size: 28rpx;
						color: #999;
						&:nth-child(2){
							background-color: var(--ui-bg-color);
							font-size: 22rpx;
							color: #fff;
							padding: 6rpx 20rpx;
							border-radius: 20rpx;
						}
					}
				}
				.submit {
					margin-top: 40rpx;
					text-align: center;
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 50rpx;
					background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					color: #fff !important;
				}
			}
		}
		
		.clause {
			background-color: #fff;
			width: 92%;
			min-height: 300rpx;
			border-radius: 15rpx;
			margin-top: 30rpx;
			.clause-box {
				padding: 30rpx;
				.title {
					font-size: 30rpx;
					margin-bottom: 20rpx;
				}
				.content {
					margin-top: 10rpx;
					color: #888;
					view {
						font-size: 24rpx;
						padding: 5rpx 0;
					}
				}
			}
		}
	}
	.withdraw-popup {
		.title {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			position: absolute;
			left: 0;
			top: 0px;
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}
		.wrapper {
			padding: 0rpx;
			margin-top: 20rpx;
			.list-wrap {
				display: flex;
				flex-direction: column;
				width: 100%;
				margin-top: 100rpx;
				.list-box {
					background-color: #fff;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 30rpx;
					border-radius: 15rpx;
					font-size: 28rpx;
					margin-bottom: 20rpx;
					.payment {
						display: flex;
						flex-direction: row;
						align-items: center;
						view {
							&:nth-child(1){
								position: relative;
								top: 3px;
								image {
									width: 40rpx;
									height: 40rpx;
								}
							}
							&:nth-child(2){
								padding-left: 10rpx;
							}
						}
					}
					.selected {
						view {
							width: 15px;
							height: 15px;
							background-color: #bbb;
							padding: 5rpx;
							border-radius: 50%;
							position: relative;
							&.active {
								background-color: #c21313;
							}
							.icon {
								position: absolute;
								left: 9rpx;
								top: 10rpx;
							}
						}
					}
				}
			}
		}
	}
	
	.bind-popup {
		.title {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			position: absolute;
			left: 0;
			top: 0px;
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}
		.wrapper {
			padding: 0rpx;
			margin-top: 20rpx;
			.form-box {
				margin-top: 100rpx;
				width: 100%;
				.field-box {
					display: flex;
					flex-direction: row;
					align-items: center;
					border-bottom: 1px solid #eee;
					height: 100rpx;
					font-size: 26rpx;
					.label {
						width: 200rpx
					}
					.content {
						width: 100%;
					}
				}
			}
		}
		.footer {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn {
				display: block;
				width: 95%;
				background: linear-gradient(90deg, #ff6335, #f9211c);
				font-size: 28rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: #fff;
				border-radius: 50rpx;
			}
		}
	}
</style>