<template>
  <a-modal
    title="修改密码"
    v-model="visible"
    @ok="handleOk"
    :maskClosable="false"
    class="cust-modal"
  >
    <a-form :form="form" ref="form">
      <a-row>
        <a-col :span="24">
          <a-form-item v-bind="formItemLayout" label="现密码">
            <a-input
              v-decorator="[
                'oldPwd',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入密码!'
                    },
                    {
                      validator: this.validateToNextPassword
                    }
                  ]
                }
              ]"
              type="password"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item v-bind="formItemLayout" label="新密码">
        <a-input
          v-decorator="[
            'newPwd',
            {
              rules: [
                {
                  required: true,
                  message: '请输入新密码!'
                },
                {
                  validator: this.validateToNextPassword
                }
              ]
            }
          ]"
          type="password"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="确认密码">
        <a-input
          v-decorator="[
            'confirmNewPassword',
            {
              rules: [
                {
                  required: true,
                  message: '请确认密码!'
                },
                {
                  validator: compareToFirstPassword
                }
              ]
            }
          ]"
          type="password"
          @blur="handleConfirmBlur"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { editPwd } from '@/api/system/sysUserApi'

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      visible: false,
      confirmDirty: false,
      formItemLayout: {
        labelCol: {
          sm: { span: 7 }
        },
        wrapperCol: {
          sm: { span: 14 }
        }
      }
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    handleOk() {
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          editPwd(values).then((resp) => {
            if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) {
              this.$emit('relogin', this.optType, values)
              this.visible = false
            }
          })
        }
      })
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form
      if (value && this.confirmDirty) {
        form.validateFields(['confirmNewPassword'], { force: true })
      }
      callback()
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form
      if (value && value !== form.getFieldValue('newPwd')) {
        callback('确认两次密码是否一致!')
      } else {
        callback()
      }
    },
    handleConfirmBlur(e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    }
  }
}
</script>