<template>
  <a-row :gutter="24" class="change-pwd">
    <a-col span="8" offset="8">
      <a-form @submit="handleSubmit" :form="form">
        <!-- 原始密码 -->
        <a-form-item
          label="原始密码"
          prop="oldPwd"
          :label-col="formLayout.labelCol"
          :wrapper-col="formLayout.wrapperCol">
          <a-input
            type="password"
            :maxLength="12"
            placeholder="请输入原始密码(6~12位)"
            v-decorator="[
              'formCustom.oldPwd',
              { initialValue: formCustom.oldPwd,
                rules: [
                  { required: true, message: '请输入原始密码' },
                ]
              },
            ]">
          </a-input>
        </a-form-item>
        <!-- 新密码 -->
        <a-form-item
          label="新密码"
          prop="passwd"
          :label-col="formLayout.labelCol"
          :wrapper-col="formLayout.wrapperCol">
          <a-input
            type="password"
            :maxLength="12"
            placeholder="请输入新密码(6~12位)"
            v-decorator="[
              'formCustom.passwd',
              { initialValue: formCustom.passwd,
                rules: [
                  { required: true, message: '请输入新密码' },
                  { validator: passwordValid }
                ]
              },
            ]">
          </a-input>
        </a-form-item>
        <!-- 再次确认 -->
        <a-form-item
          label="再次确认"
          prop="passwdCheck"
          :label-col="formLayout.labelCol"
          :wrapper-col="formLayout.wrapperCol">
          <a-input
            type="password"
            :maxLength="12"
            placeholder="请再次输入新密码(6~12位)"
            v-decorator="[
              'formCustom.passwdCheck',
              { initialValue: formCustom.passwdCheck,
                rules: [
                  { required: true, message: '请再次输入密码' },
                  { validator: compareToFirstPassword }
                ]
              },
            ]">
          </a-input>
        </a-form-item>
        <a-col span="16" offset="8">
          <a-form-item>
            <a-button type="primary" htmlType="submit" :loading="loading">保存</a-button>
            <a-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</a-button>
          </a-form-item>
        </a-col>
      </a-form>
    </a-col>
  </a-row>
</template>

<script>
import { changePwd } from '@/api/login.js'
import { mapActions } from 'vuex'
export default {
  name: 'ResetPwd',
  data () {
    return {
      formLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      },
      form: this.$form.createForm(this),
      loading: false,
      formCustom: {
        passwd: '',
        passwdCheck: '',
        oldPwd: ''
      }
    }
  },
  methods: {
    ...mapActions(['Logout']),
    //  密码位数校验
    passwordValid (rule, value, callback) {
      if (value.length < 6 || value.length > 12) {
        callback('请输入6-12位密码!')
      } else {
        callback()
      }
    },
    // 密码校验
    compareToFirstPassword (rule, value, callback) {
      const form = this.form
      if (value && value !== form.getFieldValue('formCustom.passwd')) {
        callback('两次输入的密码不一致, 请重新输入!')
      } else {
        callback()
      }
    },
    handleSubmit (e) {
      e.preventDefault()
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          changePwd({
            oldPassword: values.formCustom.oldPwd,
            password: values.formCustom.passwd
          }).then(res => {
            if (res.status == 200) {
              _this.$message.success('修改成功, 请重新登录')
              _this.logout()
            }
          })
        }
      })
    },
    logout () {
      this.Logout({}).then(() => {
        setTimeout(() => {
          this.$router.push({ path: '/user/login' })
        }, 16)
      })
    },
    handleReset () {
      this.form.resetFields()
    }
  }
}
</script>

<style>
</style>
