import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
// import type { UserApi } from '#/api';

import { ref } from 'vue';

import { getAllDeptTree, queryRoleList } from '#/api';
// import { $t } from '#/locales';

const treeData = ref([]);
const optionsRoleData = ref([]);

queryRoleList('').then((res) => {
  optionsRoleData.value = res.records.map((item) => ({
    label: item.name,
    value: item.id,
  }));
});

function transformToTreeData(data: any) {
  return data.map((item) => ({
    value: item.id,
    label: item.name,
    ...(item.children && { children: transformToTreeData(item.children) }),
  }));
}

// 使用示例
getAllDeptTree(1).then((res) => {
  treeData.value = transformToTreeData(res);
});
// export function useFormSchema(): VbenFormSchema[] {
//   return [
//     {
//       component: 'Input',
//       fieldName: 'username',
//       label: '用户名称',
//       rules: 'required',
//     },
//     {
//       component: 'Input',
//       fieldName: 'name',
//       label: '昵称',
//       rules: 'required',
//     },
//     {
//       component: 'Input',
//       fieldName: 'email',
//       label: 'Email',
//       rules: 'required',
//     },
//     {
//       component: 'Input',
//       fieldName: 'phone',
//       label: '电话',
//       rules: 'required',
//     },
//     {
//       component: 'Input',
//       fieldName: 'password',
//       label: '密码',
//       rules: 'required',
//     },
//     {
//       component: 'Input',
//       fieldName: 'address',
//       label: '地址',
//     },
//     {
//       component: 'RadioGroup',
//       componentProps: {
//         buttonStyle: 'solid',
//         options: [
//           { label: $t('common.enabled'), value: true },
//           { label: $t('common.disabled'), value: false },
//         ],
//         optionType: 'button',
//       },
//       defaultValue: true,
//       fieldName: 'enable',
//       label: '状态',
//     },
//     {
//       component: 'Textarea',
//       fieldName: 'remark',
//       label: '备注',
//     },
//     {
//       component: 'Select',
//       rules: 'required',
//       componentProps: {
//         allowClear: true,
//         mode: 'multiple',
//         // api: queryRoleList(''),
//         options: optionsRoleData,
//         class: 'w-full',
//         labelField: 'name',
//         valueField: 'id',
//       },
//       fieldName: 'roleIds',
//       label: '所属角色',
//     },
//     {
//       component: 'TreeSelect',
//       componentProps: {
//         allowClear: true,
//         // api: getAllDeptTree(1),
//         treeData,
//         class: 'w-full',
//         labelField: 'name',
//         valueField: 'id',
//         childrenField: 'children',
//       },
//       fieldName: 'deptId',
//       label: '所属部门',
//     },
//   ];
// }

export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      fieldName: 'functionType',
      label: '功能类型',
    },
    // {
    //   component: 'Select',
    //   componentProps: {
    //     allowClear: true,
    //     options: [
    //       { label: $t('common.enabled'), value: true },
    //       { label: $t('common.disabled'), value: false },
    //     ],
    //   },
    //   fieldName: 'enableState',
    //   label: '状态',
    // },
    // {
    //   component: 'Input',
    //   fieldName: 'remark',
    //   label: '备注',
    // },
    // {
    //   component: 'RangePicker',
    //   fieldName: 'makeTime',
    //   label: '创建时间',
    // },
  ];
}

export function useColumns(): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'id',
      type: 'checkbox',
      width: 100,
    },
    {
      field: 'functionType',
      title: '功能类型',
      width: 200,
    },
    {
      field: 'content',
      minWidth: 100,
      title: '内容',
    },
    {
      field: 'makeTime',
      slots: { default: 'makeTime' },
      title: '发生时间',
      width: 200,
    },
  ];
}
