<template>
	<view>
		<view class="title">
			<view :class="{'green-text': tset_style === 1}">1.验证手机号码</view>
			<view :class="{'green-text': tset_style === 2}">2.设置新密码</view>
		</view>
		<view :style="{'background-color':'#fff','width':'100%','height':'100vh' }">
			<view style="width: 95%;height: 30rpx;"></view>
			<view v-if="tset_style == 1">
				<view style="width: 95%;margin:30rpx auto;">
					<fui-input borderTop placeholder="请输入手机号" v-model="user" @input="input"
						backgroundColor="#f2f2f2"></fui-input>
				</view>
				<view style="width: 95%;margin: auto;">
					<fui-input borderTop :padding="['20rpx','32rpx']" v-model="code" placeholder="请输入短信验证码" @input="input"
						backgroundColor="#f2f2f2">
						<fui-countdown-verify ref="fui_cdv" @send="sendCode"></fui-countdown-verify>
					</fui-input>
				</view>
			</view>
			<view v-if="tset_style == 2">
				<view style="width: 95%;margin:30rpx auto;">
					<fui-input borderTop placeholder="请设置6-20位新的登录密码" v-model="user" @input="input"
						backgroundColor="#f2f2f2"></fui-input>
				</view>
				<view style="width: 95%;margin: auto;">
					<fui-input borderTop :padding="['20rpx','32rpx']" v-model="code" placeholder="请再次输入新的登录密码" @input="input"
						backgroundColor="#f2f2f2">
					</fui-input>
				</view>
			</view>
			<view style="width: 95%;margin:60rpx auto;">
				<fui-button background="#00be8c" radius="5rpx" @click="nextStep" v-if="tset_style == 1">下一步</fui-button>
				<fui-button background="#00be8c" radius="5rpx" @click="submit" v-if="tset_style == 2">提交</fui-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				user: '',
				tset_style: 1,
			}
		},
		onLoad() {

		},
		methods: {
			sendCode() {
				//延时为了效果展示
				setTimeout(() => {
					//发送短信
					//...
					//success方法：短信发送成功后将组件改为倒计时状态
					this.$refs.fui_cdv && this.$refs.fui_cdv.success()
				}, 800)
			},
			nextStep(){
				this.tset_style = 2
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		font-weight: normal;
	}

	.fui-section__title {
		margin-left: 32rpx;
	}

	.fui-left__icon {
		padding-right: 24rpx;
	}

	.title {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		width: 100%;
		background-color: #fff;
		font-size: 26rpx;
		border: 4rpx #f5f5f5 solid;
	}
	
	.green-text{
		color: #36d6b9;
	}
</style>