import type {
  OnActionClickFn,
  VbenFormSchema,
  VxeTableGridOptions,
} from '#/adapter';

import { h } from 'vue';

import { EnumApi, MenuApi } from '#/api';
import { boolOptions } from '#/api/model';
import { Icon } from '#/components/icon';

export const useSearchSchema = (): VbenFormSchema[] => {
  return [
    {
      component: 'Input',
      fieldName: 'title',
      label: '标题',
    },
    {
      component: 'ApiSelect',
      fieldName: 'type',
      label: '菜单类型',
      componentProps: {
        api: {
          type: 'enum',
          params: EnumApi.EnumType.MenuType,
        },
      },
    },
  ];
};

export function useColumns(
  onActionClick?: OnActionClickFn<MenuApi.RecordItem>,
): VxeTableGridOptions<MenuApi.RecordItem>['columns'] {
  return [
    { title: '序号', type: 'seq', width: 50 },
    {
      align: 'left',
      field: 'meta.title',
      title: '菜单名称',
      width: 200,
      treeNode: true,
      showOverflow: true,
      slots: {
        default: ({ row }: any) => {
          return row.meta.icon
            ? h(
                'span',
                {
                  style: {
                    display: 'flex',
                    alignItems: 'center',
                  },
                },
                [
                  h(Icon, {
                    icon: row.meta.icon,
                  }),
                  h(
                    'span',
                    {
                      style: {
                        paddingLeft: '6px',
                      },
                    },
                    row.meta.title,
                  ),
                ],
              )
            : h('span', {}, row.meta.title);
        },
      },
    },
    { align: 'left', field: 'path', title: '路由地址', width: 180 },
    { align: 'left', field: 'component', title: '组件' },
    {
      align: 'left',
      field: 'permission',
      title: '权限标识',
      width: 120,
      showOverflow: true,
    },
    {
      field: 'status',
      title: '状态',
      width: 82,
      cellRender: { name: 'CellTag' },
    },
    { field: 'sort', title: '排序', width: 80 },
    {
      align: 'right',
      cellRender: {
        attrs: {
          nameField: 'name',
          nameTitle: '配置',
          onClick: onActionClick,
        },
        name: 'CellAction',
        options: [
          {
            code: 'append',
            label: '添加项',
            auth: ['menu:add'],
          },
          {
            code: 'edit',
            auth: ['menu:edit'],
          },
          {
            code: 'delete',
            auth: ['menu:delete'],
          },
        ],
      },
      field: 'operation',
      fixed: 'right',
      headerAlign: 'center',
      showOverflow: false,
      title: '操作',
      width: 100,
    },
  ];
}

export const useSchema = (): VbenFormSchema[] => {
  return [
    {
      component: 'ApiRadio',
      defaultValue: 0,
      componentProps: {
        api: {
          type: 'enum',
          params: EnumApi.EnumType.MenuType,
        },
        isBtn: true,
      },
      fieldName: 'type',
      label: '菜单类型',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入路由名称',
      },
      fieldName: 'name',
      label: '路由名称',
      help: 'route.name',
      rules: 'required',
      dependencies: {
        show(values) {
          return [0, 1].includes(values.type);
        },
        triggerFields: ['type'],
      },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入路由地址',
      },
      fieldName: 'path',
      label: '路由地址',
      help: 'route.path',
      rules: 'required',
      dependencies: {
        triggerFields: ['type'],
        show(values) {
          return [0, 1].includes(values.type);
        },
      },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入组件路径',
      },
      dependencies: {
        show(values) {
          return [0, 1].includes(values.type);
        },
        triggerFields: ['type'],
      },
      fieldName: 'component',
      label: '组件路径',
      help: 'route.component',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入重定向',
      },
      dependencies: {
        triggerFields: ['type'],
        show(values) {
          return [0, 1].includes(values.type);
        },
      },
      fieldName: 'redirect',
      label: '重定向',
      help: 'route.redirect',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入菜单名称',
      },
      fieldName: 'meta.title',
      help: 'meta.title',
      label: '菜单名称',
      rules: 'required',
    },
    {
      component: 'IconPicker',
      componentProps: {
        placeholder: '请输入图标',
      },
      fieldName: 'meta.icon',
      label: '图标',
      help: 'meta.icon',
      rules: 'required',
      dependencies: {
        show(values) {
          return [0, 1].includes(values.type);
        },
        triggerFields: ['type'],
      },
    },
    {
      component: 'RadioGroup',
      defaultValue: true,
      componentProps: {
        placeholder: '请输入',
        options: boolOptions,
        optionType: 'button',
        buttonStyle: 'solid',
      },
      dependencies: {
        triggerFields: ['type'],
        show(values) {
          return [1].includes(values.type);
        },
      },
      fieldName: 'meta.keepAlive',
      label: '缓存',
      help: 'meta.keepAlive',
    },
    {
      component: 'RadioGroup',
      defaultValue: false,
      componentProps: {
        placeholder: '请输入',
        options: boolOptions,
        optionType: 'button',
        buttonStyle: 'solid',
      },
      dependencies: {
        triggerFields: ['type'],
        show(values) {
          return [0, 1].includes(values.type);
        },
      },
      fieldName: 'meta.hideInTab',
      label: '隐藏',
      help: 'meta.keepAlive',
    },
    {
      component: 'ApiSelect',
      defaultValue: 0,
      componentProps: {
        placeholder: '请输入',
        api: {
          type: 'enum',
          params: EnumApi.EnumType.PathType,
        },
      },
      dependencies: {
        triggerFields: ['type'],
        show(values) {
          return [0, 1].includes(values.type);
        },
      },
      fieldName: 'meta.pathType',
      label: '路由类型',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入内嵌页面',
      },
      dependencies: {
        triggerFields: ['pathType'],
        show(values) {
          return [1].includes(values.pathType);
        },
      },
      fieldName: 'meta.iframeSrc',
      help: 'meta.iframeSrc',
      label: '内嵌页面',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入外链地址',
      },
      dependencies: {
        triggerFields: ['pathType'],
        show(values) {
          return [2].includes(values.pathType);
        },
      },
      fieldName: 'meta.link',
      help: 'meta.link',
      label: '外链地址',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'sort',
      label: '排序',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      dependencies: {
        show(values) {
          return [2].includes(values.type);
        },
        triggerFields: ['type'],
      },
      fieldName: 'permission',
      label: '权限标识',
    },
    {
      component: 'ApiRadio',
      defaultValue: 1,
      componentProps: {
        placeholder: '请输入',
        api: {
          type: 'enum',
          params: EnumApi.EnumType.Status,
        },
        isBtn: true,
      },
      fieldName: 'status',
      label: '状态',
    },
  ];
};

