YYHome/packages/cpt_main/lib/modules/home/home_page.dart

import 'package:cpt_main/modules/home/home_state.dart';
import 'package:cs_resources/generated/assets.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/src/widgets/framework.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:auto_route/auto_route.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';

import 'item_home_category.dart';
import 'home_view_model.dart';
import 'item_home_last_news.dart';
import 'item_home_last_trans.dart';
import 'item_home_manage_guide.dart';
import 'item_home_property_news.dart';

@RoutePage()
class HomePage extends HookConsumerWidget {
  const HomePage({super.key});

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

    return Scaffold(
      appBar: MyAppBar.appBar(context, "Good Afternoon,Mike",
          backgroundColor: context.appColors.whiteBG,
          actions: [
            Center(
                child: Stack(
                  clipBehavior: Clip.none, // 不裁剪超出边界的内容
                  alignment: Alignment.topLeft,
                  children: <Widget>[
                    // 通知图标
                    const MyAssetImage(Assets.mainHomeNotificationIcon, width: 19, height: 20),

                    //未读消息
                    Positioned(
                      left: 0,
                      top: 0,
                      child: Transform.translate(
                        offset: const Offset(-10, -5),
                        child: MyTextView(
                          "99",
                          boxWidth: 20.0,
                          textColor: Colors.white,
                          fontSize: 10,
                          isFontLight: true,
                          backgroundColor: context.appColors.redDefault,
                          cornerRadius: 8,
                          paddingTop: 2,
                          paddingBottom: 2,
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ],
                ).onTap(viewModel.gotoNotificationPage))
                .marginOnly(right: 15),
          ],
          showBottomDivider: true),
      backgroundColor: context.appColors.backgroundDefault,
      body: CustomScrollView(
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(),
        slivers: [
          //支付与奖励
          _buildPaymentAndRewardsWidget(context, ref),

          //间距
          _buildSliverSpace(20),

          //九宫选项组 （固定）
          _buildCategoryWidget(context, ref),

          //轮播图片 （动态）
          _buildBannerImage(),

          //最新的新闻（动态）
          _buildLastNews(context, ref),

          //最新的交易
          SliverToBoxAdapter(
            child: MyTextView(
              marginTop: 14,
              marginLeft: 15,
              marginBottom: 14,
              S.current.latest_transactions,
              textColor: context.appColors.textPrimary,
              fontSize: 16,
              isFontMedium: true,
            ),
          ),

          //最新交易列表 （动态）
          _buildLastTransaction(context, state),

          //房产新闻
          SliverToBoxAdapter(
            child: MyTextView(
              marginTop: 14,
              marginLeft: 15,
              marginBottom: 14,
              onClick: viewModel.gotoPropertyNewsPage,
              S.current.property_news,
              textColor: context.appColors.textPrimary,
              fontSize: 16,
              isFontMedium: true,
            ),
          ),

          //房产新闻列表 （动态）
          _buildPropertyNews(context, state),

          //管理员介绍 (固定)
          _buildManagementGuides(context, ref),

          //间距
          _buildSliverSpace(15),
        ],
      ),
    );
  }

  //顶部的支付与奖励的布局
  Widget _buildPaymentAndRewardsWidget(BuildContext context, WidgetRef ref) {
    final viewModel = ref.read(homeViewModelProvider.notifier);

    return SliverToBoxAdapter(
      child: Container(
        color: context.appColors.whiteBG,
        width: double.infinity,
        height: 45,
        child: Column(
          children: [
            Row(
              children: [
                Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const MyAssetImage(Assets.mainHomePaymentIcon, width: 16.5, height: 18).marginOnly(left: 20),
                    MyTextView(
                      S.current.payment,
                      textColor: context.appColors.textBlack,
                      fontSize: 15,
                      isFontMedium: true,
                    ).paddingOnly(left: 13, right: 13).expanded(),
                    const MyAssetImage(Assets.mainHomeMoreIcon, width: 6, height: 8.5).marginOnly(right: 15),
                  ],
                ).onTap(viewModel.gotoPaymentPage).expanded(),
                Container(color: context.appColors.dividerDefault, width: 0.5, height: double.infinity),
                Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const MyAssetImage(Assets.mainHomeRewardsIcon, width: 16.5, height: 17).marginOnly(left: 20),
                    MyTextView(
                      S.current.rewards,
                      textColor: context.appColors.textBlack,
                      fontSize: 15,
                      isFontMedium: true,
                    ).paddingOnly(left: 13, right: 13).expanded(),
                    const MyAssetImage(Assets.mainHomeMoreIcon, width: 6, height: 8.5).marginOnly(right: 15),
                  ],
                ).onTap(viewModel.gotoRewardsPage).expanded(),
              ],
            ).expanded(),
            //底部分割线
            Container(color: context.appColors.dividerDefault, height: 0.5, width: double.infinity),
          ],
        ),
      ),
    );
  }

  Widget _buildSliverSpace(double size) {
    return SliverToBoxAdapter(
      child: SizedBox(height: size),
    );
  }

  //九宫格选项组
  Widget _buildCategoryWidget(BuildContext context, WidgetRef ref) {
    final viewModel = ref.read(homeViewModelProvider.notifier);
    final state = ref.watch(homeViewModelProvider);

    return SliverGrid(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, // 三列
        mainAxisSpacing: 14.0, // 主轴（上下）的间距
        crossAxisSpacing: 0.0, // 交叉轴（左右）的间距
        childAspectRatio: 9 / 7, // 子组件的宽高比
      ),
      delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
          return HomeCategoryItem(
            category: state.homeCategory[index],
          ).onTap(() {
            viewModel.switchCategory(index);
          }); // 生成每个网格项
        },
        childCount: state.homeCategory.length, // 总共的网格项数
      ),
    );
  }

  //Banner的布局
  Widget _buildBannerImage() {
    return SliverToBoxAdapter(
      child: Center(
        child: MyLoadImage(
          "https://t11.baidu.com/it/u=1326770860,192430039&fm=30&app=106&f=JPEG?w=640&h=427&s=33B5BFAA6A165BCA182937620300D077",
          width: 345,
          height: 152.5,
          cornerRadius: 5,
        ),
      ).marginOnly(top: 21),
    );
  }

  //最新新闻
  Widget _buildLastNews(BuildContext context, WidgetRef ref) {
    final viewModel = ref.read(homeViewModelProvider.notifier);
    final state = ref.watch(homeViewModelProvider);

    return SliverToBoxAdapter(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            MyTextView(
              S.current.latest_news,
              fontSize: 16,
              marginTop: 14,
              marginBottom: 14,
              isFontMedium: true,
              onClick: viewModel.gotoLastNewsPage,
              textColor: context.appColors.textPrimary,
            ),
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              physics: const BouncingScrollPhysics(),
              clipBehavior: Clip.none,
              child: Row(
                children: List.generate(state.lastNews.length, (index) {
                  return LastNewsItem(
                    lastNews: state.lastNews[index],
                  );
                }),
              ),
            )
          ],
        ).paddingOnly(left: 15, right: 15));
  }

  //最新的交易列表
  Widget _buildLastTransaction(BuildContext context, HomeState state) {
    return SliverPadding(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      sliver: DecoratedSliver(
        decoration: BoxDecoration(
          color: context.appColors.whiteBG,
          borderRadius: BorderRadius.circular(5.0),
          boxShadow: [
            BoxShadow(
              color: const Color(0xFF656565).withOpacity(0.1),
              offset: const Offset(0, 1.5),
              blurRadius: 2.5,
              spreadRadius: 1.5,
            ),
          ],
        ),
        sliver: SliverPadding(
          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 20),
          sliver: SliverList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: LastTransItem(
                    lastTrans: state.lastTrans[index],
                  ),
                );
              },
              childCount: state.lastTrans.length,
            ),
          ),
        ),
      ),
    );
  }

  //房产新闻的双列表
  Widget _buildPropertyNews(BuildContext context, HomeState state) {
    return SliverList(
      delegate: SliverChildListDelegate(
        [
          // PropertyNews(),

          // 第一个水平滑动列表
          _buildPropertyNewsHorizontalList(),

          const SizedBox(height: 10),

          // // 第二个水平滑动列表
          _buildPropertyNewsHorizontalList(),
        ],
      ),
    );
  }

  Widget _buildPropertyNewsHorizontalList() {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      physics: const BouncingScrollPhysics(),
      clipBehavior: Clip.none,
      child: Row(
        children: List.generate(5, (index) {
          return PropertyNews();
        }),
      ).marginOnly(left: 15, right: 15),
    );
  }

  //管理员介绍
  Widget _buildManagementGuides(BuildContext context, WidgetRef ref) {
    final viewModel = ref.read(homeViewModelProvider.notifier);
    final state = ref.watch(homeViewModelProvider);

    return SliverToBoxAdapter(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            MyTextView(
              S.current.strata_management_guides,
              fontSize: 16,
              marginTop: 14,
              marginBottom: 14,
              onClick: viewModel.gotoManageGuidePage,
              isFontMedium: true,
              textColor: context.appColors.textPrimary,
            ),
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              physics: const BouncingScrollPhysics(),
              clipBehavior: Clip.none,
              child: Row(
                children: List.generate(state.manage_guide.length, (index) {
                  return ManageGuideItem(
                    manageGuide: state.manage_guide[index],
                  );
                }),
              ),
            )
          ],
        ).paddingOnly(left: 15, right: 15));
  }
}