<template>
  <div class="container container-table">
    <div class="row vertical-10p">
      <div class="container">
        <img src="../../static/img/logo.png" class="center-block logo">
        <div class="text-center col-md-4 col-sm-offset-4">
          <!-- login form -->
          <form class="ui form loginForm"  @submit.prevent="validateSubmit">
            <div class="input-group has-icon has-icon-right">
              <span class="input-group-addon"><i class="fa fa-lock"></i></span>
              <input class="form-control" name="原始密码" placeholder="原始密码" type="password" v-model="opassword" autocomplete="off"
                     v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('原始密码') }">
            </div>
            <p v-show="errors.has('原始密码')" class="text-left help is-danger"> <i class="fa fa-warning"></i> {{ errors.first('原始密码') }}</p>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-lock"></i></span>
              <input class="form-control" name="新密码" placeholder="新密码" type="password" v-model="password" autocomplete="off"
                     v-validate="'required|min:6|max:16|alpha_dash'" :class="{'input': true, 'is-danger': errors.has('新密码') }">
            </div>
            <p v-show="errors.has('新密码')" class="text-left help is-danger"> <i class="fa fa-warning"></i> {{ errors.first('新密码') }}</p>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-lock"></i></span>
              <input class="form-control" name="确认密码" placeholder="确认密码" type="password" v-model="repassword" autocomplete="off"
                     v-validate="'required|confirmed:新密码'"
                     :class="{'input': true, 'is-danger': errors.has('确认密码') }">
            </div>
            <p v-show="errors.has('确认密码')" class="text-left help is-danger"> <i class="fa fa-warning"></i> {{ errors.first('确认密码') }}</p>
            <button type="submit" v-bind:class="'btn btn-primary btn-lg ' + loading">保存</button>
          </form>
          <!-- errors -->
          <div v-if=response class="text-red"><p>{{response}}</p></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '@/api'
  import { getUser } from '@/config/info'
  export default {
    data (router) {
      return {
        opassword: '',
        password: '',
        repassword: '',
        response: '',
        loading: ''
      }
    },
    methods: {
      validateSubmit () {
        this.$validator.validateAll().then((result) => {
          if (result) {
            this.relogin()
          }
        }).catch(() => {
          alert('Correct them errors!')
        })
      },
      /**
       * 修改请求
       */
      relogin () {
        let param = {}
        param.userCode = getUser().userCode
        param.password = this.opassword
        api.requestJava('POST', 'login.do', {}, {'headers': param})
          .then(response => {
            if (Number(response.data.code) === 200) {
              this.updatePwdReponse()
            } else if ((response.data.code) === 401) {
              this.$message({type: 'error', message: '原始密码错误!'})
            } else {
              throw new Error(JSON.stringify(response))
            }
          })
      },
      updatePwdReponse () {
        let param = {}
        param.rowId = getUser().id
        param.password = this.password
        api.requestJava('POST', 'user/update.do', param)
          .then(response => {
            if (Number(response.data.code) === 200) {
              this.$message({type: 'success', message: '修改成功'})
              localStorage.removeItem('information')
              this.$router.push('/login')
            } else if ((response.data.code) === 401) {
              this.$message({type: 'error', message: '原始密码错误!'})
            } else {
              throw new Error(JSON.stringify(response))
            }
          })
      }
    }
  }
</script>

<style scoped>
  .is-danger {
    color: #FF4949;
    padding-bottom: 10px;
  }
  .container-table {
    width: 100%;
    height: 100%;
    background-color: #282B30 !important;
    position: relative;
    height: 100vh;
  }
  .container-table {
    display: table;
    color: white;
  }
  .vertical-center-row {
    display: table-cell;
    vertical-align: middle;
  }
  .vertical-20p {
    padding-top: 20%;
  }
  .vertical-10p {
    padding-top: 10%;
  }
  .logo {
    width: 15em;
    padding: 3em;
  }
  .loginForm .input-group {
    padding-bottom: 1em;
    height: 4em;
  }
  .input-group input {
    height: 4em;
  }
</style>
