<template>
  <div class="changePassword-page">
    <person-title>当前位置 :: 个人中心 >> <em>修改密码</em></person-title>
    <div class="changePassword-cont">
      <div class="form-cont">
        <div class="password-input">
          <el-input v-model="passwordform.oldpassword" type='password'
                    placeholder="原密码"></el-input>
          <i class="toggle el-icon-view"
             :class="{'color':passwordform.oldpassword ===''}"
             @click="changeInputType"></i>
        </div>
        <div class="password-input">
          <el-input v-model="passwordform.password" type='password'
                    placeholder="新密码"></el-input>
          <i class="toggle el-icon-view"
             :class="{'color':passwordform.oldPassword ===''}"
             @click="changeInputType"></i>
        </div>
        <div class="password-input">
          <el-input v-model="passwordform.repassword" type='password'
                    @keydown="handleChangePassword"
                    placeholder="再次输入新密码"></el-input>
          <i class="toggle el-icon-view"
             :class="{'color':passwordform.oldPassword ===''}"
             @click="changeInputType"></i>
        </div>
        <el-button class="change"
                   type="primary" plain
                   @click="handleChangePassword">确认修改
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {changPassword} from '../../api/info'

export default {
  data () {
    return {
      passwordform: {
        oldpassword: '',
        password: '',
        repassword: ''
      }
    }
  },
  mounted () {
    window.onkeydown = (e) => {
      let key = window.event.keyCode
      if (key == 13) {
        this.handleChangePassword()
      }
    }
  },
  methods: {
    testform () {
      let form = this.passwordform
      return (form.oldpassword === '') && '原密码不能为空!' ||
        (form.password === '') && '新密码不能为空!' ||
        (form.password.length < 6) && '密码不能少于6位!' ||
        (form.repassword === '') && '请再次输入新密码!' ||
        (form.repassword !== form.password) && '两次密码不一样!' || ''
    },
    changeInputType () {
      this.inputType = (this.inputType == 'password') ? 'text' : 'password'
    },
    handleChangePassword () {
      let tip = this.testform()
      if (tip === '') {
        changPassword(this.passwordform).then((res) => {
          var data = res.data
          if (data.success) {
            this.$notify({
              title: '密码修改成功',
              duration: 2000,
              type: 'success'
            })
            sessionStorage.clear()
            this.$router.push({path: '/login'})
          } else {
            this.$notify({
              title: '密码修改失败',
              message: data.msg,
              duration: 2000,
              type: 'error'
            })
          }
        })
      } else {
        this.$message({
          message: tip,
          type: 'error'
        })
      }
    }
  },
  destroyed () {
    window.onkeydown = null
  }
}
</script>

<style lang="scss" scoped>
.changePassword-page {
  position: relative;
}

.changePassword-cont {
  position: relative;
  margin: 5rem auto 0;
  width: 50%;

  .el-input {
    margin-bottom: 1rem;
  }

  .change {
    margin-top: 1.5rem;
  }
}

.form-cont {
  .password-input {
    position: relative;
  }

  .toggle.el-icon-view {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    top: 35%;
    transform: translate(0, -50%);
    right: 0.2rem;
  }

  .toggle.color {
    color: #ccc;
  }
}

@media only screen and (max-width: 768px) {
  .changePassword-cont {
    width: 70%;
  }
}
</style>

