<template>

  <a-card :bordered="false" class="change-pwd-card">
    <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"
              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"
              v-decorator="[
                'formCustom.passwd',
                { initialValue: formCustom.passwd,
                  rules: [
                    { required: true, message: '请输入新密码' }
                  ]
                },
              ]">
            </a-input>
          </a-form-item>
          <!-- 再次确认 -->
          <a-form-item
            label="再次确认"
            prop="passwdCheck"
            :label-col="formLayout.labelCol"
            :wrapper-col="formLayout.wrapperCol">
            <a-input
              type="password"
              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>
  </a-card>

</template>

<script>
import { changePwd } from '@/api/login.js'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'ChangePwd',
  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']),
    // 密码校验
    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()
            } else {
              _this.$message.error(res.message)
            }
          })
        }
      })
    },
    logout () {
      this.Logout({}).then(() => {
        setTimeout(() => {
          this.$router.push({ path: '/user/login' })
        }, 16)
      })
    },
    handleReset () {
      this.form.resetFields()
    }
  }

}
</script>

<style scoped>
  .change-pwd {
    margin-top: 15vh;
  }

  .change-pwd-card {
    height: 70vh;
    /* border-top: 2px solid #FFB01B; */
  }
</style>
