<template>
	<view class="tel-login">
		<view class="tel-title">
			欢迎登录内核招聘
		</view>
		<view class="input-box u-flex u-row-between">
			<input type="number" class="u-flex-1" placeholder="输入手机号码(新号码自动注册)" v-model="tel">
		</view>
		<view class="input-box u-flex u-row-between">
			<input type="number" class="u-flex-1" placeholder="输入验证码" v-model="code">
			<text class="send" @click="getCode" v-if="!timeEnd && !verificationTime ">获取验证码</text>
			<text class="send"  v-else-if="verificationTime">{{verificationTime}}s</text>
			<text class="send" @click="getCode" v-else-if="timeEnd">重新获取验证码</text>
		</view>
		<view class="xieyi-box u-flex u-row-center">
			<u-checkbox-group v-model="xieyi">
				<u-checkbox  shape="circle" active-color="#0C66C2"></u-checkbox>
			</u-checkbox-group>
			<view class="u-flex">
				<text class="text1">登录代表您已同意</text>
				<text class="text2" @click.stop="toxieyi(1)">《用户协议》</text>
				<text class="text1">、</text>
				<text class="text2" @click.stop="toxieyi(2)">《隐私协议》</text>
			</view>
		</view>
		<view class="login-btn" @click="toyaoqing">
			登录
		</view>
	</view>
</template>

<script>
	import {getCode,mobileLogin} from "../units/inquire.js"
	export default {
		data() {
			return {
				xieyi: false,
				tips: '',
				seconds: 10,
				tel: '',
				code: '',
				verificationTime:'',
				timeEnd:false,
				// getcode:true
			}
		},
		onLoad() {

		},
		methods: {
			toxieyi(type){
				uni.navigateTo({
					url:"/pagesA/xieyi?type=" + type
				})
			},
			getCode() {
				if (!this.xieyi) {
					this.$u.toast("请勾选协议")
					return
				}
				if (!this.$u.test.mobile(this.tel)) {
					this.$u.toast("请输入正确的手机号")
					return
				}
				//获取验证码接口
				getCode(
				{
					mobile: this.tel,
					event: 'login'
				}).then(res=>{
					// this.getcode = false
					if (res.code == 1) {
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						// this.$refs.uCode.start();
						this.verificationTime = 30
						this.verificationDown()
					} else {
						this.$u.toast(res.msg)
					}
				})
				if (true) {
					// 模拟向后端请求验证码
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			//验证码倒计时
			verificationDown() {
			    // 设置定时器
				this.timer = setInterval(() => {
			        this.verificationTime = this.verificationTime - 1
				    if (this.verificationTime < 10) this.verificationTime = '0' + this.verificationTime
			            if (this.verificationTime <= 0) {
			                // 清除定时器
						    clearInterval(this.timer)
							this.timeEnd = true
							this.verificationTime=false
					    }
				}, 1000)
			},
			toyaoqing() {
				if (!this.xieyi) {
					this.$u.toast("请勾选协议")
					return
				}
				if (!this.$u.test.mobile(this.tel)) {
					this.$u.toast("请输入正确的手机号")
					return
				}
				if (!this.code) {
					this.$u.toast("请输入验证码")
					return
				}
				uni.showLoading({
					title: '请稍后',
					mask: true
				})
				mobileLogin({
					mobile: this.tel,
					captcha: this.code,
					is_auth: 1,
					is_agree: 1
				}).then(res=>{
					if (res.code == 1) {
						this.$u.toast("登录成功")
						uni.setStorageSync("token", res.data.userinfo.token)
						uni.setStorageSync("user_id", res.data.userinfo.id)
						uni.setStorageSync("is_profile", res.data.userinfo.group_info.is_resume)
						if (res.data.userinfo.group_info.is_resume == 0) {
							setTimeout(() => {
								uni.navigateTo({
									url: "/pagesA/yaoqing"
								})
							}, 800)
						} else {
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/index/index"
								})
							}, 800)
						}
					} else {
						this.$u.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tel-login {
		padding: 0 52rpx;

		.login-btn {
			line-height: 96rpx;
			background: #0C66C2;
			border-radius: 16rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.xieyi-box {
			padding: 34rpx 0;
			margin-bottom: 84rpx;

			.text1 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #141414;
			}

			.text2 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #0C66C2;
			}
		}

		.input-box {
			height: 126rpx;
			border-bottom: 1rpx solid rgba(244, 244, 244, 1);

			input {
				font-size: 32rpx;
			}

			.send {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #0C66C2;
			}
		}

		.tel-title {
			padding: 82rpx 0 56rpx 0;
			font-size: 44rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
		}
	}
</style>