YYHome/packages/cpt_facility/lib/modules/detail/facility_detail_page.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:auto_route/auto_route.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: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 '../../router/page/facility_page_router.dart';
import 'facility_detail_view_model.dart';

@RoutePage()
class FacilityDetailPage extends HookConsumerWidget {
  final String? bookingId;

  const FacilityDetailPage({Key? key, required this.bookingId}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context, required String? bookingId}) {
    if (context != null) {
      context.router.push(FacilityDetailPageRoute(bookingId: bookingId));
    } else {
      appRouter.push(FacilityDetailPageRoute(bookingId: bookingId));
    }
  }

  //启动当前页面并回退至设施首页
  static void startWithPop2Main({required String? bookingId}) {
    appRouter.pushAndPopUntil(
      FacilityDetailPageRoute(bookingId: bookingId),
      predicate: (route) {
        return route.settings.name == 'FacilityPageRoute';
      },
    );
  }

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

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

    return Scaffold(
      appBar: MyAppBar.appBar(context, state.detail?.facility?.type?.name ?? "", backgroundColor: context.appColors.backgroundWhite),
      backgroundColor: context.appColors.backgroundDark,
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            //顶部的信息展示
            _buildHeaderWidget(context, ref),

            //预定
            _buildDetailItem(
              context,
              ref,
              S.current.book,
              Assets.facilityConfirmDateIcon,
              28.5,
              29,
              state.detail?.booking?.date ?? "",
              null,
              "${state.detail?.booking?.start ?? ""}-${state.detail?.booking?.end ?? ""}",
              null,
            ),

            //设施
            _buildDetailItem(
              context,
              ref,
              S.current.facility,
              Assets.facilityConfirmFacilityIcon,
              25.0,
              30.5,
              state.detail?.facility?.type?.name ?? "",
              null,
              state.detail?.facility?.name ?? "",
              null,
            ),

            //付款
            _buildDetailItem(
              context,
              ref,
              S.current.payment,
              Assets.facilityConfirmPaymentIcon,
              27.0,
              22.0,
              S.current.booking_fee,
              state.detail?.timePeriod?.price ?? "",
              S.current.total,
              "\$${state.detail?.timePeriod?.price ?? ""}",
            ),

            // 押金
            _buildDetailItem(
              context,
              ref,
              S.current.deposit,
              Assets.facilityConfirmDepositIcon,
              28.0,
              26.5,
              S.current.on_hold,
              "\$${state.detail?.timePeriod?.deposit ?? ""}",
              null,
              null,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildHeaderWidget(BuildContext context, WidgetRef ref) {
    final state = ref.watch(facilityDetailViewModelProvider);
    return Container(
      width: double.infinity,
      color: context.appColors.whiteBG,
      margin: const EdgeInsets.only(bottom: 7.5),
      child: Column(
        children: [
          //成功图片
          const MyAssetImage(
            Assets.facilityPaymentSuccessIcon,
            width: 54,
            height: 54,
          ).marginOnly(top: 11, bottom: 13),

          //支付成功
          MyTextView(
            S.current.booking_successful,
            fontSize: 18,
            marginBottom: 3,
            isFontMedium: true,
            textColor: context.appColors.textPrimary,
          ),
          MyTextView(
            S.current.have_fun,
            fontSize: 18,
            marginBottom: 19,
            isFontMedium: true,
            textColor: context.appColors.textPrimary,
          ),

          //支付金额
          MyTextView(
            S.current.fee_paid,
            fontSize: 15,
            isFontRegular: true,
            textColor: context.appColors.textBlack,
          ),
          MyTextView(
            "\$${state.detail?.timePeriod?.price ?? ""}",
            fontSize: 15,
            isFontRegular: true,
            textColor: context.appColors.textPrimary,
          ),

          //付款类型与时间
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              MyTextView(
                "Master card ending",
                fontSize: 15,
                isFontRegular: true,
                textColor: context.appColors.textBlack,
              ),
              MyTextView(
                "9423",
                fontSize: 15,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),
            ],
          ).marginOnly(top: 12),

          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              MyTextView(
                S.current.paid_on,
                fontSize: 15,
                isFontRegular: true,
                textColor: context.appColors.textBlack,
              ),
              MyTextView(
                " ${state.detail?.booking?.date ?? ""}",
                fontSize: 15,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),
            ],
          ).marginOnly(top: 5),

          //退还押金的布局展示
          Visibility(
            visible: state.detail?.booking?.depositRefund != "0.00",
            child: Column(
              children: [
                Divider(height: 0.5, color: context.appColors.dividerDefault).marginOnly(top: 14, bottom: 14),

                //退还的押金
                MyTextView(
                  S.current.deposit_released_caps,
                  fontSize: 15,
                  isFontRegular: true,
                  textColor: context.appColors.textBlack,
                ),

                MyTextView(
                  "\$${state.detail?.booking?.depositRefund ?? ""}",
                  fontSize: 15,
                  marginTop: 5,
                  isFontRegular: true,
                  textColor: context.appColors.textPrimary,
                ),

                Divider(height: 0.5, color: context.appColors.dividerDefault).marginOnly(top: 14, bottom: 14),

                //押金付款于时间
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    MyTextView(
                      S.current.hold_started_on,
                      fontSize: 15,
                      isFontRegular: true,
                      textColor: context.appColors.textBlack,
                    ),
                    MyTextView(
                      " ${state.detail?.booking?.date ?? ""}",
                      fontSize: 15,
                      isFontMedium: true,
                      textColor: context.appColors.textBlack,
                    ),
                  ],
                ).marginOnly(top: 5),

                //押金退款于时间
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    MyTextView(
                      S.current.released_on,
                      fontSize: 15,
                      isFontRegular: true,
                      textColor: context.appColors.textBlack,
                    ),
                    MyTextView(
                      " ${state.detail?.booking?.depositRefundAt ?? ""}",
                      fontSize: 15,
                      isFontMedium: true,
                      textColor: context.appColors.textBlack,
                    ),
                  ],
                ).marginOnly(top: 5),
              ],
            ),
          ),

          const SizedBox(height: 23),
        ],
      ),
    );
  }

  //Item的列表
  Widget _buildDetailItem(
    BuildContext context,
    WidgetRef ref,
    String title,
    String iconPath,
    double iconWidth,
    double iconHeight,
    String line1Txt,
    String? line1Content,
    String? line2Txt,
    String? line2Content,
  ) {
    return Container(
      width: double.infinity,
      height: 92.5,
      padding: const EdgeInsets.only(left: 20, right: 20),
      margin: const EdgeInsets.only(left: 15, right: 15, top: 7.5, bottom: 7.5),
      decoration: BoxDecoration(
        color: context.appColors.whiteBG,
        borderRadius: BorderRadius.circular(6.0), // 圆角
        boxShadow: [
          BoxShadow(
            color: const Color(0xFFB8BFD9).withOpacity(0.3), // 阴影颜色
            offset: const Offset(0, 3), // 阴影的偏移量
            blurRadius: 8.0, // 模糊半径
            spreadRadius: 3.0, // 扩散半径
          ),
        ],
      ),
      child: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            MyTextView(
              title,
              textColor: context.appColors.textBlack,
              fontSize: 16,
              marginBottom: 7,
              isFontMedium: true,
            ),
            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                MyAssetImage(
                  iconPath,
                  width: iconWidth,
                  height: iconHeight,
                ).marginOnly(right: 15),
                Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Row(
                      children: [
                        MyTextView(
                          line1Txt,
                          textColor: context.appColors.textBlack,
                          fontSize: 14,
                          isFontRegular: true,
                        ).expanded(),
                        MyTextView(
                          line1Content ?? "",
                          textColor: context.appColors.textBlack,
                          fontSize: 14,
                          isFontRegular: true,
                        ),
                      ],
                    ),
                    Visibility(
                      visible: line2Txt != null,
                      child: Row(
                        children: [
                          MyTextView(
                            line2Txt ?? "",
                            textColor: context.appColors.textBlack,
                            fontSize: 14,
                            isFontRegular: true,
                          ).expanded(),
                          MyTextView(
                            line2Content ?? "",
                            textColor: context.appColors.textBlack,
                            fontSize: 14,
                            isFontRegular: true,
                          ),
                        ],
                      ).marginOnly(top: 6),
                    ),
                  ],
                ).expanded(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}