<template>
	<view>
		<!-- 输入框内容 -->
		<view class="menu_title">
			<text>修改/重置密码</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">
				<u-input v-model="loginFrom.code" class="login_input" :clearable="false" placeholder="请输入验证码" />
				<text class="input-btn" @click="handleGetCode">{{codeText}}</text>
			</view>
			<view class="login-input_box">
				<u-input v-model="loginFrom.password" class="login_input" :clearable="false" placeholder="请输入密码" />
				<text class="input-btn"></text>
			</view>
			<view class="login-input_box">
				<u-input v-model="loginFrom.repassword" class="login_input" :clearable="false" placeholder="请再次输入密码" />
				<text class="input-btn"></text>
			</view>
		</view>

		<u-button class="login_btn" @click="handleLogin()">立即修改</u-button>
	</view>
</template>

<script>
	import{ identifyingCodeTime } from '../../../common/config.js'
	let timer = null
	export default {
		data() {
			return {
				loginFrom: {},
				reaminSec: 0
			}
		},
		computed: {
			codeText() {
				return this.reaminSec === 0 ? '获取验证码' : `${this.reaminSec}秒`
			}
		},
		methods: {
			handleResetPassword() {

			},
			handleGetCode() {
				if (this.reaminSec !== 0) {
					return
				}
				this.setCodeText()
			},
			setCodeText() {
				this.reaminSec = identifyingCodeTime
				timer = setInterval(() => {
					this.reaminSec--
					if (this.reaminSec === 0) {
						clearInterval(timer)
						timer = null
					}
				}, 1000)
			},
			handleLogin() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu_title {
		overflow: hidden;
		font-size: 44rpx;
		padding-top: 100rpx;
		padding-left: 60rpx;
		color: #FFFFFF;
		text{
			display: block;
			position: relative;
			width: 350rpx;
			&::after{
				content: '';
				position: absolute;
				left: 0;
				width: 100%;
				height: 8rpx;
				bottom: 0;
				background-color: #FE192F;
			}
		}
	}

	.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>
