<template>
  <a-modal
    :visible="true"
    :title="$t('重置密码')"
    @cancel="handcancel(thethis)"
    :footer="null"
  >
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item v-bind="formItemLayout" :label="$t('旧密码')" has-feedback>
        <a-input
          v-decorator="[
            'oldPassword',
            {
              rules: [
                {
                  required: true,
                  message: $t('请输入旧密码')
                },
                {
                  validator: validateToNextPassword
                }
              ]
            }
          ]"
          type="password"
          :placeholder="$t('请输入旧密码')"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" :label="$t('新密码')" has-feedback>
        <a-input
          v-decorator="[
            'newPassword',
            {
              rules: [
                {
                  required: true,
                  message: $t('请输入8-30个密码，必须包含特殊的大小写字母和数字字符'),
                  min: 8,
                  max: 30
                },
                {
                  validator: validateToNextPassword
                }
              ]
            }
          ]"
          type="password"
          :placeholder="$t('请输入新密码')"
        />
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        :label="$t('确认密码')"
        has-feedback
      >
        <a-input
          v-decorator="[
            'confirmPassword',
            {
              rules: [
                {
                  required: true,
                  message: $t('请再次输入密码')
                },
                {
                  validator: compareToFirstPassword
                }
              ]
            }
          ]"
          :placeholder="$t('请再次输入新密码')"
          type="password"
          @blur="handleConfirmBlur"
        />
      </a-form-item>
      <a-form-item v-bind="tailFormItemLayout">
        <a-button type="primary" html-type="submit">
          {{ $t('修改') }}
        </a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import {
  handcancel,
  formLayout,
  rules,
  isHaveData,
  LimitLength,
} from '@/common/components/Commonality/Form/js/form.js'
import { mondifyPass } from '@/homeComponents/api/user.js'
export default {
  props: ['data', 'that', 'refresh'],
  mounted () {},
  data () {
    this.thethis = this
    return {
      confirmDirty: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'register' })
  },
  methods: {
    handcancel,
    clearInfo () {
      this.form = {}
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          mondifyPass(values).then((res) => {
            that.$message.success('修改成功')
            that.$emit('refresh')
            that.handcancel(that)
          })
        }
      })
    },
    handleConfirmBlur (e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },
    compareToFirstPassword (rule, value, callback) {
      const form = this.form
      if (value && value !== form.getFieldValue('newPassword')) {
        callback('两次密码输入不一致')
      } else {
        callback()
      }
    },
    validateToNextPassword (rule, value, callback) {
      const form = this.form
      if (value && this.confirmDirty) {
        form.validateFields(['confirmPassword'], { force: true })
      }
      callback()
    },
  },
}
</script>
