<template>
	<view class="loginContent">
		<view class="loginContainer">
			<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 :adjust-position="false" 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 :adjust-position="false" 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>
		<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;
		
		.loginContainer{
			.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: 90rpx;
							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);
				}
			}
		}
		.wxLoginBox {
			margin-top: 200rpx;
			text-align: center;
			.wxIconBox {
				padding-bottom: 40rpx;
			}
		
			.wxLoginLabel {
				color: rgba(102, 102, 102, 1);
				font-size: 34rpx;
				letter-spacing: 1rpx;
			}
		}
		
	}
</style>