import type { DepartmentVO } from '#/api/system';

import { $t } from '@vben/locales';
import { getPopupContainer } from '@vben/utils';

import { defineStatusField } from '#/adapter/form';
import { defineEditShell } from '#/adapter/shell/edit';
import { defineGrid } from '#/adapter/vxe-table';
import {
  DepartmentVOSchema,
  editDepartmentMethod,
  listDepartmentMethod,
  optionsDepartmentMethod,
} from '#/api/system';

export const departmentGrid = defineGrid<DepartmentVO>({
  scope: 'system.department',
  query: listDepartmentMethod,
  tree: true,
  fields: [
    {
      component: 'Input',
      fieldName: 'name',
      label: $t('system.department.field.name'),
    },
  ],
  columns: (col) => [
    col.seq({ width: 140, align: 'left', treeNode: true }),
    {
      field: 'name',
      title: $t('system.department.field.name'),
      width: 200,
      align: 'left',
    },
    { field: 'remark', title: $t('ui.field.remark'), minWidth: 120 },
    ...col.audit(),
    col.status({ confirm: true }),
    col.actions([{ code: 'append', text: '新增下级' }, 'edit', 'delete'], 180),
  ],
});

export const departmentForm = defineEditShell<DepartmentVO>({
  scope: 'system.department',
  submit: editDepartmentMethod,
  shell: 'modal',
  prepare(data) {
    if (data.pid === '0') Reflect.deleteProperty(data, 'pid');
    return data;
  },
  schema: [
    {
      component: 'ApiTreeSelect',
      componentProps: {
        api: optionsDepartmentMethod,
        filterTreeNode(input: string, node: Recordable<any>) {
          if (!input || input.length === 0) return true;
          const title: string = node.label.toString() ?? '';
          if (!title) return false;
          return title.includes(input) || $t(title).includes(input);
        },
        getPopupContainer,
        class: 'w-full',
        labelField: 'name',
        valueField: 'id',
        childrenField: 'children',
        showSearch: true,
        allowClear: true,
      },
      fieldName: 'pid',
      label: $t('system.department.name', ['', '上级']),
    },
    {
      component: 'Input',
      fieldName: 'name',
      label: $t('system.department.field.name'),
      rules: DepartmentVOSchema.shape.name,
    },
    defineStatusField(),
    {
      component: 'Textarea',
      fieldName: 'remark',
      label: $t('ui.field.remark'),
      rules: DepartmentVOSchema.shape.remark,
    },
  ],
});