import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();

//菜单管理页，所需的列 配置
export const columns: BasicColumn[] = [
  {
    title: t('routes.common.system.tableTitleSystemMenuName'), //菜单名称
    // title:'菜单名称',
    dataIndex: 'meta.title',
    width: 180,
    align: 'left',
    customRender: ({ record }) => {
      record = t(record.meta.title); //国际化处理
      return record;
    },
  },
  {
    title: t('routes.common.system.tableTitleSystemIcon'), //图标
    // title:'图标',
    dataIndex: 'meta.icon',
    width: 50,
    customRender: ({ record }) => {
      return h(Icon, { icon: record.meta.icon });
    },
  },
  {
    title: t('routes.common.system.tableTitleSystemPermissionTag'), //权限标识
    // title:'权限标识',
    dataIndex: 'permission',
    width: 220,
  },
  {
    title: t('routes.common.system.tableTitleSystemComponents'), //'组件'
    // title:'组件',
    width: 120,
    dataIndex: 'component',
  },
  {
    title: t('routes.common.system.tableTitleSystemSort'), //'排序'
    // title:'排序',
    dataIndex: 'sort',
    width: 50,
  },
  {
    title: t('routes.common.system.tableTitleSystemStatus'), //'状态'
    // title:'状态',
    dataIndex: 'status',
    width: 80,
    customRender: ({ record }) => {
      const status = record.meta.status;
      const enable = ~~status === 0;
      const color = enable ? 'green' : 'red';
      const enableText: string = t('routes.common.system.tableTitleSystemEnable'); //国际化处理--启用
      const stopText: string = t('routes.common.system.tableTitleSystemStop'); //国际化处理--停用
      const text = enable ? enableText : stopText;
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: t('routes.common.system.tableTitleSystemCreateTime'), //'创建时间'
    // title:'创建时间',
    dataIndex: 'createTime',
    width: 180,
  },
];

const isDir = (type: string) => type === '0';
const isMenu = (type: string) => type === '1';
const isButton = (type: string) => type === '2';

//菜单管理页，所需的搜索内容
export const searchFormSchema: FormSchema[] = [
  {
    field: 'menuName',
    label: t('routes.common.system.tableTitleSystemMenuName'), //菜单名称
    // label: '菜单名称',
    component: 'Input',
    colProps: { span: 8 },
    componentProps: {
      maxLength: 255,
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 255) {
              return Promise.reject('字数不超过255个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  {
    field: 'status',
    label: t('routes.common.system.tableTitleSystemStatus'), //状态
    // label: '状态',
    component: 'Select',
    componentProps: {
      options: [
        { label: t('routes.common.system.tableTitleSystemEnable'), value: '0' },
        // { label: '启用', value: '0' },

        { label: t('routes.common.system.tableTitleSystemStop'), value: '1' },
        // { label: '停用', value: '1' },
      ],
    },
    colProps: { span: 8 },
  },
];

//----------------------------------新增、编辑----------------------------------------------------------
export const formSchema: FormSchema[] = [
  {
    field: 'menuType',
    label: t('routes.common.system.menuEditPagesMenuType'), //菜单类型
    component: 'RadioButtonGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: t('routes.common.system.menuEditPagesDirectory'), value: '0' }, //目录
        { label: t('routes.common.system.menuEditPagesMenu'), value: '1' }, //菜单
        { label: t('routes.common.system.menuEditPagesButton'), value: '2' }, //按钮
      ],
    },
    colProps: { lg: 24, md: 24 },
  },
  {
    field: 'title',
    label: t('routes.common.system.tableTitleSystemMenuName'), //菜单名称
    component: 'Input',
    required: true,
    componentProps: {
      maxLength: 100,
    },
  },

  {
    field: 'parentId',
    label: t('routes.common.system.menuEditPagesParentMenu'), //上级菜单
    component: 'TreeSelect',
    componentProps: {
      replaceFields: {
        title: 'menuName',
        key: 'id',
        value: 'id',
      },
      getPopupContainer: () => document.body,
    },
  },

  {
    field: 'sort',
    label: t('routes.common.system.tableTitleSystemSort'), //排序
    component: 'InputNumber',
    required: true,
    componentProps: {
      maxLength: 32,
    },
  },
  {
    field: 'icon',
    label: t('routes.common.system.tableTitleSystemIcon'), //图标
    component: 'IconPicker',
    required: true,
    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
  },

  {
    field: 'path',
    label: t('routes.common.system.menuEditPagesRouterAddress'), //路由地址
    component: 'Input',
    required: true,
    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
    componentProps: {
      maxLength: 255,
    },
  },
  {
    field: 'permission',
    label: '权限标识', //路由地址
    component: 'Input',
    required: true,
    componentProps: {
      maxLength: 255,
    },
  },
  {
    field: 'component',
    label: t('routes.common.system.menuEditPagesComponentsPath'), //组件路径
    component: 'Input',
    ifShow: ({ values }) => isMenu(Reflect.get(values, 'menuType')),
    componentProps: {
      maxLength: 100,
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 100) {
              return Promise.reject('字数不超过100个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  {
    field: 'permission',
    label: t('routes.common.system.tableTitleSystemPermissionTag'), //权限标识
    component: 'Input',
    ifShow: ({ values }) => !isDir(Reflect.get(values, 'menuType')),
    componentProps: {
      maxLength: 100,
    },
    dynamicRules: () => {
      return [
        {
          required: false,
          validator: (_, value) => {
            if (String(value).length > 100) {
              return Promise.reject('字数不超过100个字');
            }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  {
    field: 'status',
    label: t('routes.common.system.tableTitleSystemStatus'), //状态
    component: 'RadioButtonGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: t('routes.common.system.tableTitleSystemEnable'), value: '0' }, //启用
        { label: t('routes.common.system.tableTitleSystemStop'), value: '1' }, //禁用
      ],
    },
  },
  {
    field: 'isLink',
    label: t('routes.common.system.menuEditPagesIsExt'), //是否外链
    component: 'RadioButtonGroup',
    defaultValue: false,
    componentProps: {
      options: [
        { label: t('routes.common.system.menuEditPagesYes'), value: true }, //是
        { label: t('routes.common.system.menuEditPagesNo'), value: false }, //否
      ],
    },
    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
  },

  {
    field: 'ignoreKeepAlive',
    label: t('routes.common.system.menuEditPagesIsKeepAlive'), //是否缓存
    component: 'RadioButtonGroup',
    defaultValue: false,
    componentProps: {
      options: [
        { label: t('routes.common.system.menuEditPagesYes'), value: true }, //是
        { label: t('routes.common.system.menuEditPagesNo'), value: false }, //否
      ],
    },
    ifShow: ({ values }) => isMenu(Reflect.get(values, 'menuType')),
  },

  {
    field: 'hideMenu',
    label: t('routes.common.system.menuEditPagesIsHide'), //是否隐藏
    component: 'RadioButtonGroup',
    defaultValue: false,
    componentProps: {
      options: [
        { label: t('routes.common.system.menuEditPagesYes'), value: true }, //是
        { label: t('routes.common.system.menuEditPagesNo'), value: false }, //否
      ],
    },
    ifShow: ({ values }) => !isButton(Reflect.get(values, 'menuType')),
  },
];