<template>
  <div>
    <headerlogin></headerlogin>
    <div class="loginBox">
      <h2 class="forgotTil"><span class="gotoButton curCfff" @click="gotoBack"><i class="gotoIcon"></i>返回</span>重置密码</h2>
      <div class="bzTab">
        <div class="siglist">
          <div class="yuan" :class="(forgotPage==1 || forgotPage==2 || forgotPage==3)?'current':''">1</div>
          <div>验证身份</div>
        </div>
        <div class="siglist les">
          <div class="line" :class="(forgotPage==2 || forgotPage==3)?'current':''"></div>
        </div>
        <div class="siglist">
          <div class="yuan" :class="(forgotPage==2 || forgotPage==3)?'current':''">2</div>
          <div>重设密码</div>
        </div>
        <div class="siglist les">
          <div class="line" :class="forgotPage==3?'current':''"></div>
        </div>
        <div class="siglist">
          <div class="yuan" :class="forgotPage==3?'current':''">3</div>
          <div>重设结果</div>
        </div>
      </div>
      <div class="gjhqIpt" v-if="forgotPage == 1">
        <el-form :model="ruleForm" status-icon ref="ruleForm" class="demo-ruleForm demoRuleForm">
          <el-form-item label="手机号">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="验证码" style="position:relative">
            <div class="yzmBox" @click="yzmClick" v-if="yzmShow == true">点击获取验证码</div>
            <div class="yzmBox" v-else>{{timers}}秒</div>
            <el-input v-model="ruleForm.yzmVal" placeholder="请输入验证码"></el-input>
          </el-form-item>
        </el-form>
        <div class="gjhqbtn " style="text-align:center;"><el-button class="gjhqprimarybtn" @click="nextClick('ruleForm')">下一步</el-button></div>
      </div>
      <div class="gjhqIpt" v-if="forgotPage == 2">
        <el-form :model="ruleFormTwe" status-icon :rules="rulesTwe" ref="ruleFormTwe" class="demo-ruleForm demoRuleForm">
          <el-form-item label="设置新密码" prop="password">
            <el-tooltip class="item" effect="dark" content="密码必须包含字母(区分大小写)、数字、特殊字符！禁止使用0, o, O, i, I, l, L！" placement="right-start">
              <el-input v-model="ruleFormTwe.password" placeholder="请输入6-12位密码"></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="再次输入" prop="newpassword">
            <el-input v-model="ruleFormTwe.newpassword" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div class="gjhqbtn " style="text-align:center;"><el-button class="gjhqprimarybtn" @click="nextTweClick('ruleFormTwe')">下一步</el-button></div>
      </div>
      <div class="gjhqIpt" v-if="forgotPage == 3">
        <div class="chenggong" v-if="jhAcitveShow == true">
          <div class="chenggongIcon"></div>
          <div class="cgTile">设置成功</div>
          <div class="gjhqbtn " style="text-align:center;"><el-button class="gjhqprimarybtn" style="padding:0 50px;" @click="goLoginClick">去登录</el-button></div>
        </div>
        <div class="chenggong" v-else>
          <div class="shibaiIcon"></div>
          <div class="cgTiles">设置失败</div>
          <p>网络无连接，请检查网络连接是否通畅。</p>
          <div class="gjhqbtn " style="text-align:center;"><el-button class="gjhqprimarybtn" style="padding:0 50px;" @click="resetClick">重 试</el-button></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { adminSendResetPasswordPphone, adminresetPasswordPPhone } from '../../axios/api'
