<script setup lang="ts">
import type {BasicOption} from '@easyflow/types';

import type {EasyFlowFormSchema} from '#/adapter/form';

import {computed, nextTick, onMounted, ref} from 'vue';

import {ProfileBaseSetting} from '@easyflow/common-ui';

import {getUserInfoApi} from '#/api';

const profileBaseSettingRef = ref();

const MOCK_ROLES_OPTIONS: BasicOption[] = [
  {
    label: '管理员',
    value: 'super',
  },
  {
    label: '用户',
    value: 'user',
  },
  {
    label: '测试',
    value: 'test',
  },
];

const formSchema = computed((): EasyFlowFormSchema[] => {
  return [
    {
      fieldName: 'realName',
      component: 'Input',
      label: '姓名',
    },
    {
      fieldName: 'username',
      component: 'Input',
      label: '用户名',
    },
    {
      fieldName: 'roles',
      component: 'Select',
      componentProps: {
        mode: 'tags',
        options: MOCK_ROLES_OPTIONS,
      },
      label: '角色',
    },
    {
      fieldName: 'introduction',
      component: 'Textarea',
      label: '个人简介',
    },
  ];
});

onMounted(async () => {
  const data = await getUserInfoApi();
  await nextTick();
  const formApi = profileBaseSettingRef.value?.getFormApi?.();
  if (formApi) {
    formApi.setValues(data);
  }
});
</script>
<template>
  <ProfileBaseSetting ref="profileBaseSettingRef" :form-schema="formSchema" />
</template>
