import 'package:auto_route/auto_route.dart';
import 'package:cpt_main/router/page/main_page_router.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/widget_export.dart';

import 'item_management_guide.dart';
import 'management_guides_view_model.dart';

@RoutePage()
class ManagementGuidesPage extends HookConsumerWidget {
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(const ManagementGuidesPageRoute());
    } else {
      appRouter.push(const ManagementGuidesPageRoute());
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.read(managementGuidesViewModelProvider.notifier);
    final state = ref.watch(managementGuidesViewModelProvider);

    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => viewModel.fetchList());
      return () {
        // 组件卸载时执行
      };
    }, []);

    return Scaffold(
      appBar: MyAppBar.appBar(context, S.current.strata_management_guides, backgroundColor: context.appColors.backgroundWhite),
      backgroundColor: context.appColors.backgroundDefault,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: EasyRefresh(
          controller: viewModel.refreshController,
          onRefresh: viewModel.onRefresh,
          onLoad: viewModel.loadMore,
          child: LoadStateLayout(
            state: state.loadingState,
            errorMessage: state.errorMessage,
            errorRetry: () {
              viewModel.retryRequest();
            },
            successSliverWidget: [
              SliverPadding(
                padding: const EdgeInsets.symmetric(horizontal: 15.0,vertical: 7), // 设置四周的间距
                sliver: SliverGrid(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2, // 两列
                    mainAxisSpacing: 10.0, // 主轴（上下）的间距
                    crossAxisSpacing: 15.0, // 交叉轴（左右）的间距
                    childAspectRatio: 165 / 181, // 子组件的宽高比
                  ),
                  delegate: SliverChildBuilderDelegate(
                        (BuildContext context, int index) {
                      return ManagementGuideItem(
                       item: state.datas[index],
                      ).onTap((){
                        viewModel.gotoLatestNewsDetail(context, state.datas[index]);
                      }); // 生成每个网格项
                    },
                    childCount: state.datas.length, // 总共的网格项数
                  ),
                ),
              )
            ],
          ),
        ).marginOnly(top: 10, bottom: 5),
      ),
    );
  }
}