export const useMenuSchema = (): VbenFormSchema[] => {
  return [
    {
      component: 'ApiTreeSelect',
      componentProps: {
        placeholder: '请输入上级菜单',
        api: {
          url: MenuApi.getTree,
        },
      },
      fieldName: 'pid',
      label: '上级菜单',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入路由名称',
      },
      fieldName: 'name',
      label: '路由名称',
      help: 'route.name',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入路由地址',
      },
      fieldName: 'path',
      label: '路由地址',
      help: 'route.path',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入组件路径',
        disabled: true,
      },
      fieldName: 'component',
      label: '组件路径',
      help: 'route.component',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入菜单名称',
      },
      fieldName: 'meta.title',
      label: '菜单名称',
      help: 'meta.title',
      rules: 'required',
    },
    {
      component: 'IconPicker',
      componentProps: {
        placeholder: '请输入图标',
      },
      fieldName: 'meta.icon',
      label: '图标',
      help: 'meta.icon',
      rules: 'required',
    },
    {
      component: 'RadioGroup',
      defaultValue: true,
      componentProps: {
        placeholder: '请输入',
        options: boolOptions,
        optionType: 'button',
        buttonStyle: 'solid',
      },
      fieldName: 'meta.keepAlive',
      label: '缓存',
      help: 'meta.keepAlive',
    },
    {
      component: 'RadioGroup',
      defaultValue: false,
      componentProps: {
        placeholder: '请输入',
        options: boolOptions,
        optionType: 'button',
        buttonStyle: 'solid',
      },
      fieldName: 'meta.hideInTab',
      help: 'meta.hideInTab',
      label: '隐藏',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        placeholder: '请输入',
        api: {
          type: 'enum',
          params: EnumApi.EnumType.PathType,
        },
      },
      defaultValue: 0,
      fieldName: 'meta.pathType',
      label: '路由类型',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入内嵌页面',
      },
      dependencies: {
        triggerFields: ['pathType'],
        show(values) {
          return [1].includes(values.pathType);
        },
      },
      fieldName: 'meta.iframeSrc',
      help: 'meta.iframeSrc',
      label: '内嵌页面',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入外链地址',
      },
      dependencies: {
        triggerFields: ['pathType'],
        show(values) {
          return [2].includes(values.pathType);
        },
      },
      fieldName: 'meta.link',
      help: 'meta.link',
      label: '外链地址',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'sort',
      label: '排序',
      rules: 'required',
    },
    {
      component: 'ApiRadio',
      defaultValue: 1,
      componentProps: {
        placeholder: '请输入',
        api: {
          type: 'enum',
          params: EnumApi.EnumType.Status,
        },
        isBtn: true,
      },
      fieldName: 'status',
      label: '状态',
    },
  ];
};
