jiu/client/lib/widgets/data_table_card.dart

import 'package:flutter/material.dart';
import '../core/responsive/responsive.dart';
import '../core/theme/app_theme.dart';

class DataTableCard extends StatefulWidget {
  final List<DataColumn> columns;
  final List<DataRow> rows;
  final Widget? toolbar;
  final int? totalCount;
  final int page;
  final int pageSize;
  final ValueChanged<int>? onPageChanged;
  final ValueChanged<int>? onPageSizeChanged;

  /// 窄屏（手机）卡片列表。与 [rows] 同序、同数量；提供后窄屏渲染卡片流，
  /// 宽屏仍渲染表格。为 null 时窄屏也保持表格（横向滚动）。
  final List<Widget>? mobileCards;

  const DataTableCard({
    super.key,
    required this.columns,
    required this.rows,
    this.toolbar,
    this.totalCount,
    this.page = 1,
    this.pageSize = 20,
    this.onPageChanged,
    this.onPageSizeChanged,
    this.mobileCards,
  });

  @override
  State<DataTableCard> createState() => _DataTableCardState();
}

class _DataTableCardState extends State<DataTableCard> {
  // 当前悬停行的索引（-1 表示无悬停）
  final _hoveredRow = ValueNotifier<int>(-1);
  final _vCtrl = ScrollController();
  final _hCtrl = ScrollController();

