<template>
  <div class="bg">
    <div class="title">
      <span>找回密码</span>
    </div>
    <div class="step_bg">
      <div class="step">
        <el-steps :active="active" align-center finish-status="success">
          <el-step title="安全验证"/>
          <el-step title="设置新密码"/>
          <el-step title="设置成功"/>
        </el-steps>
        <div v-if="active === 0" class="inputvalue">
          <el-form>
            <el-row>
              <el-input v-model="mobilePhone" placeholder="请输入手机号码" type="number"/>
            </el-row>
            <el-row>
              <el-row style="margin-top: 15px">
                <el-col :span="12">
                  <el-input v-model="code" placeholder="请输入图形验证码" />
                </el-col>
                <el-col :span="12">
                  <img :src="loginCode" @click="gencode" >
                </el-col>
              </el-row>
            </el-row>
            <el-input v-model="pwValidCode" placeholder="请输入验证码" type="number" style="width: 150px;margin-top: 20px"/>
            <el-button v-show="sendAuthCode" style="width: 145px;" @click="getChangePwSms">获取验证码</el-button>
            <el-button v-show="!sendAuthCode" style="width: 130px;"> <span class="auth_text_blue">{{ auth_time }} </span> 秒后可重发</el-button>
          </el-form>

          <el-button style="width: 140px;margin-top: 50px;margin-left: 0px" type="primary" @click="checkValidCode">下一步</el-button>
          <router-link :to="{path:'/login'}" tag="a"><el-button style="width: 140px;margin-left: 15px" type="primary">返回</el-button></router-link>
        </div>
        <div v-if="active === 1" class="inputvalue">
          <el-input v-model="password" placeholder="请输入新密码" type="password" />
          <el-input v-model="passwordConfirm" placeholder="请再次输入新密码" type="password" style="width: 300px;margin-top: 20px"/>
          <el-button style="width: 140px;margin-top: 50px;margin-left: 0px" type="primary" @click="submitChangePw">下一步</el-button>
          <el-button style="width: 140px;margin-left: 15px" type="primary" @click="previous">上一步</el-button>
        </div>
        <div v-if="active === 2" class="inputvalue">
          <svg-icon icon-class="resetsuccess" style="width: 100px;height: 100px;margin-left:100px;text-align:center"/>
          <router-link :to="{path:'/login'}" tag="a"><el-button style="width: 300px;margin-top: 50px;margin-left: 0px" type="primary">完成</el-button></router-link>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import axios from 'axios'
import md5 from 'js-md5'
export default {
  name: 'Resetpw',
  data() {
    return {
      mobilePhone: '',
      code: '',
      sendAuthCode: true, /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
      auth_time: 0, /* 倒计时 计数器*/
      password: '',
      passwordConfirm: '',
      pwValidCode: '',
      active: 0,
      loginCode: process.env.BASE_API + '/user/gencode?=' + Math.random()
    }
  },
  created() {
    // this.startTimer()
  },
  methods: {
    startTimer() {
      console.log('start timer')
      this.timer = setInterval(this.gencode, 60000)
    },
    gencode() {
      this.loginCode = process.env.BASE_API + '/user/gencode?=' + Math.random()
    },
    getChangePwSms() {
      if (this.code === '' || this.code === undefined) {
        this.$message.info('图形验证码不能为空')
        return
      }
      if (this.mobilePhone === '' || this.mobilePhone === undefined) {
        this.$message.info('手机号码不能为空')
        return
      }
      if (this.mobilePhone.length !== 11) {
        this.$message.info('请输入正确手机号码')
        return
      }
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (!reg.test(this.mobilePhone)) {
        this.$message.error('手机号码格式不对')
        return
      }
      var vm = this
      var params = new URLSearchParams()
      params.append('phone', vm.mobilePhone)
      params.append('gcode', vm.code)
      axios.post(process.env.BASE_API + '/user/getpwsms', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          // vm.$message(obj.message)
          vm.sendAuthCode = false
          vm.auth_time = 60
          var auth_timetimer = setInterval(() => {
            vm.auth_time--
            if (vm.auth_time <= 0) {
              vm.sendAuthCode = true
              clearInterval(auth_timetimer)
            }
          }, 1000)
        }
      }).catch(function(error) {
        alert(error)
      })
      vm.gencode()
    },
    checkValidCode() {
      if (this.mobilePhone === '' || this.mobilePhone === undefined) {
        this.$message.info('手机号码不能为空')
        return
      }
      if (this.mobilePhone.length !== 11) {
        this.$message.info('请输入正确手机号码')
        return
      }
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (!reg.test(this.mobilePhone)) {
        this.$message.error('手机号码格式不对')
        return
      }
      if (this.pwValidCode === '' || this.pwValidCode === undefined) {
        this.$message.info('请输入手机验证码，不能为空')
        return
      }
      var vm = this
      var params = new URLSearchParams()
      params.append('phone', vm.mobilePhone)
      params.append('pwValidCode', vm.pwValidCode)
      axios.post(process.env.BASE_API + '/user/checkvalidcode', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          // vm.$message(obj.message)
          vm.active++
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    submitChangePw() {
      if (this.mobilePhone === '' || this.mobilePhone === undefined) {
        this.$message.info('手机号码不能为空')
        return
      }
      if (this.mobilePhone.length !== 11) {
        this.$message.info('请输入正确手机号码')
        return
      }
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (!reg.test(this.mobilePhone)) {
        this.$message.error('手机号码格式不对')
        return
      }
      if (this.password === '' || this.password === undefined) {
        this.$message.info('请输入新密码，不能为空')
        return
      }
      if (this.password.length < 8) {
        this.$message.info('密码需是8-32位的英文大小写加数字组合')
        return
      }
      if (this.passwordConfirm === '' || this.passwordConfirm === undefined) {
        this.$message.info('请输入新密码，不能为空')
        return
      }
      if (this.passwordConfirm.length < 8) {
        this.$message.info('密码需是8-32位的英文大小写加数字组合')
        return
      }
      var repw = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[1-9]).{8,}$/
      if (!repw.test(this.password)) {
        this.$message.info('密码需是8-32位的英文大小写加数字组合')
        return
      }
      if (this.password !== this.passwordConfirm) {
        this.$message.info('新旧密码不一致')
        return
      }
      var vm = this
      var params = new URLSearchParams()
      params.append('phone', vm.mobilePhone)
      params.append('resetPw', md5(vm.password))
      axios.post(process.env.BASE_API + '/user/resetpw', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          // vm.$message(obj.message)
          vm.active++
        }
      }).catch(function(error) {
        alert(error)
      })
      vm.gencode()
    },
    next() {
      if (this.active++ > 2) {
        this.active = 0
      }
    },
    goNext() {

    },
    previous() {
      if (this.active-- < 0) {
        this.active = 0
      }
    }
  }
}
</script>

<style scoped>
  .bg {
    background-color: lightgray;
    width: 100%;
    height: 100%;
  }
  .title {
    font-size: 26px;
    font-weight: 400;
    margin: 0px auto 40px auto;
    text-align: center;
    margin-top: 20px;
    background-color: white;
    height: 50px;
  }

  .step_bg {
    margin:0 auto;
    background-color: white;
    width: 900px;
    height: 500px;
    border:1px solid white;
  }
  .step {
    margin-top: 50px;
    margin-left: 30px;
  }
  .inputvalue {
    width: 300px;
    margin-top: 80px;
    margin-left: 300px;
  }
  .btn {
    margin-left: 300px;
    margin-top: 50px;
    width: 300px;
  }
</style>