import headerlogin from './headerlogin.vue'
export default {
  name: 'forgotpage',
  components: { headerlogin },
  data () {
    return {
      newtime: '',
      ruleForm: {
        phone: '',
        yzmVal: ''
      },
      ruleFormTwe: {
        password: '',
        newpassword: ''
      },      
      rulesTwe: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        newpassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' }
        ]
      },
      forgotPage: 1,
      timers: 60,
      yzmShow: true,
      jhAcitveShow: true
    }
  },
  created () {
    let that = this
  },
  methods: {
    gotoBack () {
      this.$router.push({name: 'Login'})
    },
    logotabCLick (indx) {
      this.$router.push({name: 'register'})
    },
    nextClick (formName) {
      let that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          let regNumber = /^\d{11}$/
          let obj = that.ruleForm
          if (regNumber.test(obj.phone) == false) {
            that.$messageOne({message: '账户必须是手机号！', type: 'error', duration: 3000})
            return false
          }
          that.forgotPage = 2
        }
      })
    },
    nextTweClick  (formName) {
      let that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = that.ruleFormTwe
          if (obj.password != obj.newpassword) {
            that.$messageOne({message: '两个密码必须一直！', type: 'error', duration: 3000})
            return false
          }
          let lent = obj.password.length
          if (lent < 6) {
            that.$messageOne({message: '密码必须大于6位小于12位！', type: 'error', duration: 3000})
            return false
          }
          const regex = /^(?=.*[a-hj-km-np-z])(?=.*[A-HJ-KM-NP-Z])(?=.*[1-9])(?=.*[@~$!%*?&#^])[A-HJ-KM-NP-Za-hj-km-np-z1-9@~$!%*?&#^]{6,12}$/
          if (regex.test(obj.password)) {
          } else {
            that.$messageOne({message: '密码必须包含字母(密码必须包含字母(区分大小写)、数字、特殊字符！禁止使用0, o, O, i, I, l, L)、数字、特殊字符！', type: 'error', duration: 3000})
            return false
          }      
          let objs = {}          
          objs.phone = that.ruleForm.phone
          objs.token = that.ruleForm.yzmVal
          objs.password = obj.password
          objs.password_confirmation = obj.newpassword
          adminresetPasswordPPhone(objs).then(res => {
            if (res.code == 10000) {
              that.forgotPage = 3
              that.jhAcitveShow = true
            } else {
              that.forgotPage = 3
              that.jhAcitveShow = false
              that.$messageOne({message: res.message, type: 'error', duration: 3000})
            }
          }).catch(error => {
            that.forgotPage = 3
            that.jhAcitveShow = false
            that.$messageOne({message: error, type: 'error', duration: 3000})
          })
          that.forgotPage = 3
        }
      })
    },
    goLoginClick () {
      this.$router.push({name: 'Login'})
    },
    resetClick () {
      this.forgotPage = 1
    },
    djsTime () {
      let that = this
      const interval = setInterval(() => {
        that.timers--
        if (that.timers == 0) {
          clearInterval(interval) // 清除计时器
          that.yzmShow = true
          that.timers = 60 // 重置倒计时时长，根据需要可以省略此行，如果每次点击都应该重新开始倒计时
        }
      }, 1000) // 每秒更新一次倒计时
    },
    yzmClick () {
      let that = this
      let objs = {}
      objs.phone = that.ruleForm.phone
      localStorage.setItem('UserToken', 'userToken')
      adminSendResetPasswordPphone(objs).then(res => {
        if (res.code == 10000) {
          that.yzmShow = false
          that.djsTime()
        } else if (res.code == 69002) {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        } else if (res.code == 8001) {
          that.$messageOne({message: res.message, type: 'error', duration: 3000})
        }
      }).catch(error => {
        that.$messageOne({message: error, type: 'error', duration: 3000})
      })
    }
  }
}
</script>
<style scoped>
.loginBox{margin:200px auto 0;width:700px;}
.bzTab{height:70px;margin-bottom:80px;text-align:center;font-size: 16px;color: #161617;line-height: 22px;text-align: center;}
.bzTab .siglist{width:70px;display:inline-block;}
.bzTab .les{margin:0 28px;}
.bzTab .siglist .yuan{display:inline-block;width: 40px;height: 40px;background: #CCCCCC;line-height:40px;text-align:center;color:#fff;font-weight: bold;font-size: 20px;border-radius:50%;margin-bottom:8px;}
.bzTab .siglist .line{width: 100%;height: 3px;background: #CCCCCC;display:inline-block;position:relative;top:-42px;}
.bzTab .siglist .yuan.current,.bzTab .siglist .line.current{background-color:#0071DB;}
.demoRuleForm >>> .el-form-item__label{font-weight: bold;font-size: 16px;color: #161617;line-height: 24px;margin-bottom:8px;}
.demoRuleForm >>> .el-form-item{margin-bottom:40px;}
.noPassword{text-align:right;color:#5C9AEF;}
.loginTips{text-align:center;margin-bottom:10px;}
.yzmBox{position:absolute;bottom:5px;height:30px;line-height:30px;padding:0 20px;right:0;z-index:999;cursor:pointer;color:#0071DB;}
.forgotTil{height: 50px;font-weight: bold;font-size: 36px;color: #161617;line-height: 50px;text-align: center;font-style: normal;margin-bottom:40px;position:relative;}
.forgotTil span{position:absolute;top:10px;left:0;cursor:pointer;}
.chenggong{text-align:center;}
.chenggong .cgTile{height:32px;font-size: 24px;color: #161617;line-height: 32px;margin:12px 0 24px;}
.chenggong .cgTiles{height:32px;font-size: 24px;color: #161617;line-height: 32px;margin:12px 0;}
.chenggong p{font-size: 14px;color: #808080;line-height: 22px;text-align: center;margin-bottom:24px;}
.chenggongIcon{background:url('../../assets/icon26.png') no-repeat 0 0/100%;display:inline-block;width:54px;height:54px;}
.shibaiIcon{background:url('../../assets/icon27.png') no-repeat 0 0/100%;display:inline-block;width:54px;height:54px;}
</style>
