<template>
  <transition name="slide">
    <div class="index-container">
      <!--标题-->
      <mt-header class="header" title="修改密码">
        <div slot="left">
          <mt-button icon="back" @click="$router.back(-1)"></mt-button>
        </div>
      </mt-header>
      <div class="listbody">
        <mt-field label="原密码" placeholder="请输入原密码" type="password" v-model="oldPassword" :state="oldPasswordValidate" @change="validateOldPass"></mt-field>
        <mt-field label="新密码" placeholder="不少于8位的数字与字母或特殊符号组合" type="password" v-model="newPassword" :state="newPasswordValidate" @change="validateNewPass"></mt-field>
        <mt-field label="重复密码" placeholder="请再次输入密码" type="password" v-model="rePassword" :state="rePasswordValidate" @change="validateRePass"></mt-field>
      </div>
      <div class="logout-div">
        <mt-button type="primary" @click="resetPassword">提交</mt-button>
      </div>
    </div>
  </transition>
</template>

<script>
  import { MyLocalStorage } from 'assets/js/utils'
  import { TOKEN, LOGIN_FLAG, AD_FLAG, SLIDER_FLAG, USER_ACCOUNT, USER_PWD } from 'assets/js/storageConst'
  import { Toast } from 'mint-ui'
  import {changePwd} from '@/api/user'
  import { RSAencrypt } from '@/utils/security'

  export default {
    name: "ResetPwd",
    data(){
      return {
        oldPassword:'',
        newPassword:'',
        rePassword:'',
        oldPasswordValidate:'',
        newPasswordValidate:'',
        rePasswordValidate:'',
      }
    },
    methods:{
      //验证原密码
      validateOldPass(){
        const oldPassword = this.oldPassword
        if(oldPassword==''){
          this.oldPasswordValidate = 'error'
          return false
        }else{
          this.oldPasswordValidate = 'success'
          return true
        }
      },
      //验证新密码
      validateNewPass(){
        const value = this.newPassword
        if(value==''){
          this.newPasswordValidate = 'error'
          return false
        }else{
          if(value.length<8||value.length>16){
            this.newPasswordValidate = 'error'
            return false
          }else{
            var reg = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/
            if(value.match(reg)){
              this.newPasswordValidate = 'success'
              return true
            }else{
              this.newPasswordValidate = 'error'
              return false
            }
          }
        }
      },
      //验证重复密码
      validateRePass(){
        const rePassword = this.rePassword
        const newPassword = this.newPassword
        if(newPassword!=''){
          if(newPassword!=rePassword){
            this.rePasswordValidate = 'error'
            return false
          }else{
            this.rePasswordValidate = 'success'
            return true
          }
        }
      },
      //重置密码
      resetPassword () {
        if(this.validateOldPass()==false){
          Toast('原密码不得为空')
          return
        }
        if(this.validateNewPass()==false){
          Toast('密码必须8到16位数字、字母组合，或数字、字符组合，或字母、字符组合')
          return
        }
        if(this.validateRePass()==false){
          Toast('两次密码输入不一致')
          return
        }
        const oldPwd = RSAencrypt(this.oldPassword)
        const newPwd = RSAencrypt(this.newPassword)
        changePwd(oldPwd, newPwd).then(response => {
          if(response.code=200){
            Toast('重置密码成功，请重新登录')
            MyLocalStorage.Cache.remove(TOKEN)
            MyLocalStorage.Cache.remove(USER_ACCOUNT)
            MyLocalStorage.Cache.remove(USER_PWD)
            MyLocalStorage.Cache.remove(AD_FLAG)
            MyLocalStorage.Cache.remove(LOGIN_FLAG)
            MyLocalStorage.Cache.remove(SLIDER_FLAG)
            this.$router.push({name: 'login'})
          }
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .mint-cell-title {
    margin-left: 5px !important
  }
  .logout-div{
    position: fixed
    bottom:5px
    .mint-button{
      width 98vw
      margin:1vw
      background-color #1d55c6
    }
  }
</style>