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

import { useUserStore } from '@vben/stores';

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

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

const userStore = useUserStore();
const loading = ref<boolean>(false);
const modelRef = ref<Record<string, any>>({});

const [BasicForm, formApi] = useVbenForm({
  wrapperClass: 'grid-cols-1 w-[50%]', // 24栅格,
  commonConfig: {
    formItemClass: 'col-span-1',
    labelWidth: 60,
  },
  showDefaultActions: false,
  submitButtonOptions: {
    content: '更新信息',
  },
  resetButtonOptions: {
    show: false,
  },
  schema: [
    {
      fieldName: 'realName',
      label: '姓名',
      component: 'Input',
      componentProps: {
        placeholder: '请输入姓名',
      },
      formItemClass: 'col-span-1',
      rules: 'required',
    },
    {
      component: 'ApiRadio',
      componentProps: {
        placeholder: '请输入',
        api: {
          type: 'enum',
          params: EnumApi.EnumType.Gender,
        },
      },
      fieldName: 'sex',
      label: '性别',
      rules: 'required',
    },
    {
      fieldName: 'nickName',
      label: '昵称',
      component: 'Input',
      componentProps: {
        placeholder: '请输入昵称',
      },
      formItemClass: 'col-span-1',
    },
    {
      fieldName: 'email',
      label: '邮箱',
      component: 'Input',
      componentProps: {
        placeholder: '请输入邮箱',
      },
      formItemClass: 'col-span-1',
    },
    {
      fieldName: 'phone',
      label: '电话',
      component: 'Input',
      componentProps: {
        placeholder: '请输入电话',
      },
      formItemClass: 'col-span-1',
    },
    {
      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;
                    const postParams = unref(modelRef);
                    Object.assign(postParams, values);
                    UserApi.editDetail(postParams as UserApi.RecordItem)
                      .then(() => {
                        message.success('保存成功');
                        userStore.setUserInfo({
                          ...userStore.userInfo,
                          ...values,
                        } as any);
                      })
                      .finally(() => {
                        loading.value = false;
                      });
                  }
                });
              },
              loading: loading.value,
            },
            {
              default() {
                return '更新信息';
              },
            },
          ),
        );
      },
      componentProps: {},
      formItemClass: 'col-span-1',
    },
  ],
});

onMounted(async () => {
  const data = await UserApi.getDetail(
    (userStore.userInfo?.userId || 0) as number,
  );
  if (data) {
    modelRef.value = data;
    formApi.setValues({ ...data });
  }
});
</script>
<template>
  <BasicForm />
</template>
<style lang="less" scoped></style>
