<template>
  <div>
    <div class="login">
      <div class="login-box">
        <h3>包头市安全生产三项岗位人员培训考试服务平台</h3>
        <div class="yz-code-box">
          <input class="yz-code" v-model="loginInfo.username" placeholder="请输入手机号" autocomplete="off">
          <button class="get-code" @click="getCode" v-if="restTime >= 120 && !isSendCode">获取验证码</button>
          <button class="get-code got" v-else>{{ restTime }}</button>
        </div>
        <input type="text" v-model="loginInfo.code" placeholder="请输入验证码" autocomplete="off">
        <input type="password" v-model="loginInfo.password" placeholder="请输入新密码" autocomplete="off">
        <input type="password" v-model="newPassword" placeholder="请再次输入新密码" autocomplete="off">
        <!--        <div class="link">-->
        <!--          <router-link to="/register" class="register">立即注册</router-link>-->
        <!--          <router-link to="/forget" class="back">忘记密码？</router-link>-->
        <!--        </div>-->
        <button @click="submitUpdate">提交修改</button>
        <div class="info">
          <p>主办：包头市应急管理局</p>
          <p>如有问题，咨询电话: 0472-5222813</p>
        </div>
      </div>
      <div class="bottom-text">Copyright:2012-2020包头市应急管理局 All Rights Reserved建议使用90以上版本浏觉器1024*768以上分辨率</div>
    </div>
    <div class="loading" v-if="isLoading">
      <img src="@/assets/images/loading.gif" alt="">
    </div>
  </div>
</template>

<script>
import url from '@/assets/public/url'
import axios from 'axios'
import md5 from 'js-md5'
export default {
  name: 'ForgetPassword',
  components: {},
  data() {
    return {
      loginInfo: {
        username: '',
        password: '',
        code: ''
      },
      phoneNum: '',
      newPassword: '',
      url: url.loginUrl,
      isLoading: false,
      restTime: 120,
      isSendCode: false
    }
  },
  methods: {
    submitUpdate: function () {
      if (this.isLoading) {
        return
      }
      if (!this.loginInfo.code) {
        this.$layer.msg('验证码不能为空')
        return
      }
      if (!this.loginInfo.password || !this.newPassword) {
        this.$layer.msg('请输入新密码')
        return
      }
      if (this.loginInfo.password != this.newPassword) {
        this.$layer.msg('两次输入的密码不一致')
        return
      }
      var self = this
      var info = {
        phone: self.loginInfo.username,
        verificationCode: self.loginInfo.code,
        newPassWord: self.loginInfo.password
      }
      axios.put(self.url + 'app/user/forget-phone-password', info).then(function (res) {
        self.$layer.msg('修改成功')
        setTimeout(function () {
          self.$router.push({
            path: '/'
          })
        }, 1000)
      }).catch(function (error) {
        self.$layer.msg(error.response.data.msg)
      })
    },
    getCode: function () {
      if (!this.loginInfo.username) {
        this.$layer.msg('请输入手机号')
        return
      }
      var self = this
      self.isSendCode = true
      self.restTime--
      var timer = setInterval(function () {
        self.restTime--
        if (self.restTime < 0) {
          clearInterval(timer)
          self.restTime = 120
        }
      }, 1000)
      axios.get(self.url + 'app/sms/verify-code/' + self.loginInfo.username).then(function (res) {
        self.$layer.msg('验证码发送成功，请注意查收')
      }).catch(function (error) {
        self.$layer.msg(error.response.data.msg)
      }).finally(() => {
        self.isSendCode = false;
      })
    }
  },
  mounted: function () { }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  background rgba(255,255,255,0.6)
  padding 30px
  border-radius 10px
  box-shadow 0 0 17px #DEDEDE
.login
  background url("~@/assets/images/login-bg.jpg") no-repeat center
  background-size 100% 100%
  overflow hidden
  .login-box
    width 460px
    height 720px
    padding 80px 40px 180px
    box-sizing border-box
    background #fff url("~@/assets/images/login-box-bg1.png") no-repeat left bottom
    background-size 100% auto
    margin-top 100px
    margin-bottom 70px
    margin-left 54%
    h3
      font-size 20px
      text-align center
      color #0d1c28
      font-weight normal
      margin-bottom 70px
    p
      font-size 12px
      color #999
      text-align center
      margin-bottom 70px
    input
      width 100%
      height 45px
      border 1px solid #c4c4c4
      padding 0 10px
      box-sizing border-box
      margin-bottom 15px
      font-size 16px
      &.yz-code
        width 64%
        vertical-align top
    button
      cursor pointer
      width 100%
      height 45px
      color #fff
      font-size 16px
      background #1561af
      border none
      outline none
      border-radius 3px
      &.get-code
        width 34%
        vertical-align top
        &.got
          background #ccc
          color #fff
    .link
      margin-bottom 25px
      overflow hidden
      a
        font-size 16px
        color #4293f4
        &.register
          float right
        &.back
          float left
    .info
      text-align center
      margin-top 25px
      p
        line-height 20px
        font-size 12px
        margin-bottom 0
        color #999
  .bottom-text
    text-align center
    color #fff
    font-size 14px
    margin-bottom 30px
</style>
