<template>
	<view class="loginContent">
		<view class="loginLogBox">
			<view class="log">
				<image src="../../static/videoProject/logo.png" mode="widthFix"></image>
			</view>
			<view class="title">
				您好，欢迎登录！
			</view>
		</view>
		<view class="loginInputBox">
			<view class="loginInputLine" style="margin-bottom: 40rpx;">
				<view class="phoneImage">
					<image src="../../static/videoProject/phone.png" mode="widthFix"></image>
				</view>
				<input v-model="mobile" maxlength="11" type="number" placeholder="请输入手机号">
			</view>
			<view class="codeBox">
				<view class="loginInputLine">
					<view class="codeImage">
						<image src="../../static/videoProject/code.png" mode="widthFix"></image>
					</view>
					<input v-model="code" maxlength="6" type="number" placeholder="请输入验证码">
				</view>
				<view class="code" @click="c_sendCode">
					{{sendCodeHtml}}
				</view>
			</view>
		</view>
		<view class="loginButtonBox" @click="loginVerification">
			<view>
				登录
			</view>
		</view>
		<view class="wxLoginBox" @click="getWeChatCode">
			<view class="wxIconBox">
				<text class="iconfont icon-iconfontzhizuobiaozhunbduan32"></text>
			</view>
			<view class="wxLoginLabel">
				微信登录
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import api from "@/api/api";
	import common from '../../common/common';
	import { onLoad } from "@dcloudio/uni-app";
	//验证码倒计时
	let remainTimes = ref(60);
	//验证码文字
	let sendCodeHtml = ref('获取验证码');
	//计时器
	let timer = ref();
	//手机号
	let mobile = ref(null);
	//验证码
	let code = ref(null);

	let videoId = ref('');

	//点击发送验证码
	const c_sendCode = () => {
		let phoneRs = common.mobileNoValid(mobile.value);
		if (remainTimes.value != 60) {
			return;
		}
		if (phoneRs) {
			uni.showLoading({
				mask: true
			});
			api.verificationCode({ "mobileNo": mobile.value, "type": "1", "source": "cffp" }).then(res => {
				uni.hideLoading();
				if (res['success']) {
					uni.showToast({
						icon: 'none',
						title: '发送成功',
						duration: 2000
					})
					delayTime();
				} else {
					uni.showToast({
						icon: 'none',
						title: res['message'],
						duration: 2000
					})
				}
			})
		} else {
			uni.showToast({
				icon: 'none',
				title: '手机号格式错误',
				duration: 2000
			})
		}
	}
	//开启计时器
	const delayTime = () => {
		timer.value = setInterval(() => {
			remainTimes.value--;
			sendCodeHtml.value = `${remainTimes.value}(S)`;
			if (remainTimes.value <= 0) {
				sendCodeHtml.value = '获取验证码';
				remainTimes.value = 60;
				clearInterval(timer.value);
			}
		}, 1000);
	}
	//登录
	const loginVerification = () => {
		if (!common.mobileNoValid(mobile.value)) {
			uni.showToast({
				icon: 'none',
				title: '手机号格式错误',
				duration: 2000
			})
			return;
		}
		if (!code.value) {
			uni.showToast({
				icon: 'none',
				title: '请输入验证码',
				duration: 2000
			})
			return;
		}

		api.loginVerification({ "loginType": 3, "mobile": mobile.value, "code": code.value, "password": null, "loginSystem": "1" }).then((res) => {
			if (res['success']) {
				uni.setStorageSync('video_userId', String(res['data']['userId']));
				uni.setStorageSync('uni-token', res['data']['token']);
				uni.setStorageSync('isLogin', '1');
				uni.setStorageSync('loginType', 'codelogin');
				videoId.value = res['data']['fileId'];
				next();
			} else {
				uni.showToast({
					title: res['message'],
					duration: 2000,
					icon: 'none'
				})
			}
		})
	}
	const getWeChatCode = () => {
		let param = {
			isPayOrAuth: '3',
			fileId: videoId.value
		}
		api.wxAuthorize(param).then((res) => {
			if (res['success']) {
				window.location.href = res['data']['paymentForm']['action'];
			} else {
				uni.showToast({
					title: res['message'],
					duration: 2000,
					icon: 'none'
				})
			}
		})
	}
	const next = () => {
		uni.redirectTo({
			url: '/myPackageA/videoProject/videoDetail?videoId=' + videoId.value
		})
	};

	onLoad(option => {
		videoId.value = option.videoId ?? null;
		if (uni.getStorageSync('video_userId')) {
			next();
		}
	})
</script>

<style lang="scss">
	.icon-iconfontzhizuobiaozhunbduan32 {
		color: #fff;
		font-size: 70rpx;
		padding: 29rpx 30rpx;
		border-radius: 100rpx;
		background-color: rgba(42, 174, 103, 1);

	}

	.loginContent {
		min-height: 100vh;
		padding: 0rpx 50rpx;
		background: linear-gradient(rgba(232, 207, 181, 1) 0%, rgba(242, 240, 237, 1) 60%);
		position: relative;

		.wxLoginBox {
			position: absolute;
			bottom: 12vh;
			text-align: center;
			left: 42vw;

			.wxIconBox {
				padding-bottom: 40rpx;
			}

			.wxLoginLabel {
				color: rgba(102, 102, 102, 1);
				font-size: 34rpx;
				letter-spacing: 1rpx;
			}
		}

		.loginLogBox {
			padding-top: 10vh;

			.log {
				width: 20vw;
				margin-bottom: 1vh;
				margin-left: 2vw;
			}

			.title {
				font-size: 40rpx;
				color: #000;
				font-weight: 600;
			}
		}

		.loginInputBox {
			margin: 5vh 0;

			.loginInputLine {
				display: flex;
				align-items: center;
				background: rgba(244, 246, 248, 1);
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
				padding: 20rpx 40rpx;
				border-radius: 5rpx;

				.phoneImage {
					width: 55rpx;
					margin-bottom: -6rpx;
					margin-right: 10rpx;
				}
			}

			.codeBox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.loginInputLine {
					width: 300rpx;
					display: flex;

					.codeImage {
						width: 95rpx;
						margin-bottom: -10rpx;
						margin-right: 10rpx;
					}
				}
			}

			.code {
				color: #fff;
				padding: 30rpx 0;
				border-radius: 2px;
				background: linear-gradient(90deg, rgba(235, 196, 155, 1) 0%, rgba(209, 158, 103, 1) 100%);
				box-shadow: 0px 5px 13px rgba(209, 158, 104, 0.3);
				flex-grow: 0.7;
				text-align: center;
			}
		}

		.loginButtonBox {
			view {
				font-size: 38rpx;
				color: #fff;
				border-radius: 200rpx;
				padding: 35rpx 0;
				text-align: center;
				background: linear-gradient(90deg, rgba(235, 196, 155, 1) 0%, rgba(209, 158, 103, 1) 100%);
				box-shadow: 0px 5px 13px rgba(209, 158, 104, 0.3);
			}
		}
	}
</style>