<script setup lang="ts">
import { h, ref } from 'vue';

import { Button, message } from 'ant-design-vue';

import { useVbenForm, z } from '#/adapter/form';
import { UserApi } from '#/api';

const loading = ref<boolean>(false);

const [BasicForm, formApi] = useVbenForm({
  wrapperClass: 'grid-cols-1 w-[60%]', // 24栅格,
  commonConfig: {
    formItemClass: 'col-span-1',
    labelWidth: 100,
  },
  showDefaultActions: false,
  submitButtonOptions: {
    content: '更新密码',
  },
  resetButtonOptions: {
    show: false,
  },
  schema: [
    {
      fieldName: 'sourcePassword',
      label: '旧密码',
      component: 'InputPassword',
      componentProps: {
        placeholder: '请输入旧密码',
      },
      formItemClass: 'col-span-1',
      rules: 'required',
    },
    {
      fieldName: 'password',
      label: '新密码',
      help: '5-18位数字、字母、特殊字符组成。',
      component: 'InputPassword',
      componentProps: {
        placeholder: '请输入新密码',
      },
      formItemClass: 'col-span-1',
      rules: z
        .string()
        .regex(/[\w!@#$%^&*]{5,18}/, '密码由5-18位数字、字母、特殊字符组成。'),
    },
    {
      fieldName: 'confirmPassword',
      label: '确认密码',
      help: '5-18位数字、字母、特殊字符组成。',
      component: 'InputPassword',
      componentProps: {
        placeholder: '请输入确认密码',
      },
      formItemClass: 'col-span-1',
      rules: z
        .string()
        .regex(/[\w!@#$%^&*]{5,18}/, '密码由5-18位数字、字母、特殊字符组成。'),
      dependencies: {
        triggerFields: ['confirmPassword'],
        rules: (values) => {
          return z
            .string()
            .regex(
              /[\w!@#$%^&*]{5,18}/,
              '密码由5-18位数字、字母、特殊字符组成。',
            )
            .refine(
              (confirmPassword) => {
                return confirmPassword === values.password;
              },
              {
                message: '确认密码必须与密码一致',
              },
            );
        },
      },
    },
    {
      fieldName: 'btn',
      label: '',
      component: () => {
        return h(
          'div',
          {},
          h(
            Button,
            {
              type: 'primary',
              onClick: () => {
                formApi.validate().then(async (e: any) => {
                  if (e.valid) {
                    const values = await formApi.getValues();
                    loading.value = true;
                    UserApi.updatePassword(values)
                      .then(() => {
                        message.success('密码修改成功');
                        formApi.resetForm();
                      })
                      .finally(() => {
                        loading.value = false;
                      });
                  }
                });
              },
              loading: loading.value,
            },
            {
              default() {
                return '修改密码';
              },
            },
          ),
        );
      },
      formItemClass: 'col-span-1',
    },
  ],
});

defineExpose({
  getFormApi() {
    return formApi;
  },
});
</script>
<template>
  <BasicForm />
</template>
<style lang="less" scoped></style>
