<template>
	<view style="padding: 30rpx">
		<view class="card_zhaun" style="color: #949494">当前余额：{{ userInfo.money }}</view>
		<view class="card_zhaun">
			<view class="card_zhaun_flex">
				<view class="card_zhaun_flex_title">划转金额</view>
				<input type="number" placeholder="请输入金额" v-model="dataForm.money" />
			</view>
			<view class="card_zhaun_flex">
				<view class="card_zhaun_flex_title">划转给（手机号）</view>
				<input type="number" placeholder="请输入手机号" v-model="dataForm.toPhone" />
			</view>
			<view class="card_zhaun_flex">
				<view class="card_zhaun_flex_title">当前手机号</view>
				<input type="number" disabled placeholder="请输入手机号" v-model="userInfo.mobile" />
			</view>
			<view class="card_zhaun_flex">
				<view class="card_zhaun_flex_title">验证码</view>
				<view style="display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #e8e8e8">
					<input style="border: 0" type="number" v-model="dataForm.smsCode" placeholder="请输入验证码" />
					<view class="code-btn" @click="getCode">{{ current.seconds || codeIngo }}</view>
				</view>
			</view>
		</view>

		<view class="card_zhaun">
			<view style="color: #f29100">温馨提示</view>
			<view style="height: 10rpx"></view>
			<view style="font-size: 28rpx; color: #909399">
				<view>1.划转金额实时到账，不扣手续费；</view>
				<view style="height: 10rpx"></view>
				<view>2.划转成功后实时生效，不支持撤回。</view>
			</view>
		</view>

		<view class="bottom-btn">
			<view class="button-a" @click="confirm">确认</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import api from '@/api/index';
import { Store } from '@/store';
import { toast } from '@/utils/fun.js';
import { useCountDown } from '@/uni_modules/wot-design-uni';

let dataForm = ref({
	toPhone: '',
	smsCode: '',
	money: ''
});

const codeIngo = ref('获取验证码');

const { start, pause, reset, current } = useCountDown({
	time: 60 * 1000,
	onChange(current) {},
	onFinish() {
		codeIngo.value = '重新发送';
	}
});

// 获取验证码方法
const getCode = (e) => {
	if (!userInfo.value.mobile) {
		toast('请输入手机号');
		return;
	}

	if (current.value.seconds) {
		toast('请等待倒计时结束');
		return;
	}

	api.smsCode({
		mobile: userInfo.value.mobile,
		scene: 6
	})
		.then((res) => {
			start();
			toast('验证码发送成功');
		})
		.catch((err) => {
			console.log(err);
			toast('验证码发送失败');
		});
};

const store = Store();
const userInfo = computed(
	() =>
		store.userInfo || {
			inviteCode: '',
			nickname: '',
			mobile: '',
			avatar: '',
			paywallet: {
				balance: 0
			}
		}
);

const confirm = () => {
	if (!dataForm.value.toPhone) return uni.showToast({ title: '请输入划转手机号', icon: 'none' });
	if (!dataForm.value.money) return uni.showToast({ title: '请输入划转金额', icon: 'none' });
	if (!dataForm.value.smsCode) return uni.showToast({ title: '请输入验证码', icon: 'none' });
	api.transfer2other(dataForm.value).then((res) => {
		uni.showModal({
			title: '提示',
			content: '划转成功',
			showCancel: false,
			success: () => {
				uni.reLaunch({
					url: '/pages/mine/mine'
				});
			}
		});
	});
};
</script>

<style lang="scss" scoped>
.card_zhaun {
	padding: 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 25rpx;
	&_flex {
		margin-bottom: 20rpx;
		&_title {
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
		input {
			font-size: 28rpx;
			border-bottom: 1rpx solid #e8e8e8;
			padding: 5rpx 0;
		}
	}
}

.bottom-btn {
	width: 100%;
	height: 150rpx;
	padding: 30rpx;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	border-radius: 20rpx 20rpx 0 0;
	box-shadow: 0px 6rpx 16rpx 2rpx rgba(170, 170, 170, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;

	.button-a {
		width: 690rpx;
		height: 90rpx;
		background: #799675;
		border-radius: 15rpx;
		text-align: center;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 90rpx;
	}
}

.code-btn {
	width: 175rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	color: #5d7a4e;
	border: 1rpx solid #5d7a4e;
	text-align: center;
	border-radius: 14rpx 14rpx 14rpx 14rpx;
}
</style>