  @override
  void dispose() {
    _hoveredRow.dispose();
    _vCtrl.dispose();
    _hCtrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (widget.toolbar != null)
          Container(
            color: AppTheme.surface,
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
            child: widget.toolbar!,
          ),
        if (widget.toolbar != null) const Divider(height: 1),
        Expanded(
          child: (context.isMobile && widget.mobileCards != null)
              ? _buildMobileList()
              : _buildTable(),
        ),
        // Pagination
        if (widget.totalCount != null)
          Container(
            height: 48,
            color: AppTheme.surface,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              children: [
                Text(
                  '共 ${widget.totalCount} 条记录',
                  style: const TextStyle(
                      fontSize: 13, color: AppTheme.textSecondary),
                ),
                const Spacer(),
                _PaginationBar(
                  page: widget.page,
                  total: widget.totalCount!,
                  pageSize: widget.pageSize,
                  onPageChanged: widget.onPageChanged,
                  onPageSizeChanged: widget.onPageSizeChanged,
                ),
              ],
            ),
          ),
      ],
    );
  }

  Widget _buildTable() {
    return LayoutBuilder(
      builder: (context, constraints) => Scrollbar(
        controller: _vCtrl,
        thumbVisibility: true,
        child: SingleChildScrollView(
          controller: _vCtrl,
          child: Scrollbar(
            controller: _hCtrl,
            thumbVisibility: true,
            scrollbarOrientation: ScrollbarOrientation.bottom,
            child: SingleChildScrollView(
              controller: _hCtrl,
              scrollDirection: Axis.horizontal,
              child: ConstrainedBox(
                constraints: BoxConstraints(minWidth: constraints.maxWidth),
                child: Table(
                  defaultColumnWidth: const IntrinsicColumnWidth(),
                  border: TableBorder(
                    horizontalInside: BorderSide(
                      color: Colors.grey.shade200,
                      width: 0.5,
                    ),
                  ),
                  children: [
                    _buildHeaderRow(),
                    for (int i = 0; i < widget.rows.length; i++)
                      _buildDataRow(i, widget.rows[i]),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildMobileList() {
    final cards = widget.mobileCards!;
    if (cards.isEmpty) {
      return const Center(
        child: Padding(
          padding: EdgeInsets.all(32),
          child: Text('暂无数据',
              style: TextStyle(color: AppTheme.textSecondary, fontSize: 14)),
        ),
      );
    }
    return ListView.separated(
      padding: const EdgeInsets.all(12),
      itemCount: cards.length,
      separatorBuilder: (_, __) => const SizedBox(height: 10),
      itemBuilder: (_, i) => cards[i],
    );
  }

  TableRow _buildHeaderRow() {
    return TableRow(
      decoration: const BoxDecoration(color: Color(0xFFF0F4FF)),
      children: widget.columns.map((col) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          child: DefaultTextStyle(
            style: const TextStyle(
              fontSize: 13,
              fontWeight: FontWeight.w600,
              color: AppTheme.primaryDark,
            ),
            child: col.numeric
                ? Align(alignment: Alignment.centerRight, child: col.label)
                : col.label,
          ),
        );
      }).toList(),
    );
  }

  TableRow _buildDataRow(int rowIndex, DataRow row) {
    return TableRow(
      children: List.generate(row.cells.length, (colIndex) {
        final cell = row.cells[colIndex];
        final col = widget.columns[colIndex];
        return MouseRegion(
          onEnter: (_) => _hoveredRow.value = rowIndex,
          onExit: (_) {
            if (_hoveredRow.value == rowIndex) _hoveredRow.value = -1;
          },
          child: ValueListenableBuilder<int>(
            valueListenable: _hoveredRow,
            builder: (context, hovered, _) => Container(
              constraints: const BoxConstraints(minHeight: 48),
              alignment:
                  col.numeric ? Alignment.centerRight : Alignment.centerLeft,
              color: hovered == rowIndex ? const Color(0xFFF5F7FF) : null,
              padding:
                  const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
              child: DefaultTextStyle(
                style: const TextStyle(
                    fontSize: 13, color: AppTheme.textPrimary),
                child: cell.child,
              ),
            ),
          ),
        );
      }),
    );
  }
}

class _PaginationBar extends StatelessWidget {
  final int page;
  final int total;
  final int pageSize;
  final ValueChanged<int>? onPageChanged;
  final ValueChanged<int>? onPageSizeChanged;

  static const _pageSizeOptions = [10, 20, 50, 100];

  const _PaginationBar({
    required this.page,
    required this.total,
    required this.pageSize,
    this.onPageChanged,
    this.onPageSizeChanged,
  });

  @override
  Widget build(BuildContext context) {
    final totalPages = (total / pageSize).ceil().clamp(1, 9999);
    // 确保当前 pageSize 在选项中（如默认值 50 不在列表时仍能显示）
    final effectiveSize = _pageSizeOptions.contains(pageSize) ? pageSize : _pageSizeOptions.first;
    return Row(
      children: [
        // 每页条数选择器
        if (onPageSizeChanged != null) ...[
          const Text('每页', style: TextStyle(fontSize: 13, color: AppTheme.textSecondary)),
          const SizedBox(width: 4),
          DropdownButtonHideUnderline(
            child: DropdownButton<int>(
              value: effectiveSize,
              isDense: true,
              style: const TextStyle(fontSize: 13, color: AppTheme.textPrimary),
              items: _pageSizeOptions
                  .map((n) => DropdownMenuItem(value: n, child: Text('$n 条')))
                  .toList(),
              onChanged: (v) {
                if (v != null) onPageSizeChanged!(v);
              },
            ),
          ),
          const SizedBox(width: 16),
        ],
        // 翻页控件
        IconButton(
          icon: const Icon(Icons.first_page, size: 18),
          onPressed: page > 1 ? () => onPageChanged?.call(1) : null,
          padding: EdgeInsets.zero,
          constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
        ),
        IconButton(
          icon: const Icon(Icons.chevron_left, size: 18),
          onPressed: page > 1 ? () => onPageChanged?.call(page - 1) : null,
          padding: EdgeInsets.zero,
          constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
        ),
        Text('$page / $totalPages', style: const TextStyle(fontSize: 13)),
        IconButton(
          icon: const Icon(Icons.chevron_right, size: 18),
          onPressed: page < totalPages ? () => onPageChanged?.call(page + 1) : null,
          padding: EdgeInsets.zero,
          constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
        ),
        IconButton(
          icon: const Icon(Icons.last_page, size: 18),
          onPressed: page < totalPages ? () => onPageChanged?.call(totalPages) : null,
          padding: EdgeInsets.zero,
          constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
        ),
      ],
    );
  }
}