<template>
	<view class="login_form">
		<!-- 登录方式切换 -->
		<view class="login_type">
			<text :class="{active: login_type === 'phone'}" @click="handleChangeType('phone')">验证码登录</text>
			<text :class="{active: login_type === 'pwd'}" @click="handleChangeType('pwd')">密码登录</text>
		</view>
		<!-- 输入框 -->
		<view>
			<view class="login-input_box">
				<u-input v-model="loginFrom.telPhone" class="login_input" :clearable="false" placeholder="请输入手机号" />
				<text class="input-btn"></text>
			</view>
			<view class="login-input_box" v-show="login_type === 'pwd'">
				<u-input v-model="loginFrom.password" class="login_input" :clearable="false" placeholder="请输入密码" />
				<text class="input-btn" @click="handleResetPassword">忘记密码？</text>
			</view>

			<view class="login-input_box" v-show="login_type === 'phone'">
				<u-input v-model="loginFrom.password" class="login_input" :clearable="false" placeholder="请输入验证码" />
				<text class="input-btn" @click="handleGetCode">{{codeText}}</text>
			</view>
		</view>

		<!-- 登录按钮 -->
		<u-button class="login_btn" @click="handleLogin()">登录</u-button>
		<login-footer></login-footer>
	</view>
</template>

<script>
	let timer = null
	import loginFooter from '../components/login-footer.vue'
	import{ identifyingCodeTime } from '../../../common/config.js'
	export default {
		components: {
			loginFooter
		},
		data() {
			return {
				login_type: 1,
				loginFrom: {
					telPhone: '',
					password: ''
				},
				reaminSec: 0
			}
		},
		onLoad(option) {
			// 登录方式切换
			this.login_type = option.type
		},
		computed: {
			codeText() {
				return this.reaminSec === 0 ? '获取验证码' : `${this.reaminSec}秒`
			}
		},
		methods: {
			handleChangeType(type) {
				this.login_type = type
			},
			handleGetCode() {
				if (this.reaminSec !== 0) {
					return
				}
				this.setCodeText()
			},
			handleLogin() {
				console.log('登录')
			},
			setCodeText() {
				this.reaminSec = identifyingCodeTime
				timer = setInterval(() => {
					this.reaminSec--
					if (this.reaminSec === 0) {
						clearInterval(timer)
						timer = null
					}
				}, 1000)
			},
			handleResetPassword() {
				uni.navigateTo({
					url: '../reset-password/reset-password'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login_form {}

	.login_type {
		width: 440rpx;
		margin: 140rpx auto 0;
		height: 76rpx;
		border-radius: 48rpx;
		border: 2rpx solid #FE192F;
		display: flex;
		background-color: transparent;
		align-items: center;
		color: #FFFFFF;
		overflow: hidden;
		box-sizing: border-box;

		text {
			flex: 1;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			color: #FE192F;

			&:first-child.active {
				background: linear-gradient(90deg, #FC2234 100%, #ED7A66 0%);
				color: #FFFFFF;
			}

			&:last-child.active {
				background: linear-gradient(90deg, #ED7A66 0%, #FC2234 100%);
				color: #FFFFFF;
			}
		}
	}

	.login-input_box {
		margin: 0 auto;
		width: 630rpx;
		height: 96rpx;
		background: #2B3062;
		border-radius: 48rpx;
		margin-top: 40rpx;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		padding: 0 50rpx;

		&:first-child {
			margin-top: 100rpx;
		}

		.input-btn {
			width: 180rpx;
			text-align: center;
			color: #FE192F;
			font-size: 24rpx;
		}
	}

	/deep/ .login_input {
		width: 350rpx;

		input {
			color: #FFFFFF;
		}

	}

	.login_btn {
		margin: 100rpx auto 0;
		color: #FFFFFF;
		font-size: 32rpx;
		width: 630rpx;
		height: 96rpx;
		background: linear-gradient(90deg, #ED7A66 0%, #FC2234 100%);
		border-radius: 48rpx;
		&::after{
			border: none;
		}
	}
</style>
