YYHome/packages/cpt_facility/lib/modules/booking/facility_booking_page.dart

import 'dart:math';

import 'package:cpt_facility/modules/location/facility_location_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:shared/utils/date_time_utils.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/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/shatter/select_calendar/calendar_bottom_sheet.dart';
import 'package:widgets/widget_export.dart';

import '../../router/page/facility_page_router.dart';
import 'facility_booking_view_model.dart';

@RoutePage()
class FacilityBookingPage extends HookConsumerWidget {
  const FacilityBookingPage({Key? key}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(const FacilityBookingPageRoute());
    } else {
      appRouter.push(const FacilityBookingPageRoute());
    }
  }

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

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

    return Scaffold(
      appBar: MyAppBar.appBar(context, "Kids party room", backgroundColor: context.appColors.backgroundWhite, actions: [
        //去设施小区的定位图片
        const MyAssetImage(
          Assets.facilityTitleLocationIcon,
          width: 44,
          height: 44,
        ).marginOnly(right: 3).onTap(() {
          FacilityLocationPage.startInstance(context: context, imageUrls: [
            "https://mz.eastday.com/63074197.jpeg",
            "https://t10.baidu.com/it/u=3562774827,189123978&fm=30&app=106&f=PNG?w=640&h=479&s=DFBA6EC80A72B7CC02FC011F0300D0C2",
            "https://img1.baidu.com/it/u=4090167392,148087489&fm=253&fmt=auto&app=138&f=JPEG?w=484&h=300"
          ]);
        }),
      ]),
      backgroundColor: context.appColors.backgroundDark,
      body: Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          //顶部的选中的日期与日历选择
          Row(
            mainAxisSize: MainAxisSize.max,
            children: [
              MyTextView(
                "${DateTimeUtils.getWeekday(state.selectedDate, languageCode: 'en')}, ${DateTimeUtils.formatDate(state.selectedDate, format: 'dd MMM yyyy')}",
                textColor: context.appColors.textBlack,
                fontSize: 17,
                marginTop: 18,
                marginBottom: 16,
                marginLeft: 15,
                isFontMedium: true,
              ).expanded(),
              const MyAssetImage(Assets.facilityConfirmDateIcon, width: 22.5, height: 22.5).marginOnly(right: 10).onTap(() {
                //日历日期选择器
                _datePickerBottomSheet(context, ref);
              }, padding: 5),
            ],
          ),

          //二周的日期选择
          WeeklyCalendar(
            selectedDate: state.selectedDate,
            onChangedSelectedDate: (dateTime) {
              Log.d("onChangedSelectedDate选中 - ${dateTime}}");
              viewModel.changeSelectedDate(dateTime);
            },
          ),

          //每天的单独数据
          LoadStateLayout(
            state: state.loadingState,
            errorMessage: state.errorMessage,
            errorRetry: () {
              viewModel.retryRequest();
            },
            successSliverWidget: [
              SliverToBoxAdapter(
                child: MyTextView(
                  S.current.quota_left_msg(1, DateTimeUtils.formatDate(state.selectedDate, format: 'dd MMM yyyy')),
                  marginTop: 7,
                  marginBottom: 15,
                  textColor: context.appColors.textBlack,
                  fontSize: 12,
                  isFontMedium: true,
                ),
              ),
              SliverList(
                  delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return _buildFacilityOption(context, state.datas[index]);
                },
                childCount: state.datas.length,
              ))
            ],
          ).marginOnly(top: 5).expanded(),

          //底部按钮
          MyButton(
            onPressed: viewModel.gotoConfirmPage,
            text: S.current.next,
            textColor: Colors.white,
            backgroundColor: context.appColors.btnBgDefault,
            fontWeight: FontWeight.w500,
            type: ClickType.throttle,
            fontSize: 16,
            minHeight: 50,
            radius: 0,
          )
        ],
      ),
    );
  }

  //日期日历的选择器，底部弹窗选择
  void _datePickerBottomSheet(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(facilityBookingViewModelProvider.notifier);
    final state = ref.watch(facilityBookingViewModelProvider);

    showModalBottomSheet<void>(
      context: context,
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0)),
      ),
      builder: (BuildContext context) {
        return CustomCalendarBottomSheet(
          firstDate: DateTime.now(),
          lastDate: DateTime.now().add(const Duration(days: 365)),
          selectedDate: state.selectedDate,
          locale: "en",
          onDateChange: (dateTime) {
            Navigator.pop(context);
            viewModel.changeSelectedDate(dateTime);
          },
        );
      },
    );
  }

  //生产当前设施的选项
  Widget _buildFacilityOption(BuildContext context, String item) {
    return Column(
      children: [
        Container(
          width: double.infinity,
          height: 38,
          color: context.appColors.btnBgDefault,
          child: Center(
            child: MyTextView(
              item,
              fontSize: 16,
              textColor: Colors.white,
              textAlign: TextAlign.center,
              isFontMedium: true,
            ),
          ),
        ),
        GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            childAspectRatio: 82 / 43,
            mainAxisSpacing: 6.5,
            crossAxisSpacing: 6.5,
          ),
          itemCount: 4,
          itemBuilder: (context, index) {
            return Container(
              decoration: BoxDecoration(
                color: context.appColors.whiteBG,
                borderRadius: BorderRadius.circular(5.0),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
                children: [
                  MyTextView(
                    "10.00 AM",
                    fontSize: 12,
                    textColor: context.appColors.textBlack,
                    isFontMedium: true,
                  ),
                  MyTextView(
                    "04.00 PM",
                    fontSize: 12,
                    textColor: context.appColors.textBlack,
                    isFontMedium: true,
                  ),
                ],
              ),
            );
          },
        ).marginSymmetric(horizontal: 10, vertical: 17),
      ],
    );
  }
}