<template>
	<view>
		<view class="title">
			<view :class="{'green-text': titleIndex === 1}" @click="changeTitle(1)">1.验证手机号码</view>
			<view :class="{'green-text': titleIndex === 2}" @click="changeTitle(2)">2.设置新密码</view>
		</view>
		<view :style="{'background-color':'#fff','width':'100%','height':'100vh' }">
      <view style="width: 95%;height: 30rpx;"></view>
      <view v-if="titleIndex == 1">
        <view style="width: 95%;margin:30rpx auto;">
          <fui-input borderTop placeholder="请输入手机号" v-model="formData.phone" @input="input"
                     backgroundColor="#f2f2f2"></fui-input>
        </view>
        <view style="width: 95%;margin: auto;">
          <fui-input borderTop :padding="['20rpx','32rpx']" v-model="formData.code" placeholder="请输入短信验证码" @input="input"
                     backgroundColor="#f2f2f2">
            <fui-countdown-verify ref="fui_cdv" @send="sendCode"></fui-countdown-verify>
          </fui-input>
        </view>
        <view style="width: 95%;margin: auto; margin-top: 30rpx;" @click="openPicker()">
          <fui-form-item label="" arrow highlight background="#f2f2f2">
            <input class="fui-page__input" v-model="formData.user_type_name" placeholder="请选择用户类型" placeholder-style="color:#ccc;" disabled/>
          </fui-form-item>
        </view>
      </view>

      <view v-if="titleIndex == 2">
        <view style="width: 95%;margin:30rpx auto;">
          <fui-input borderTop placeholder="请设置6-20位新的登录密码" v-model="formData.password" @input="input"
                     backgroundColor="#f2f2f2"></fui-input>
        </view>
        <view style="width: 95%;margin: auto;">
          <fui-input borderTop :padding="['20rpx','32rpx']" v-model="formData.password_2" 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="titleIndex == 1">下一步</fui-button>
        <fui-button background="#00be8c" radius="5rpx" @click="submit" v-if="titleIndex == 2">提交</fui-button>
      </view>
		</view>


    <!-- 选择器 -->
    <fui-picker
        :linkage="true"
        :options="picker_options"
        :layer="1"
        :show="picker_show"
        @change="changeCicker"
        @cancel="cancelCicker">
    </fui-picker>
	</view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';


	export default {
		data() {
			return {
			  //下拉选择器相关
        picker_show:false,//是否展示选择器
        picker_options:[
          {
            text:'学员',
            value:'customer',
          },
          {
            text:'员工',
            value:'personnel',
          }
        ],//下拉选择器数据

			  //重置密码-表单数据
        formData: {
          phone: '',//手机号

          code: '',//短信验证码
          code_type: 'editPassword',//短信验证码类型(发送/验证 短信验证码的类型)|修改密码=editPassword

          password: '',//第一次密码
          password_2: '',//第二次密码

          user_type: '',//用户类型|customer=学生|personnel=员工(销售/教师)
          user_type_name: '',//用户类型名称|customer=学生|personnel=员工(销售/教师)
        },

        titleIndex:1,//状态栏类型|1=验证手机号码|2=设置密码
			}
		},
		onLoad() {},
		methods: {
		  //发送手机验证码
			sendCode() {
				//延时为了效果展示
				setTimeout(() => {
					//发送短信
					//...
					//success方法：短信发送成功后将组件改为倒计时状态
					this.$refs.fui_cdv && this.$refs.fui_cdv.success()
				}, 800)
			},

      //监听-选择器-选择项改变
      changeCicker(e){
        this.formData.user_type = e.value
        this.formData.user_type_name = e.text
        this.cancelCicker()
      },
      //打开选择器
      openPicker(){
			  this.picker_show = true
      },
      //取消选择器
      cancelCicker(){
			  this.picker_show = false
      },

      //下一步
			async nextStep(){
			  //验证验证码和手机号是否填写
        if(!this.formData.code){
          uni.showToast({
            title: '请输入短信验证码',
            icon: 'none'
          })
          return
        }
        if(!this.formData.phone){
          uni.showToast({
            title: '请输入手机号',
            icon: 'none'
          })
          return
        }
        if(!this.formData.user_type){
          uni.showToast({
            title: '请选择用户类型',
            icon: 'none'
          })
          return
        }
				this.titleIndex = 2
			},

      //表单验证
      async validateForm(formData) {
      	// 遍历表单对象的每个属性，检查是否有空值
        if(!formData.phone){
          uni.showToast({
            title: `请填写手机号`,
            icon: 'none'
          });
          this.changeTitle(1)
          return false
        }
        if(!formData.user_type){
          uni.showToast({
            title: `请选择用户类型`,
            icon: 'none'
          });
          this.changeTitle(1)
          return false
        }
        if(!formData.code){
          uni.showToast({
            title: `请填写短信验证码`,
            icon: 'none'
          });
          this.changeTitle(1)
          return false
        }
        if(!formData.password || formData.password != formData.password_2){
          uni.showToast({
            title: `两次密码不一致`,
            icon: 'none'
          });
          this.changeTitle(2)
          return false
        }
      	return true;
      },
      //提交
      async submit(){
			  let params = {...this.formData}
        let res_validateForm = await this.validateForm(params);//表单验证
			  if(!res_validateForm){
			    return
        }

        let res = await apiRoute.common_forgetPassword(params);//重置密码
        if(res.code != 1){
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }
        uni.showToast({
          title: res.msg,
          icon: 'success'
        })
        //延迟1s执行
        setTimeout(() => {
          //跳转页面-登陆页
          uni.navigateTo({
            url: `/pages/student/login/login`
          })
        }, 1000)
			},

      //切换标题
      changeTitle(index){
        this.titleIndex = index
      },
		}
	}
</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>