<template>
  <div class="see flex-colunm">
    <el-steps :active="active" finish-status="success" style="width: 4.8rem;">
      <el-step title="验证手机号"></el-step>
      <el-step title="重置密码"></el-step>
      <el-step title="找回成功"></el-step>
    </el-steps>
    <!-- 验证手机号 -->
    <div class="verification" v-if="active==0">
      <el-form ref="form" :model="form" label-width="1.4rem" :rules="rules">
        <el-form-item label="手机号" prop="phone" class="item">
          <el-input v-model="form.phone" placeholder="请输入手机号" style="width:2.4rem" maxlength="30"></el-input>
        </el-form-item>
        <div class="getcode">
          <el-form-item label="验证码" prop="code" class="item">
            <el-input v-model="form.code" placeholder="请输入验证码" style="width:1.55rem" maxlength="30"></el-input>
          </el-form-item>
          <div class="code" @click="refreshCode">
            <!--   ：fresh：父组件向子组件传送刷新验证码的信号；
              @makedCode：子组件向父组件传送验证码的值-->
            <Identify :fresh="flag" @makedCode="getMakedCode"></Identify>
          </div>
        </div>
        <div class="getphonecode">
          <el-form-item label="短信验证码" prop="verify" class="item">
            <el-input v-model="form.verify" placeholder="请输入短信验证码" style="width:2.4rem" maxlength="30"></el-input> 
          </el-form-item>
          <div class="phonecode" @click = "getPhoneCode">获取短信验证码</div>
        </div>
      </el-form>
    </div>
    <!-- 重置密码 -->
    <div class="reset" v-if="active==1">
      <el-form ref="organ" :model="organ" label-width="2rem" :rules="rules">
        <el-form-item label="输入密码" prop="password" class="item" >
          <el-input v-model="organ.password" placeholder="请输入密码" style="width:3.4rem" key="organ.password" maxlength="30" show-password></el-input>
        </el-form-item>
        <el-form-item label="请再次输入密码" prop="isPassword" class="item" >
          <el-input v-model="organ.isPassword" placeholder="请再次输入密码" style="width:3.4rem" key="organ.isPassword" maxlength="30" show-password></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 找回密码 -->
    <div class="seek t2" v-if="active==3">
      {{total}}s后自动跳转登录页
    </div>
    <nuxt-link to="/login/user" v-if="active==3" tag="div" class="t2 nextButton">去登陆</nuxt-link>
    <button @click="next" class="t2 nextButton" v-else>下一步</button>

  </div>

</template>
<script>
  import Identify from '~/components/identify'
  import {getVerifyPhone,sendSms,getResetPassword} from '@/common/list.js'
  export default {
    data() {
      // 修改密码验证二次是否输入相同
      let validate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.organ.isPassword !== '') {
            this.$refs.organ.validateField('isPassword');
          }
          callback();
        }
      };
      let validate2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.organ.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      let checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
      };
      let checkCode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        } else {
          let code = this.code;
          console.log(code)
          if (value.toLowerCase() == code.toLowerCase()) {
            callback();
          } else {
            return callback(new Error('请输入正确的验证码'));
          }
        }
      };
      return {
        /* dataMsg:0, */
        total: 3,
        active: 0,
        flag: true, //该值变化，就会触发刷新
        code: '', //刷新后的验证码
        form: {
          phone: "",
          code: "",
          verify: ""
        },
        organ: {
          password: "",
          isPassword: ""
        },
        rules: {
          phone: [{
            required: true,
            validator: checkPhone,
            trigger: 'blur'
          }],
          code: [{
            required: true,
            validator: checkCode,
            trigger: 'blur'
          }],
          verify: [{
            required: true,
            message: '请输入手机验证码',
            trigger: 'blur'
          }],
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              validator: validate,
              trigger: 'blur'
            },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
              message: '密码需由8-16位数字字母组合'
            }
          ],
          isPassword: [{
              required: true,
              message: '请再次输入密码',
              trigger: 'blur'
            },
            {
              validator: validate2,
              trigger: 'blur'
            },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
              message: '密码需由8-16位数字字母组合'
            }
          ],
        }
      };
    },
    components: {
      Identify
    },
    mounted() {
      console.log(this.flag);
      this.flag = !this.flag;
    },
    methods: {
      //发送短信 
      async getPhoneCode(){
          if(this.form.code ===this.code.toLowerCase()){
            let phonemes = {}
            phonemes.phone = this.form.phone
            phonemes.type = 2
            const {data,code} = await sendSms(phonemes)
            //code返回为500时 友情提示账户未注册
            if(code ==500){
              this.$message.error('该手机号没有注册oVo');
            }
          }else{
            alert("验证码输入有误！请重新输入")
          }
        },
      countDown() {
      let clock = window.setInterval(() => {
          this.total--
            if(this.total==0){
              this.$router.push({path: '/login/user'});
            }
        }, 1000)
      },
      next() {
      console.log(this.active);
      if (this.active == 0) {
        //  提交验证手机号操作
        this.$refs.form.validate(valid => {
          if (valid) {
            //验证手机验证码
              let dataform={}
              dataform.phone=this.form.phone
              dataform.verify=this.form.verify
              const {data} = getVerifyPhone(dataform)
              this.active++
              /* } */
          } else {
            this.$message.error('有未填写的选项或者错误选项');
            console.log('error submit!!');
            return false;
          }
        });
        } else if (this.active == 1) {
                // 设置密码
                this.$refs.organ.validate(valid => {
                  if (valid) {
                    this.active = 3
                    //将手机号和重新设置的密码发送给后端
                    let mes = {}
                    mes.phone = this.form.phone
                    mes.password = this.organ.password
                    const {data} = getResetPassword(mes)
                    console.log(data)
                      this.countDown();
                  } else {
                    this.$message.error('有未填写的选项或者错误选项');
                    console.log('error submit!!');
                    return false;
                  }
                });
              } else{

              }
            },
      // 切换验证码
      refreshCode() {
        this.flag = !this.flag;
      },
      getMakedCode(code) {
        this.code = code;
        console.log(this.code);
      }
  }
}
      
</script>

<style scoped>
  .nextButton {
    width: 3rem;
    height: .48rem;
    background: rgba(4, 134, 254, 1);
    border-radius: .04rem;
    line-height: .46rem;
    text-align: center;
    color: #fff;
    margin-bottom: 3.6rem;
    margin-top: 1rem
  }

  .getcode>.code {
    /*margin: 400px auto;*/
    width: .68rem;
    height: .32rem;
    /*border: 1px solid red;*/
    position: absolute;
    top: 0;
    right: 0;
  }

  .item .el-form-item__label {
    font-size: .16rem;
    font-weight: bold;
  }

  .getcode,
  .getphonecode {
    position: relative;
  }

  .getphonecode>.phonecode {
    font-size: .14rem;
    font-weight: 400;
    color: rgba(51, 136, 255, 1);
    position: absolute;
    top: 0.13rem;
    right: -1.5rem;
    cursor: pointer;
  }

  .verification,
  .seek,
  .reset {
    margin-top: 1.1rem;
  }
</style>

