<template>
  <div class="change-pwd">
    <a-form-model
      id="change-pwd-form"
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="formLayout.labelCol"
      :wrapper-col="formLayout.wrapperCol">
      <a-form-model-item label="原始密码" prop="oldPwd">
        <a-input
          type="password"
          v-model.trim="form.oldPwd"
          id="change-pwd-oldPwd"
          allowClear
          placeholder="请输入原始密码" />
      </a-form-model-item>
      <a-form-model-item label="新密码" prop="passwd">
        <a-input
          type="password"
          v-model.trim="form.passwd"
          @change="filterEmpty"
          id="change-pwd-passwd"
          :maxLength="50"
          allowClear
          placeholder="请输入新密码(6~50位)" />
      </a-form-model-item>
      <a-form-model-item label="再次确认" prop="passwdCheck">
        <a-input
          type="password"
          v-model.trim="form.passwdCheck"
          id="change-pwd-passwdCheck"
          :maxLength="50"
          allowClear
          placeholder="请再次输入新密码(6~50位)" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }">
        <div style="text-align: center;">
          <a-button type="primary" @click="handleSubmit">保存</a-button>
          <a-button @click="handleReset" style="margin-left: 8px">重置</a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { changePwd } from '@/api/login'
import { mapActions } from 'vuex'
export default {
  name: 'ResetPwd',
  data () {
    return {
      formLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
      },
      form: {
        oldPwd: '',
        passwd: '',
        passwdCheck: ''
      },
      rules: {
        oldPwd: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
        passwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: this.passwordValid }
        ],
        passwdCheck: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: this.compareToFirstPassword }
        ]
      }
    }
  },
  methods: {
    ...mapActions(['Logout']),
    //  密码位数校验
    passwordValid (rule, value, callback) {
      if (value.length < 6 || value.length > 50) {
        callback('请输入6~50位密码!')
      } else {
        callback()
      }
    },
    // 密码校验
    compareToFirstPassword (rule, value, callback) {
      if (value && (value !== this.form.passwd)) {
        callback('两次输入的密码不一致, 请重新输入!')
      } else {
        callback()
      }
    },
    // 过滤空格
    filterEmpty () {
      let str = this.form.passwd
      str = str.replace(/\ +/g, '')
      str = str.replace(/[ ]/g, '')
      str = str.replace(/[\r\n]/g, '')
      this.form.passwd = str
    },
    handleSubmit () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const form = {
            oldPassword: _this.form.oldPwd,
            password: _this.form.passwd
          }
          changePwd(form).then(res => {
            if (res.status == 200) {
              _this.$message.success('修改成功, 请重新登录')
              _this.logout()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    logout () {
      this.Logout({}).then(() => {
        setTimeout(() => {
          this.$router.push({ path: '/user/login' })
        }, 16)
      })
    },
    handleReset () {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>
