<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 class="describe">
					为保障您的账号安全，修改密码前请填写原密码
				</view>
				<view style="width: 95%;margin:30rpx auto;">
					<fui-input borderTop placeholder="请输入原登录密码" v-model="password" backgroundColor="#f2f2f2"></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="passwords" backgroundColor="#f2f2f2"></fui-input>
				</view>
				<view style="width: 95%;margin: auto;">
					<fui-input borderTop :padding="['20rpx','32rpx']" v-model="old_password" placeholder="请再次输入新的登录密码" 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 style="width: 95%;margin:60rpx auto;">
					<fui-button background="#fff" radius="5rpx" @click="forgot" color="#999999"
						v-if="tset_style == 1">忘记原密码</fui-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import member from '@/api/member.js';
	export default {
		data() {
			return {
				password: '',
				passwords: '',
				old_password: '',
				tset_style: 1,
			}
		},
		onLoad() {

		},
		methods: {
			//验证原密码
			nextStep() {
				member.is_pass({
					password: this.password
				}).then(res => {
					if (res.code == 1) {
						this.tset_style = 2
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			//提交
			submit() {
				member.set_pass({
					password: this.passwords,
					old_password: this.old_password,
				}).then(res => {
					if (res.code == 1) {
						this.$util.loginOut();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			forgot() {
				uni.navigateTo({
					url: '/pages-student/login/forgot'
				})
			},
		}
	}
</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;
	}

	.describe {
		color: #999999;
		padding-left: 30rpx;
	}
</style>