<template>
	<!-- 我的/登录 -->
	<view class="login">
		<!-- 登录logo：猫头鹰蒙眼睛 -->
		<blindfold :show.sync="showEye"></blindfold>
		<!-- 登录表单 -->
		<view class="login-form wrap-card">
			<u--input :placeholder="loginType === '1' ? '请输入昵称/手机号/邮箱' : '请输入手机号'" border="bottom"
				v-model="form.username" placeholderStyle="{color:'#808080'}" :customStyle="{height:'80rpx'}" clearable>
			</u--input>
			<!-- 密码登录 -->
			<u-input v-if="loginType === '1'" type="password" placeholder="请输入密码" border="bottom"
				v-model="form.password" placeholderStyle="{color:'#808080'}" :customStyle="{height:'80rpx'}" clearable
				@focus="hideEye(true)" @blur="hideEye(false)">
				<template slot="suffix">
					<text class="text-gray-400">
						忘记密码
					</text>
				</template>
			</u-input>
			<!-- 验证码登录 -->
			<u-input v-if="loginType === '2'" type="password" placeholder="请输入验证码" border="bottom" v-model="form.code"
				placeholderStyle="{color:'#808080'}" :customStyle="{height:'80rpx'}" clearable @focus="hideEye(true)"
				@blur="hideEye(false)">
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒后重新获取" keepRunning
						uniqueKey="login-form"></u-code>
					<u-button @tap="getCode" :text="tips" type="success"></u-button>
				</template>
			</u-input>
		</view>
		<!-- 登录按钮 -->
		<u-button :customStyle="btnStyle" :ripple="true" shape="circle" @click="submit()">登录
		</u-button>
		<!-- 登录切换 -->
		<view class="flex justify-center items-center mt-50 text-green-400">
			<view class="" @click="changeType()">
				{{loginType === '1' ? '验证码登录' : '密码登录'}}
			</view>
			<view class="mx-20">
				<u-line length="20rpx" color="#d6d7d9" direction="col"></u-line>
			</view>
			<view class="">
				登录遇到问题
			</view>
		</view>
		<!-- 社交账号登录 -->
		<other-login class="px-50"></other-login>
		<!-- 协议 -->
		<view class="text-center fixed bottom-0 left-0 right-0 mb-20">
			<text class="text-gray-400">注册即代表您同意</text><text
				class="text-green-400 underline underline-offset-2">《分享社区协议》</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginType: '1', // 1:密码 2:验证码
				tips: '',
				showEye: false,
				form: {
					username: '',
					password: '',
					code: ''
				},
				btnStyle: {
					width: "90%",
					height: "100rpx",
					marginTop: '50rpx',
					background: "linear-gradient(-45deg,#01906c,#34D399)",
					color: "#FFFFFF",
					fontSize: "30rpx",
				},
			}
		},
		methods: {
			// 隐藏眼睛
			hideEye(type) {
				this.showEye = type
			},
			// 切换类型
			changeType() {
				this.loginType = this.loginType === '1' ? '2' : '1'
			},
			// 验证码改变
			codeChange(text) {
				this.tips = text
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在发送验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送')
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start()
					}, 2000)
				} else {
					uni.$u.toast('请倒计时结束后再发送')
				}
			},
			// 提交登录
			submit() {
				this.$u.route({
					type: 'switchTab',
					url: '/pages/home/home'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		padding-top: 150rpx;

		.login-form {}

	}
</style>
