<template>
  <page-header-wrapper>
    <div class="content">
      <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol" @submit="handleSubmit">
        <a-form-item label="旧密码">
          <a-input placeholder="请输入旧密码" type="password" v-decorator="['oldpwd', {rules: [{required: true, message: '必填项不能为空！'}]}]" />
        </a-form-item>
        <a-form-item label="新密码">
          <a-input placeholder="请输入新密码" type="password" v-decorator="['newpwd', {rules: [{required: true, message: '必填项不能为空！'}]}]" />
        </a-form-item>
        <a-form-item label="确认密码">
          <a-input placeholder="请确认密码" type="password" v-decorator="['repwd', {rules: [{required: true, message: '必填项不能为空！'},{ validator: compareToFirstPassword }]}]" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 9 }">
          <a-button type="primary" html-type="submit">
            确认
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </page-header-wrapper>
</template>

<script>
  export default {
    data() {
      return {
        labelCol: {
          md: { span: 6 },
          xs: { span: 6 },
          xl: { span: 6 }
        },
        wrapperCol: {
          md: { span: 12 },
          xs: { span: 14 },
          xl: { span: 8 }
        },
        formLayout: 'horizontal',
        form: this.$form.createForm(this)
      }
    },
    methods: {
      // 保存
      handleSubmit(e) {
        e.preventDefault()
        this.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
          }
        })
      },
      compareToFirstPassword(rule, value, callback) {
        const form = this.form
        if (value && value !== form.getFieldValue('newpwd')) {
          callback('两次密码不一致，请重新输入!')
        } else {
          callback()
        }
      },
    },
  }
</script>
<style scoped="scoped">
</style>
