import { useEffect, useState, useCallback } from 'react';
import { useParams } from 'react-router-dom';
import {
  Table,
  Button,
  Space,
  Modal,
  Form,
  Input,
  InputNumber,
  DatePicker,
  Switch,
  Select,
  Tag,
  message,
  Popconfirm,
  Drawer,
  Descriptions,
  Segmented,
  Timeline,
  Upload,
  Alert,
  Dropdown,
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  ReloadOutlined,
  EyeOutlined,
  DownloadOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import {
  listPluginData,
  createPluginData,
  updatePluginData,
  deletePluginData,
  batchPluginData,
  resolveRefLabels,
  exportPluginData,
  exportPluginDataAsBlob,
  importPluginData,
  type PluginDataListOptions,
  type ImportResult,
} from '../api/pluginData';
import EntitySelect from '../components/EntitySelect';
import {
  getPluginSchema,
  type PluginFieldSchema,
  type PluginEntitySchema,
  type PluginPageSchema,
  type PluginSectionSchema,
} from '../api/plugins';
import { evaluateVisibleWhen } from '../utils/exprEvaluator';

const { Search } = Input;
const { TextArea } = Input;

interface PluginCRUDPageProps {
  /** 如果从 tabs/detail 页面内嵌使用，通过 props 传入配置 */
  pluginIdOverride?: string;
  entityOverride?: string;
  filterField?: string;
  filterValue?: string;
  enableViews?: string[];
  /** detail 页面内嵌时使用 compact 模式 */
  compact?: boolean;
}

export default function PluginCRUDPage({
  pluginIdOverride,
  entityOverride,
  filterField,
  filterValue,
  enableViews: enableViewsProp,
  compact,
}: PluginCRUDPageProps = {}) {
  const routeParams = useParams<{ pluginId: string; entityName: string }>();
  const pluginId = pluginIdOverride || routeParams.pluginId || '';
  const entityName = entityOverride || routeParams.entityName || '';

  const [records, setRecords] = useState<Record<string, unknown>[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [fields, setFields] = useState<PluginFieldSchema[]>([]);
  const [displayName, setDisplayName] = useState(entityName || '');
  const [modalOpen, setModalOpen] = useState(false);
  const [editRecord, setEditRecord] = useState<Record<string, unknown> | null>(null);
  const [form] = Form.useForm();
  const [formValues, setFormValues] = useState<Record<string, unknown>>({});

  // 筛选/搜索/排序 state
  const [searchText, setSearchText] = useState('');
  const [filters, setFilters] = useState<Record<string, string>>({});
  const [sortBy, setSortBy] = useState<string | undefined>();
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');

  // 视图切换
  const [viewMode, setViewMode] = useState<string>('table');

  // 批量选择
  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);

  // 跨插件引用标签解析
  const [resolvedLabels, setResolvedLabels] = useState<Record<string, Record<string, string | null>>>({});
  const [labelMeta, setLabelMeta] = useState<Record<string, { plugin_installed: boolean }>>({});

  // 详情 Drawer
  const [detailOpen, setDetailOpen] = useState(false);
  const [detailRecord, setDetailRecord] = useState<Record<string, unknown> | null>(null);
  const [detailSections, setDetailSections] = useState<PluginSectionSchema[]>([]);
  const [allEntities, setAllEntities] = useState<PluginEntitySchema[]>([]);
  const [allPages, setAllPages] = useState<PluginPageSchema[]>([]);

  // 导入导出
  const [entityDef, setEntityDef] = useState<PluginEntitySchema | null>(null);
  const [importModalOpen, setImportModalOpen] = useState(false);
  const [importing, setImporting] = useState(false);
  const [importResult, setImportResult] = useState<ImportResult | null>(null);
  const [exporting, setExporting] = useState(false);

  // 从 fields 中提取 filterable 字段
  const filterableFields = fields.filter((f) => f.filterable);

  // 查找是否有 detail 页面
  const hasDetailPage = allPages.some(
    (p) => p.type === 'detail' && 'entity' in p && p.entity === entityName,
  );

  // 可用视图
  const enableViews = enableViewsProp ||
    (() => {
      const page = allPages.find(
        (p) => p.type === 'crud' && 'entity' in p && p.entity === entityName,
      );
      return (page as { enable_views?: string[] })?.enable_views || ['table'];
    })();

  // 加载 schema
  useEffect(() => {
    if (!pluginId) return;
    const abortController = new AbortController();

    async function loadSchema() {
      try {
        const schema = await getPluginSchema(pluginId!);
        if (abortController.signal.aborted) return;
        const entities: PluginEntitySchema[] = (schema as { entities?: PluginEntitySchema[] }).entities || [];
        setAllEntities(entities);
        const entity = entities.find((e) => e.name === entityName);
        if (entity) {
          setFields(entity.fields);
          setDisplayName(entity.display_name || entityName || '');
          setEntityDef(entity);
        }
        const ui = (schema as { ui?: { pages: PluginPageSchema[] } }).ui;
        if (ui?.pages) {
          setAllPages(ui.pages);
          const detailPage = ui.pages.find(
            (p) => p.type === 'detail' && 'entity' in p && p.entity === entityName,
          );
          if (detailPage && 'sections' in detailPage) {
            setDetailSections(detailPage.sections);
          }
        }
      } catch {
        message.warning('Schema 加载失败，部分功能不可用');
      }
    }

    loadSchema();
    return () => abortController.abort();
  }, [pluginId, entityName]);

  const fetchData = useCallback(
    async (p = page, overrides?: { search?: string; sort_by?: string; sort_order?: 'asc' | 'desc' }) => {
      if (!pluginId || !entityName) return;
      setLoading(true);
      try {
        const options: PluginDataListOptions = {};
        const mergedFilters = { ...filters };
        if (filterField && filterValue) {
          mergedFilters[filterField] = filterValue;
        }
        if (Object.keys(mergedFilters).length > 0) {
          options.filter = mergedFilters;
        }
        const effectiveSearch = overrides?.search ?? searchText;
        if (effectiveSearch) options.search = effectiveSearch;
        const effectiveSortBy = overrides?.sort_by ?? sortBy;
        const effectiveSortOrder = overrides?.sort_order ?? sortOrder;
        if (effectiveSortBy) {
          options.sort_by = effectiveSortBy;
          options.sort_order = effectiveSortOrder;
        }
        const result = await listPluginData(pluginId, entityName, p, 20, options);
        setRecords(
          result.data.map((r) => ({ ...r.data, _id: r.id, _version: r.version })),
        );
        setTotal(result.total);
      } catch {
        message.error('加载数据失败');
      }
      setLoading(false);
    },
    [pluginId, entityName, page, filters, searchText, sortBy, sortOrder, filterField, filterValue],
  );

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // 数据加载后解析跨插件引用标签
  useEffect(() => {
    if (!pluginId || !entityName || !records.length || !fields.length) return;
    const refFields = fields.filter((f) => f.ref_entity);
    if (!refFields.length) return;

    const fieldUuids: Record<string, string[]> = {};
    for (const f of refFields) {
      const uuids = [...new Set(
        records.map((r) => r[f.name]).filter(Boolean).map(String),
      )];
      if (uuids.length) fieldUuids[f.name] = uuids;
    }

    if (!Object.keys(fieldUuids).length) return;

    resolveRefLabels(pluginId, entityName, fieldUuids)
      .then((result) => {
        setResolvedLabels(result.labels);
        setLabelMeta(result.meta as Record<string, { plugin_installed: boolean }>);
      })
      .catch(() => {});
  }, [records, fields, pluginId, entityName]);

  // 筛选变化
  const handleFilterChange = (fieldName: string, value: string | undefined) => {
    const newFilters = { ...filters };
    if (value) {
      newFilters[fieldName] = value;
    } else {
      delete newFilters[fieldName];
    }
    setFilters(newFilters);
    setPage(1);
    // 直接触发重新查询
    fetchData(1);
  };

  const handleSubmit = async (values: Record<string, unknown>) => {
    if (!pluginId || !entityName) return;
    const { _id, _version, ...data } = values as Record<string, unknown> & {
      _id?: string;
      _version?: number;
    };

    try {
      if (editRecord) {
        await updatePluginData(
          pluginId,
          entityName,
          editRecord._id as string,
          data,
          editRecord._version as number,
        );
        message.success('更新成功');
      } else {
        await createPluginData(pluginId, entityName, data);
        message.success('创建成功');
      }
      setModalOpen(false);
      setEditRecord(null);
      fetchData();
    } catch {
      message.error('操作失败');
    }
  };

  const handleDelete = async (record: Record<string, unknown>) => {
    if (!pluginId || !entityName) return;
    try {
      await deletePluginData(pluginId, entityName, record._id as string);
      message.success('删除成功');
      fetchData();
    } catch {
      message.error('删除失败');
    }
  };

  const handleBatchDelete = async () => {
    if (!pluginId || !entityName || selectedRowKeys.length === 0) return;
    try {
      await batchPluginData(pluginId, entityName, {
        action: 'delete',
        ids: selectedRowKeys,
      });
      message.success(`已删除 ${selectedRowKeys.length} 条记录`);
      setSelectedRowKeys([]);
      fetchData();
    } catch {
      message.error('批量删除失败');
    }
  };

  // 动态生成列
  const columns = [
    ...fields.slice(0, 5).map((f) => ({
      title: f.display_name || f.name,
      dataIndex: f.name,
      key: f.name,
      ellipsis: true,
      sorter: f.sortable ? true : undefined,
      render: (val: unknown) => {
        if (typeof val === 'boolean') return val ? <Tag color="green">是</Tag> : <Tag>否</Tag>;
        // 引用字段 → 显示解析后的标签
        if (f.ref_entity) {
          const uuid = String(val ?? '');
          if (!uuid || uuid === '-') return '-';
          const label = resolvedLabels[f.name]?.[uuid];
          const installed = labelMeta[f.name]?.plugin_installed !== false;
          if (!installed) return <Tag color="default">{f.ref_fallback_label || '外部引用'}</Tag>;
          if (label === null) return <Tag color="warning">无效引用</Tag>;
          if (label) return <Tag color="blue">{label}</Tag>;
        }
        return String(val ?? '-');
      },
    })),
    {
      title: '操作',
      key: 'action',
      width: hasDetailPage ? 200 : 150,
      render: (_: unknown, record: Record<string, unknown>) => (
        <Space size="small">
          {hasDetailPage && (
            <Button
              size="small"
              icon={<EyeOutlined />}
              onClick={() => {
                setDetailRecord(record);
                setDetailOpen(true);
              }}
            >
              详情
            </Button>
          )}
          <Button
            size="small"
            icon={<EditOutlined />}
            onClick={() => {
              setEditRecord(record);
              form.setFieldsValue(record);
              setFormValues(record);
              setModalOpen(true);
            }}
          >
            编辑
          </Button>
          <Popconfirm title="确定删除?" onConfirm={() => handleDelete(record)}>
            <Button size="small" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // 动态生成表单字段
  const renderFormField = (field: PluginFieldSchema) => {
    const widget = field.ui_widget || field.field_type;
    switch (widget) {
      case 'number':
      case 'integer':
      case 'float':
      case 'decimal':
        return <InputNumber style={{ width: '100%' }} />;
      case 'boolean':
        return <Switch />;
      case 'date':
      case 'datetime':
        return <DatePicker showTime={widget === 'datetime'} style={{ width: '100%' }} />;
      case 'select':
        return (
          <Select>
            {(field.options || []).map((opt) => (
              <Select.Option key={String(opt.value)} value={opt.value}>
                {opt.label}
              </Select.Option>
            ))}
          </Select>
        );
      case 'textarea':
        return <TextArea rows={3} />;
      case 'entity_select':
        return (
          <EntitySelect
            pluginId={pluginId}
            entity={field.ref_entity!}
            labelField={field.ref_label_field || 'name'}
            searchFields={field.ref_search_fields}
            refPlugin={field.ref_plugin}
            fallbackLabel={field.ref_fallback_label}
            value={formValues[field.name] as string | undefined}
            onChange={(v) => form.setFieldValue(field.name, v)}
            cascadeFrom={field.cascade_from}
            cascadeFilter={field.cascade_filter}
            cascadeValue={
              field.cascade_from
                ? (formValues[field.cascade_from] as string | undefined)
                : undefined
            }
            placeholder={field.display_name}
          />
        );
      default:
        return <Input />;
    }
  };

  // Timeline 视图渲染
  const renderTimeline = () => {
    const dateField = fields.find((f) => f.field_type === 'DateTime' || f.field_type === 'date');
    const titleField = fields.find((f) => f.searchable)?.name || fields[1]?.name;
    const contentField = fields.find((f) => f.ui_widget === 'textarea')?.name;

    return (
      <Timeline
        items={records.map((record) => ({
          children: (
            <div>
              {titleField && (
                <p>
                  <strong>{String(record[titleField] ?? '-')}</strong>
                </p>
              )}
              {contentField && <p>{String(record[contentField] ?? '-')}</p>}
              {dateField && (
                <p style={{ color: '#999', fontSize: 12 }}>
                  {String(record[dateField.name] ?? '-')}
                </p>
              )}
            </div>
          ),
        }))}
      />
    );
  };

  // 详情 Drawer 渲染
  const renderDetailDrawer = () => {
    if (!detailRecord) return null;

    return (
      <Drawer
        title={displayName + ' 详情'}
        open={detailOpen}
        onClose={() => {
          setDetailOpen(false);
          setDetailRecord(null);
        }}
        width={640}
      >
        {detailSections.length > 0 ? (
          detailSections.map((section, idx) => {
            if (section.type === 'fields') {
              return (
                <div key={idx} style={{ marginBottom: 24 }}>
                  <h4>{section.label}</h4>
                  <Descriptions column={2} bordered size="small">
                    {section.fields.map((fieldName) => {
                      const fieldDef = fields.find((f) => f.name === fieldName);
                      const val = detailRecord[fieldName];
                      return (
                        <Descriptions.Item
                          key={fieldName}
                          label={fieldDef?.display_name || fieldName}
                        >
                          {typeof val === 'boolean' ? (
                            val ? (
                              <Tag color="green">是</Tag>
                            ) : (
                              <Tag>否</Tag>
                            )
                          ) : (
                            String(val ?? '-')
                          )}
                        </Descriptions.Item>
                      );
                    })}
                  </Descriptions>
                </div>
              );
            }
            if (section.type === 'crud') {
              const secEntity = allEntities.find((e) => e.name === section.entity);
              return (
                <div key={idx} style={{ marginBottom: 24 }}>
                  <h4>{section.label}</h4>
                  {secEntity && (
                    <PluginCRUDPage
                      pluginIdOverride={pluginId}
                      entityOverride={section.entity}
                      filterField={section.filter_field}
                      filterValue={String(detailRecord._id ?? '')}
                      enableViews={section.enable_views}
                      compact
                    />
                  )}
                </div>
              );
            }
            return null;
          })
        ) : (
          // 没有 sections 配置时，默认展示所有字段
          <Descriptions column={2} bordered size="small">
            {fields.map((field) => {
              const val = detailRecord[field.name];
              return (
                <Descriptions.Item key={field.name} label={field.display_name || field.name}>
                  {typeof val === 'boolean' ? (
                    val ? (
                      <Tag color="green">是</Tag>
                    ) : (
                      <Tag>否</Tag>
                    )
                  ) : (
                    String(val ?? '-')
                  )}
                </Descriptions.Item>
              );
            })}
          </Descriptions>
        )}
      </Drawer>
    );
  };

  return (
    <div style={compact ? { padding: 0 } : { padding: 24 }}>
      {!compact && (
        <div
          style={{
            marginBottom: 16,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <h2 style={{ margin: 0 }}>{displayName}</h2>
          <Space>
            {enableViews.length > 1 && (
              <Segmented
                options={enableViews.map((v) => ({
                  label: v === 'table' ? '表格' : v === 'timeline' ? '时间线' : v,
                  value: v,
                }))}
                value={viewMode}
                onChange={(val) => setViewMode(val as string)}
              />
            )}
            <Button
              icon={<PlusOutlined />}
              type="primary"
              onClick={() => {
                setEditRecord(null);
                form.resetFields();
                setFormValues({});
                setModalOpen(true);
              }}
            >
              新增
            </Button>
            <Button icon={<ReloadOutlined />} onClick={() => fetchData()}>
              刷新
            </Button>
            {entityDef?.exportable && (
              <Dropdown
                menu={{
                  items: [
                    { key: 'json', label: 'JSON' },
                    { key: 'csv', label: 'CSV' },
                    { key: 'xlsx', label: 'Excel (.xlsx)' },
                  ],
                  onClick: async ({ key }) => {
                    setExporting(true);
                    try {
                      const ts = Date.now();
                      if (key === 'json') {
                        const rows = await exportPluginData(pluginId, entityName, {
                          sort_by: sortBy,
                          sort_order: sortOrder,
                        });
                        const blob = new Blob([JSON.stringify(rows, null, 2)], { type: 'application/json' });
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = `${entityName}_export_${ts}.json`;
                        a.click();
                        URL.revokeObjectURL(url);
                        message.success(`导出 ${rows.length} 条记录`);
                      } else {
                        const blob = await exportPluginDataAsBlob(
                          pluginId, entityName, key as 'csv' | 'xlsx',
                          { sort_by: sortBy, sort_order: sortOrder },
                        );
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = `${entityName}_export_${ts}.${key === 'csv' ? 'csv' : 'xlsx'}`;
                        a.click();
                        URL.revokeObjectURL(url);
                        message.success('导出成功');
                      }
                    } catch {
                      message.error('导出失败');
                    }
                    setExporting(false);
                  },
                }}
              >
                <Button icon={<DownloadOutlined />} loading={exporting}>
                  导出
                </Button>
              </Dropdown>
            )}
            {entityDef?.importable && (
              <Button
                icon={<UploadOutlined />}
                onClick={() => {
                  setImportResult(null);
                  setImportModalOpen(true);
                }}
              >
                导入
              </Button>
            )}
          </Space>
        </div>
      )}

      {/* 搜索和筛选栏 */}
      {!compact && (
        <Space style={{ marginBottom: 16 }} wrap>
          {fields.some((f) => f.searchable) && (
            <Search
              placeholder="搜索..."
              allowClear
              style={{ width: 240 }}
              onSearch={(value) => {
                setSearchText(value);
                setPage(1);
                fetchData(1, { search: value });
              }}
            />
          )}
          {filterableFields.map((field) => (
            <Select
              key={field.name}
              placeholder={field.display_name || field.name}
              allowClear
              style={{ width: 150 }}
              options={field.options || []}
              onChange={(value) => handleFilterChange(field.name, value)}
            />
          ))}
        </Space>
      )}

      {/* 批量操作栏 */}
      {selectedRowKeys.length > 0 && !compact && (
        <div
          style={{
            marginBottom: 16,
            padding: '8px 16px',
            background: 'var(--colorBgContainer, #fff)',
            borderRadius: 8,
            display: 'flex',
            alignItems: 'center',
            gap: 12,
          }}
        >
          <span>已选择 <strong>{selectedRowKeys.length}</strong> 项</span>
          <Popconfirm
            title={`确定删除选中的 ${selectedRowKeys.length} 条记录？`}
            onConfirm={handleBatchDelete}
          >
            <Button danger icon={<DeleteOutlined />}>
              批量删除
            </Button>
          </Popconfirm>
          <Button onClick={() => setSelectedRowKeys([])}>
            取消选择
          </Button>
        </div>
      )}

      {viewMode === 'table' || enableViews.length <= 1 ? (
        <Table
          columns={columns}
          dataSource={records}
          rowKey="_id"
          loading={loading}
          size={compact ? 'small' : undefined}
          rowSelection={
            compact
              ? undefined
              : {
                  selectedRowKeys,
                  onChange: (keys) => setSelectedRowKeys(keys as string[]),
                }
          }
          onChange={(_pagination, _filters, sorter) => {
            if (!Array.isArray(sorter) && sorter.field) {
              const newSortBy = String(sorter.field);
              const newSortOrder = sorter.order === 'ascend' ? 'asc' as const : 'desc' as const;
              setSortBy(newSortBy);
              setSortOrder(newSortOrder);
              setPage(1);
              fetchData(1, { sort_by: newSortBy, sort_order: newSortOrder });
            } else if (!sorter || (Array.isArray(sorter) && sorter.length === 0)) {
              setSortBy(undefined);
              setSortOrder('desc');
              setPage(1);
              fetchData(1, { sort_by: undefined, sort_order: undefined });
            }
          }}
          pagination={
            compact
              ? { pageSize: 5, showTotal: (t) => `共 ${t} 条` }
              : {
                  current: page,
                  total,
                  pageSize: 20,
                  onChange: (p) => setPage(p),
                  showTotal: (t) => `共 ${t} 条`,
                }
          }
        />
      ) : viewMode === 'timeline' ? (
        renderTimeline()
      ) : null}

      {/* 新增/编辑弹窗 */}
      <Modal
        title={editRecord ? '编辑' : '新增'}
        open={modalOpen}
        onCancel={() => {
          setModalOpen(false);
          setEditRecord(null);
          setFormValues({});
        }}
        onOk={() => form.submit()}
        destroyOnClose
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          onValuesChange={(_, allValues) => setFormValues(allValues)}
        >
          {fields.map((field) => {
            // visible_when 条件显示
            const visible = evaluateVisibleWhen(field.visible_when, formValues);
            if (!visible) return null;

            return (
              <Form.Item
                key={field.name}
                name={field.name}
                label={field.display_name || field.name}
                rules={
                  field.required
                    ? [{ required: true, message: `请输入${field.display_name || field.name}` }]
                    : []
                }
                valuePropName={field.field_type === 'boolean' ? 'checked' : 'value'}
              >
                {renderFormField(field)}
              </Form.Item>
            );
          })}
        </Form>
      </Modal>

      {/* 详情 Drawer */}
      {renderDetailDrawer()}

      {/* 导入弹窗 */}
      <Modal
        title="导入数据"
        open={importModalOpen}
        onCancel={() => {
          setImportModalOpen(false);
          setImportResult(null);
        }}
        footer={importResult ? (
          <Button onClick={() => { setImportModalOpen(false); setImportResult(null); }}>
            关闭
          </Button>
        ) : null}
        destroyOnClose
      >
        {importResult ? (
          <div>
            <Alert
              type={importResult.error_count > 0 ? 'warning' : 'success'}
              message={`导入完成：成功 ${importResult.success_count} 条，失败 ${importResult.error_count} 条`}
              style={{ marginBottom: 16 }}
            />
            {importResult.errors.length > 0 && (
              <div>
                <h4>错误详情</h4>
                {importResult.errors.map((err, i) => (
                  <Alert
                    key={i}
                    type="error"
                    message={`第 ${err.row + 1} 行`}
                    description={err.errors.join('; ')}
                    style={{ marginBottom: 8 }}
                  />
                ))}
              </div>
            )}
          </div>
        ) : (
          <Upload.Dragger
            accept=".json"
            maxCount={1}
            beforeUpload={(file) => {
              const reader = new FileReader();
              reader.onload = async (e) => {
                try {
                  const text = e.target?.result as string;
                  const rows = JSON.parse(text);
                  if (!Array.isArray(rows)) {
                    message.error('文件格式错误：需要 JSON 数组');
                    return;
                  }
                  setImporting(true);
                  const result = await importPluginData(pluginId, entityName, rows);
                  setImportResult(result);
                  if (result.success_count > 0) fetchData();
                } catch {
                  message.error('文件解析失败，请确认格式为 JSON 数组');
                }
                setImporting(false);
              };
              reader.readAsText(file);
              return false;
            }}
            showUploadList={false}
            disabled={importing}
          >
            <p style={{ fontSize: 16, padding: '24px 0' }}>
              {importing ? '导入中...' : '点击或拖拽 JSON 文件到此处'}
            </p>
            <p style={{ color: '#999' }}>支持 JSON 数组格式，单次上限 1000 行</p>
          </Upload.Dragger>
        )}
      </Modal>
    </div>
  );
}
