tboss_oa_module/lib/features/expense/expense_list_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:go_router/go_router.dart';
import '../../core/theme/app_colors.dart';
import '../../core/utils/date_utils.dart' as du;
import '../../core/utils/responsive.dart';
import '../../shared/widgets/app_card.dart';
import '../../shared/widgets/status_tag.dart';
import '../../shared/widgets/empty_state.dart';
import '../../shared/widgets/loading_widget.dart';
import 'expense_list_controller.dart';
import 'expense_model.dart';

class ExpenseListPage extends ConsumerStatefulWidget {
  const ExpenseListPage({super.key});
  @override
  ConsumerState<ExpenseListPage> createState() => _ExpenseListPageState();
}

class _ExpenseListPageState extends ConsumerState<ExpenseListPage> {
  final _scrollCtrl = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollCtrl.addListener(_onScroll);
  }

  void _onScroll() {
    if (_scrollCtrl.position.pixels >= _scrollCtrl.position.maxScrollExtent - 100) {
      ref.read(expensePageProvider.notifier).state++;
    }
  }

  @override
  void dispose() {
    _scrollCtrl.removeListener(_onScroll);
    _scrollCtrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final status = ref.watch(expenseStatusFilterProvider);
    final itemsAsync = ref.watch(expenseListProvider);
    final r = ResponsiveHelper.of(context);

    return Scaffold(
      appBar: TDNavBar(
        title: '报销单',
        titleColor: Colors.white,
        backgroundColor: const Color(0xFF00ABF3),
        centerTitle: false,
        rightBarItems: [TDNavBarItem(icon: Icons.add, iconColor: Colors.white, action: () => context.push('/expense/apply'))],
      ),
      body: Column(children: [
        _buildStatusFilter(status),
        Expanded(
          child: Center(
            child: ConstrainedBox(
              constraints: BoxConstraints(maxWidth: r.listMaxWidth),
              child: itemsAsync.when(
                loading: () => const LoadingWidget(),
                error: (_, __) => const EmptyState(message: '加载失败'),
                data: (items) => items.isEmpty
                    ? const EmptyState(message: '暂无报销单')
                    : RefreshIndicator(
                        onRefresh: () async { ref.invalidate(expenseListProvider); },
                        child: ListView.builder(
                          controller: _scrollCtrl,
                          padding: const EdgeInsets.symmetric(vertical: 4),
                          itemCount: items.length,
                          itemBuilder: (_, i) => _buildItem(items[i]),
                        ),
                      ),
              ),
            ),
          ),
        ),
      ]),
    );
  }

  Widget _buildStatusFilter(String current) {
    final statuses = [
      {'key': '', 'label': '全部'},
      {'key': 'pending', 'label': '待审批'},
      {'key': 'approved', 'label': '已通过'},
      {'key': 'rejected', 'label': '已拒绝'},
    ];
    return Padding(
      padding: const EdgeInsets.only(top: 12, bottom: 4, left: 12),
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: statuses.map((s) {
            final selected = current == s['key'];
            return Padding(
              padding: const EdgeInsets.only(right: 8),
              child: GestureDetector(
                onTap: () {
                  ref.read(expenseStatusFilterProvider.notifier).state = s['key']!;
                },
                child: TDTag(
                  s['label']!,
                  size: TDTagSize.medium,
                  theme: selected ? TDTagTheme.primary : null,
                  isLight: selected,
                  shape: TDTagShape.round,
                  backgroundColor: selected ? null : Colors.white,
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }

  Widget _buildItem(ExpenseModel item) {
    return AppCard(
      margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
      onTap: () => context.push('/expense/detail/${item.id}'),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          Text(item.reportNo, style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 14, color: AppColors.textPrimary)),
          StatusTag(status: item.status),
        ]),
        const SizedBox(height: 4),
        Text('${item.expenseType} · ¥${item.totalAmount.toStringAsFixed(2)}',
            style: const TextStyle(color: AppColors.textSecondary, fontSize: 12)),
        const SizedBox(height: 4),
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          Text(item.applicantName, style: const TextStyle(color: AppColors.textHint, fontSize: 11)),
          Text(du.DateUtils.formatDateTime(item.createTime), style: const TextStyle(color: AppColors.textHint, fontSize: 11)),
        ]),
      ]),
    );
  }
}