<template>
  <div class="modify-wrapper">
    <el-container>
      <el-header class="modify-header">Changing the Password of Administrator</el-header> <!-- 管理员密码修改 -->
      <el-main>
        <div class="white-box">
          <el-form ref="form" :model="passwordInfo" label-width="250px" class="form-page">
            <el-form-item label="Administrator Code"> <!-- 用户编号 -->
              <el-input v-model="passwordInfo.adminName"></el-input>
            </el-form-item>
            <el-form-item label="Original login password"> <!-- 原登录密码 -->
              <el-input v-model="passwordInfo.oldPassword" show-password></el-input>
            </el-form-item>
            <el-form-item label="New login password"> <!-- 新登录密码 -->
              <el-input v-model="passwordInfo.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="Confirm login password"> <!-- 确认新密码 -->
              <el-input v-model="passwordInfo.surePassword" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleModifyPasswordSubmit" :loading="modifyPasswordButtonStat">Confirm</el-button> <!-- 确认修改 -->
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axiosObj from '../../utils/axiosPlugin'
import tool from '@/utils/tool'

export default {
  name: 'modify-password',
  mounted () {
    this.passwordInfo.adminName = this.$route.params.adminName
  },
  data () {
    return {
      passwordInfo: {
        adminName: '',
        oldPassword: '',
        password: '',
        surePassword: ''
      },
      modifyPasswordButtonStat: false
    }
  },
  methods: {
    handleModifyPasswordSubmit () {
      this.modifyPasswordButtonStat = true
      let path = 'oauth/no-login-modify-password'
      axiosObj.post(path, this.passwordInfo).then(response => {
        this.$message.success(response)
        this.modifyPasswordButtonStat = false
        this.$router.push('/login')
      }).catch(error => {
        this.modifyPasswordButtonStat = false
        error = tool.errorHandle(error)
        this.$message.error(error.message)
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  .modify-wrapper .white-box {
    background: #fff;
    padding: 25px;
    margin-bottom: 15px;
    border-radius: 0;box-shadow: 0 0 10px #f2f1f4;
  }

  .modify-wrapper .modify-header{
      text-align: center;
      line-height: 60px;
      font-size: 20px;
  }
</style>
