<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">
			<view class="wxLoginLabel" @click="getWeChatCode">
				微信登录
			</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('cffp_userId', String(res['data']['userId']));
				uni.setStorageSync('uni-token',res['data']['token']);
				uni.setStorageSync('isLogin', '1');
				uni.setStorageSync('loginType', 'codelogin');
				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.navigateTo({
			url:'/myPackageA/videoProject/videoDetail?videoId='+videoId.value
		})
	};
	
	onLoad(option =>{
		videoId.value = option.videoId ?? null;
		if(uni.getStorageSync('cffp_userId')){
			next();
		}
	})
	
</script>

<style lang="scss">
	.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;
			.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>