<script setup>
	// 提现

	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onReady,
		onUnload,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util';
	// 接口
	import api from '@/api/index.js';

	// 表单
	const form = reactive({
		withdrawAmount: '',
	})
	// 提现方式列表
	const typeList = reactive([{
		key: 'alipay',
		name: '支付宝',
		confirm: (event) => getToAlipay(event)
	}, {
		key: 'wechat',
		name: '微信',
		confirm: (event) => getToWechat(event)
	}, {
		key: 'bank',
		name: '银行卡',
		confirm: (event) => getToBank(event)
	}, ])
	// 支付方式下标
	const typeIndex = ref(0)
	// 支付宝账号
	const alipayAccount = ref('未绑定')
	// 微信账号
	const wechatAccount = ref('未绑定')
	// 提现配置
	const config = reactive({})

	onLoad(() => {
		// 获取已绑定的账号
		getBindAccount()
		// 获取提现配置
		getPayConfig()
	})

	onUnload(() => {
		// 移除监听
		removeListener()
	})

	// 开启监听
	function addListener() {
		uni.$on('updateBindingAccount', () => {
			// 获取已绑定的账号
			getBindAccount()
		})
	}

	// 移除监听
	function removeListener() {
		uni.$off('updateBindingAccount')
	}

	// 获取提现配置
	function getPayConfig() {
		api.mine.getPayConfig({}).then(rs => {
			if (rs.code == 200) {
				Object.assign(config, {}, rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 获取已绑定的账号
	function getBindAccount() {
		api.mine.getBindAccount().then(rs => {
			if (rs.code == 200) {
				const result = rs.data
				if (result.alipayId) alipayAccount.value = result.alipayId
				if (result.wechatId) wechatAccount.value = result.wechatId
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 切换下标
	 * @param {Object} ev 选择提现金额
	 */
	function handleTypeIndex(ev) {
		const index = ev.detail.value
		if (typeIndex.value === index) return
		typeIndex.value = index
	}

	// 快速选择收款信息
	function handleFast() {
		// 银行取银行卡 微信 支付宝去我的绑定页面
	}

	/**
	 * 跳转
	 * @param {Object} url 跳转
	 */
	function link(url) {
		uni.navigateTo({
			url,
		})
	}

	// 点击提现
	function handleSubmit() {
		if (!form.withdrawAmount) {
			util.alert('提现金额不能为空')
			return
		}
		if (form.withdrawAmount < config.minWithdrawalAmount) {
			util.alert(`提现金额不能小于${config.minWithdrawalAmount}`)
			return
		}
		// 
		typeList[typeIndex.value].confirm()
	}

	// 提现到支付宝
	function getToAlipay() {
		api.mine.getToAlipay({
			query: {
				account: alipayAccount.value,
				withdrawAmount: form.withdrawAmount,
			}
		}).then(rs => {
			if (rs.code == 200) {
				// 提现回调
				getToWalletCallback()

				// 
				uni.navigateBack()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 提现到微信
	function getToWechat() {
		util.alert('微信暂未开通，请联系管理员')
	}

	// 提现到银行卡
	function getToBank() {
		api.mine.getToBank({}).then(rs => {
			if (rs.code == 200) {
				// 提现回调
				getToWalletCallback()

				util.alert({
					content: '已发起提现申请，请等待后台审核',
					showCancel: false,
				})
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 提现回调
	function getToWalletCallback() {
		// 获取钱包
		util.getPurse()
	}
</script>

<template>
	<view class="appbw">
		<view class="form mtb30 mlr30 f32">

			<view class="line">
				<view class="key">提现金额</view>
				<view class="value inputBox df aic">
					<view class="c333 f40 b">￥</view>
					<input type="text" v-model="form.withdrawAmount" placeholder="输入金额" />
				</view>
			</view>

			<view class="line">
				<view class="key rows">
					<view>选择提现方式</view>
					<view class="c999 f26" @click="handleFast" v-if="typeList[typeIndex].key === 'bank'">快速选择</view>
				</view>
				<picker :range="typeList" range-key="name" @change="handleTypeIndex">
					<view class="value inputBox rows">
						<view class="">{{typeList[typeIndex].name}}</view>
						<uni-icons type="bottom" />
					</view>
				</picker>
			</view>

			<!-- 银行卡 -->
			<template v-if="typeList[typeIndex].key === 'bank'">
				<view class="line">
					<view class="key">银行名称</view>
					<view class="value inputBox">
						<input v-model="form.bank" placeholder="输入金额" />
					</view>
				</view>

				<view class="line">
					<view class="key">银行卡号</view>
					<view class="value inputBox">
						<input v-model="form.account" placeholder="输入金额" />
					</view>
				</view>
			</template>

			<!-- 微信 -->
			<template v-if="typeList[typeIndex].key === 'wechat'">
				<view class="line">
					<view class="key">微信号</view>
					<view class="value inputBox">
						<input v-model="form.wecaht" placeholder="输入金额" />
					</view>
				</view>
			</template>

			<!-- 支付宝 -->
			<template v-if="typeList[typeIndex].key === 'alipay'">
				<view class="line">
					<view class="key f1">支付宝账号</view>

					<view class="value df aic inputBox" @click="link('/pages/mine/setting/binding')">
						{{alipayAccount}}
					</view>
				</view>
			</template>

			<!-- 温馨提示 -->
			<view class="line notice ptb20 plr30 br20">
				<view class="key">温馨提示</view>
				<view class="content mt15 c333 f28">
					<view>为保证账户资金安全，请仔细核对好填写信息，再申请提现</view>
					<view>每次最低提现金额 {{config.minWithdrawalAmount}}</view>
					<view>每次提现手续费 {{config.feeRate * 100}}%</view>
					<view>每日最多提现次数 {{config.dailyWithdrawalLimit}}</view>
				</view>
			</view>

			<view class="line">
				<view class="btn pro black" @click="handleSubmit">提现</view>
			</view>
		</view>

		<!--  -->
		<view class="fill"></view>
	</view>
</template>

<style lang="scss">
	// 表单
	.form {

		.line {
			overflow: hidden;
			margin: 40rpx 0;

			.key {
				font-size: 32rpx;
			}

			.value {
				box-sizing: border-box;
				margin-top: 15rpx;
				padding: 10rpx 20rpx;
				min-height: 80rpx;
			}
		}

		// 
		.notice {
			background-color: #ff888844;

			.content {
				color: #aa3333;
			}
		}
	}
</style>