import { Button, Tag } from 'antd';
import { ExportOutlined } from '@ant-design/icons';
import type {XinTableColumn, XinTableProps} from '@/components/XinTable/typings';
import XinTable from '@/components/XinTable';

// 模拟用户数据类型
interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  status: number;
  role: string;
  department: string;
  createdAt: string;
}

// 模拟数据
const mockData: User[] = Array.from({ length: 50 }, (_, i) => ({
  id: i + 1,
  name: `用户${i + 1}`,
  email: `user${i + 1}@example.com`,
  age: Math.floor(Math.random() * 40) + 20,
  status: Math.random() > 0.3 ? 1 : 0,
  role: ['管理员', '编辑', '访客'][Math.floor(Math.random() * 3)],
  department: ['技术部', '产品部', '运营部', '市场部'][Math.floor(Math.random() * 4)],
  createdAt: new Date(Date.now() - Math.random() * 10000000000).toLocaleDateString(),
}));

/**
 * XinTable 示例页面
 */
const XinTableExample = () => {

  // 表格列配置
  const columns: XinTableColumn<User>[] = [
    {
      title: '序号',
      width: 60,
      valueType: 'text',
      dataIndex: 'id',
    },
    {
      dataIndex: 'name',
      title: '用户名',
      width: 120,
      valueType: 'text',
      required: true,
    },
    {
      dataIndex: 'email',
      title: '邮箱',
      valueType: 'text',
      width: 200,
      ellipsis: true,
    },
    {
      dataIndex: 'age',
      title: '年龄',
      width: 80,
      valueType: 'digit',
      sorter: (a: User, b: User) => a.age - b.age,
      hideInSearch: true
    },
    {
      dataIndex: 'status',
      title: '状态',
      width: 100,
      valueType: 'select',
      // 自定义渲染 - 用户外理显示内容
      render: (value: number) => {
        const enumMap: Record<number, { text: string; color: string }> = {
          1: { text: '启用', color: 'green' },
          0: { text: '禁用', color: 'red' },
        };
        const item = enumMap[value];
        return item ? <Tag color={item.color}>{item.text}</Tag> : '-';
      },
      filters: [
        { text: '启用', value: 1 },
        { text: '禁用', value: 0 },
      ],
    },
    {
      dataIndex: 'role',
      title: '角色',
      width: 100,
      valueType: 'select',
      fieldProps: {
        options: [
          { label: '管理员', value: '管理员' },
          { label: '编辑', value: '编辑' },
          { label: '访客', value: '访客' },
        ],
      }
    },
    {
      dataIndex: 'department',
      title: '部门',
      width: 120,
      valueType: 'select',
      fieldProps: {
        options: [
          { label: '技术部', value: '技术部' },
          { label: '产品部', value: '产品部' },
          { label: '运营部', value: '运营部' },
          { label: '市场部', value: '市场部' },
        ],
      },
      hideInSearch: true,
    },
    {
      dataIndex: 'createdAt',
      title: '创建时间',
      width: 120,
      hideInForm: true,
      hideInSearch: true,
    },
  ];

  // 自定义工具栏
  const customToolbar: XinTableProps['toolBarRender'] = (dom) => [
    <Button key="export" icon={<ExportOutlined />}>
      导出
    </Button>,
    dom.columnSetting,
    dom.hideBorder,
    dom.reload,
    dom.columnHeight
  ];

  return (
    <XinTable
      columns={columns}
      rowKey="id"
      dataSource={mockData}
      accessName='system.user.list'
      api={'/system-user/list'}
      toolBarRender={customToolbar}
    />
  );
};

export default XinTableExample;