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_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/utils/dark_theme_util.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: Column(children: [
        SingleChildScrollView(
          scrollDirection: Axis.vertical,
          physics: const BouncingScrollPhysics(),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              //顶部的信息展示
              state.detail?.order?.paymentStatus == 1 ? _buildHeaderWidget(context, ref) : const SizedBox.shrink(),

              //预定
              _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,
              ),
            ],
          ),
        ).expanded(),

        // 底部按钮
        Visibility(
          visible: state.detail?.order?.paymentStatus != 1,
          child: MyButton(
            onPressed: () {
              viewModel.doPaymentOrder(state.detail?.order?.id ?? "");
            },
            text: S.current.proceed_with_payment,
            textColor: Colors.white,
            backgroundColor: context.appColors.btnBgDefault,
            fontWeight: FontWeight.w500,
            type: ClickType.throttle,
            fontSize: 16,
            minHeight: 50,
            radius: 0,
          ).marginOnly(top: 15),
        ),
      ]),
    );
  }

  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: [
          //成功图片
          MyAssetImage(
            Assets.facilityPaymentSuccessIcon,
            width: 54,
            height: 54,
            color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
          ).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: context.appColors.itemBGShadow, // 阴影颜色
            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,
                  color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
                ).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(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}