<template>
  <div class="form-container">
    <ElForm
      ref="form"
      v-bind="formProps"
    >
      <ElFormItem
        label="新密码"
        prop="password"
      >
        <ElInput
          v-model.trim="form.password"
          type="password"
          placeholder="请输入新密码"
        />
      </ElFormItem>
      <ElFormItem
        label="新密码确认"
        prop="confirmPassword"
      >
        <ElInput
          v-model.trim="form.confirmPassword"
          type="password"
          placeholder="请再次输入新密码"
        />
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script>
import FormMixin from '@/mixins/form'

export default {
  mixins: [FormMixin],
  data() {
    const validateConfirmPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {
        userid: null,
        password: null,
        confirmPassword: null
      },
      rules: {
        password: [
          {
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 12,
            message: '长度在6到12个字符之间',
            trigger: 'blur'
          },
          {
            pattern: /^(?=.*[\d])(?=.*[A-Z])(?=.*[a-z])^[\x20-\xff]{6,12}$/,
            message: '必须含有大小写字母和数字',
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          {
            required: true,
            message: '请再次输入新密码',
            trigger: 'blur'
          },
          {
            validator: validateConfirmPassword,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    async onSubmit() {
      const valid = await this.$refs.form.validate()
      return valid
    }
  }
}
</script>

<style
  scoped
  lang="scss"
>
.footer-container {
  text-align: center;
}
</style>
