import 'package:cpt_services/components/chooseAirConditionContent.dart';
import 'package:cpt_services/components/chooseAirConditionContent_vm.dart';
import 'package:cpt_services/components/chooseHouseCleanContent_vm.dart';
import 'package:cpt_services/modules/services/service_clean_detail/service_clean_detail_vm.dart';
import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:domain/entity/garage_sale_rent_entity.dart';
import 'package:domain/entity/paid_service_detail_entity.dart';
import 'package:domain/entity/user_me_entity.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:plugin_basic/provider/app_config/app_config_service.dart';
import 'package:plugin_basic/provider/user_config/user_config_service.dart';
import 'package:router/componentRouter/component_service_manager.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:shared/utils/ext_dart.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:shared/utils/screen_util.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/my_appbar.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:widgets/utils/dark_theme_util.dart';
import 'package:widgets/widget_export.dart';

import '../../../components/chooseAirConditionContent_state.dart';
import '../../../components/chooseHouseCleanContent.dart';
import '../../../components/chooseHouseCleanContent_state.dart';
import '../../../components/chooseVisitTimeContent_vm.dart';
import '../../../constants_services.dart';
import '../../../router/page/services_page_router.dart';
import 'service_order_confirm_state.dart';
import 'service_order_confirm_vm.dart';
import '../../../components/status_card_item.dart';

@RoutePage()
class ServiceOrderConfirmPage extends HookConsumerWidget {
  final int id;
  final int? cleanServiceTypeId;
  const ServiceOrderConfirmPage({
    Key? key,
    required this.id,
    this.cleanServiceTypeId,
  }) : super(key: key);

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


  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(serviceOrderConfirmVmProvider.notifier);
    final state = ref.watch(serviceOrderConfirmVmProvider);
    // final appConfigState = ref.watch(appConfigServiceProvider)

    useEffect(() {
      vm.setInitPageData(id: id, cleanServiceTypeId: cleanServiceTypeId);
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => vm.initPageData(context));
      return () {
        // 组件卸载时执行
      };
    }, []);

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
       S.current.confirm_order,
        backgroundColor: context.appColors.whiteBG,
      ),
      backgroundColor: DarkThemeUtil.multiColors(context, ColorUtils.string2Color("#F2F3F6"), darkColor: Colors.black),
      body: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: EasyRefresh(
            key: ValueKey('ServiceOrderConfirm'),
            controller: vm.refreshController,
            // 上拉加载
            onLoad: null,
            // 下拉刷新
            onRefresh: null,
            child: LoadStateLayout(
              state: state.loadingState,
              errorMessage: state.errorMessage,
              errorRetry: () {
                vm.retryRequest();
              },
              successWidget: Column(
                  children: [
                    Expanded(child: _buildBody(state, vm, context,ref)),
                    // 底部联系信息
                    Visibility(
                      visible: state.loadingState == LoadState.State_Success,
                      child: state.datas !=null ? _buildBottomSection(state, vm,ref, context, id, cleanServiceTypeId): Container(),
                    )

                  ],
              ),
            ),
          ).marginOnly(left: 0,right: 0,top: 0,bottom: 0)
      ),
    );
  }

  Widget _buildBody(ServiceOrderConfirmState state, ServiceOrderConfirmVm vm, BuildContext context, WidgetRef ref) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 评分
          Container(
            color: context.appColors.whiteBG,
            width: double.infinity,
            margin: const EdgeInsets.only(left: 0, right: 0, top: 5, bottom: 0),
            padding: const EdgeInsets.only(left: 10, right: 10, top: 18.5, bottom: 18.5),
            child: _buildOrderScore(state, vm, context),
          ),
          // profile信息
          Container(
            color: context.appColors.whiteBG,
            width: double.infinity,
            margin: const EdgeInsets.only(left: 0, right: 0, top: 5, bottom: 0),
            padding: const EdgeInsets.only(left: 10, right: 10, top: 18.5, bottom: 18.5),
            child: _buildOrderProfile(state, vm, context, ref),
          ),
          // 订单 服务项目
          Container(
            color: context.appColors.whiteBG,
            width: double.infinity,
            margin: const EdgeInsets.only(left: 0, right: 0, top: 5, bottom: 0),
            padding: const EdgeInsets.only(left: 10, right: 10, top: 18.5, bottom: 18.5),
            child: _buildOrderService(state, vm, context, ref),
          ),
          // 订单 上门时间
          Container(
            color: context.appColors.whiteBG,
            width: double.infinity,
            margin: const EdgeInsets.only(left: 0, right: 0, top: 5, bottom: 0),
            padding: const EdgeInsets.only(left: 10, right: 10, top: 18.5, bottom: 18.5),
            child: _buildOrderVisitTime(state, vm, context, ref).onTap((){
              vm.handlerClickVisitTime(context);
            }),
          ),
          // 订单 card 信息
          // Container(
          //   color: context.appColors.whiteBG,
          //   width: double.infinity,
          //   margin: const EdgeInsets.only(left: 0, right: 0, top: 5, bottom: 0),
          //   padding: const EdgeInsets.only(left: 10, right: 10, top: 18.5, bottom: 18.5),
          //   child: _buildOrderPayCardInfo(state, vm, context),
          // ),

          // 订单备注
          Container(
            color: context.appColors.whiteBG,
            width: double.infinity,
            margin: const EdgeInsets.only(left: 0, right: 0, top: 5, bottom: 0),
            padding: const EdgeInsets.only(left: 10, right: 10, top: 18.5, bottom: 18.5),
            child: _buildOrderRemark(state, vm, context, ref),
          ),
          // 订单 rules
          Container(
            color: context.appColors.whiteBG,
            width: double.infinity,
            margin: const EdgeInsets.only(left: 0, right: 0, top: 5, bottom: 0),
            padding: const EdgeInsets.only(left: 10, right: 10, top: 18.5, bottom: 18.5),
            child: _buildOrderRules(state, vm, context),
          ),
        ],
      ),
    );
  }

  Widget _buildOrderScore(ServiceOrderConfirmState state, ServiceOrderConfirmVm vm, BuildContext context) {
    PaidServiceDetailEntity? detailInfo = state.datas??null;
    final String title = detailInfo?.name??'';
    double evaluationsAvgScore = (detailInfo?.evaluationsAvgScore?? 5.0).toDouble();
    final String merchantName = detailInfo?.merchant?.name??'';
    //  评分
    return Column(
      children: [
        Container(
          width: double.infinity,
          color: context.appColors.whiteBG,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              MyTextView(
                "$title",
                textColor: context.appColors.textBlack,
                fontSize: 18,
                isFontBold: true,
                marginBottom: 5,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  AnimatedRatingStars(
                    initialRating: evaluationsAvgScore,
                    onChanged: (rating) {
                    },
                    readOnly: true,
                    displayRatingValue: true, // Display the rating value
                    interactiveTooltips: true, // Allow toggling half-star state
                    customFilledIcon: Icons.star,
                    customHalfFilledIcon: Icons.star_half,
                    customEmptyIcon: Icons.star_border,
                    filledColor: ColorUtils.string2Color("#FF0000"),
                    starSize: 16.5,
                    animationDuration: const Duration(milliseconds: 0),
                    animationCurve: Curves.easeInOut,
                  ),
                  MyTextView(
                    "${evaluationsAvgScore}",
                    textColor: context.appColors.textBlack,
                    fontSize: 16,
                    isFontMedium: true,
                    marginLeft: 15,
                  ),
                ],
              ),
              MyTextView(
                "$merchantName",
                textColor: context.appColors.textDarkGray999,
                fontSize: 12,
                isFontRegular: true,
                marginTop: 10,
                marginBottom: 5,
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildOrderProfile(ServiceOrderConfirmState state, ServiceOrderConfirmVm vm, BuildContext context, WidgetRef ref) {
    final userInfoState = UserConfigService.getState(ref: ref);
    UserMeEntity? user = userInfoState.user;
    String userUnit = user?.defaultUnit?.unit??'';
    String userName = '${user?.information?.firstName??''}${user?.information?.lastName??''}';
    String userPhone = '${user?.information?.phone}'??'';
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const MyAssetImage(
              Assets.serviceLocationIcon,
              width: 15,
              height: 17.5,
            ),
            const SizedBox(
              width: 10,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                MyTextView(
                  '$userUnit',
                  fontSize: 17,
                  isFontBold: true,
                  textColor: context.appColors.textBlack,
                  marginBottom: 5,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    MyTextView(
                      '$userName',
                      fontSize: 14,
                      textColor: context.appColors.textDarkGray999,
                      isFontRegular: true,
                    ),
                    MyTextView(
                      '$userPhone',
                      fontSize: 14,
                      textColor: context.appColors.textDarkGray999,
                      isFontRegular: true,
                      marginLeft: 10,
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildOrderService(ServiceOrderConfirmState state, ServiceOrderConfirmVm vm, BuildContext context, WidgetRef ref) {
    final result = vm.getCurrentService();
    List<HouseCleanContentItem> houseCleanCheckedServiceList = result["houseCleanCheckedServiceList"] as List<HouseCleanContentItem>;
    List<AirConditionContentItem> airCleancheckedServiceList = result["airCleancheckedServiceList"] as List<AirConditionContentItem>;

    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const MyAssetImage(
              Assets.serviceServiceAvatorIcon,
              width: 15,
              height: 17.5,
            ),
            const SizedBox(
              width: 10,
            ),
            MyTextView(
              S.current.service,
              fontSize: 17,
              isFontBold: true,
              textColor: context.appColors.textBlack,
              marginBottom: 5,
            ),
          ],
        ),
        if (cleanServiceTypeId == servicesConstants.paidServicesType['houseCleaning']!['id'])
        // 室内清理
          _buildHouseCleanContent(state, vm, context, ref, houseCleanCheckedServiceList)
        else if (cleanServiceTypeId == servicesConstants.paidServicesType['airConditioner']!['id'])
        // 空调清理
          _buildAirCleanCleanContent(state, vm, context, ref, airCleancheckedServiceList)
        else
          const SizedBox.shrink(),
      ],
    );
  }

  Widget _buildHouseCleanContent(ServiceOrderConfirmState state, ServiceOrderConfirmVm vm, BuildContext context, WidgetRef ref, List<HouseCleanContentItem> checkedServiceList) {
    if(checkedServiceList.isNotEmpty){
      return Column(
        children: List.generate(checkedServiceList.length, (index){
          HouseCleanContentItem currentItem = checkedServiceList[index] as HouseCleanContentItem;
          final title = currentItem.name??'';
          final areaSizeRange = currentItem.areaSizeRange??'';
          final num = currentItem.num?? 1;
          final price = currentItem.price?? 0;
          return  Container(
            padding: const EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
            margin: const EdgeInsets.only(left: 15, right: 15, top: 0, bottom: 0),
            color: DarkThemeUtil.multiColors(context, ColorUtils.string2Color('#F8F8F8'), darkColor: context.appColors.textWhite),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          MyTextView(
                            title,
                            fontSize: 16,
                            isFontMedium: true,
                            textColor: context.appColors.textBlack,
                          ),
                          MyTextView(
                            areaSizeRange,
                            fontSize: 15,
                            isFontRegular: true,
                            textColor: context.appColors.textDarkGray999,
                            marginTop: 5,
                          ),
                        ],
                      ),
                    ),
                    // MyCartNum(onChange: (value){
                    //   vm.handlerChangeNum(context, value, index);
                    // })
                    // MyButton(
                    //   text: '\$$price',
                    //   onPressed: (){
                    //       // vm.handlerChangeNum(context, value, index);
                    //   },
                    //   fontSize: 19,
                    //   fontWeight: FontWeight.w500,
                    // )
                    Container(
                      child: MyButton(
                        text: '\$$price',
                        onPressed: null,
                        minWidth: 80,
                        minHeight: 40,
                        fontSize: 19,
                        fontWeight: FontWeight.w500,
                        // enable: !isDisable.value,
                        textColor:  context.appColors.textPrimary,
                        backgroundColor: context.appColors.textWhite,
                        disabledBackgroundColor: context.appColors.disEnableGray,
                        disabledTextColor: context.appColors.textWhite,
                      ),
                    ),
                  ],
                ),
                // Divider(),
              ],
            ),
          );
        }),
      );
    }else {
      return const SizedBox.shrink();
    }
  }

  Widget _buildAirCleanCleanContent(ServiceOrderConfirmState state, ServiceOrderConfirmVm vm, BuildContext context, WidgetRef ref, List<AirConditionContentItem> checkedServiceList) {
    if(checkedServiceList.isNotEmpty){
      return Column(
        children: List.generate(checkedServiceList.length, (index){
          AirConditionContentItem currentItem = checkedServiceList[index] as AirConditionContentItem;
          final title = currentItem.name??'';
          final num = currentItem.num?? 1;
          final price = currentItem.price?? 0;
          return  Container(
            padding: const EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
            margin: const EdgeInsets.only(left: 15, right: 15, top: 0, bottom: 0),
            color: DarkThemeUtil.multiColors(context, ColorUtils.string2Color('#F8F8F8'), darkColor: context.appColors.textWhite),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          MyTextView(
                            title,
                            fontSize: 16,
                            isFontMedium: true,
                            textColor: context.appColors.textBlack,
                          ),
                          MyTextView(
                            'X $num',
                            fontSize: 15,
                            isFontRegular: true,
                            textColor: context.appColors.textDarkGray999,
                            marginTop: 5,
                          ),
                        ],
                      ),
                    ),
                    MyButton(
                      text: '\$$price',
                      onPressed: null,
                      minWidth: 80,
                      minHeight: 40,
                      fontSize: 19,
                      fontWeight: FontWeight.w500,
                      // enable: !isDisable.value,
                      textColor:  context.appColors.textPrimary,
                      backgroundColor: context.appColors.textWhite,
                      disabledBackgroundColor: context.appColors.disEnableGray,
                      disabledTextColor: context.appColors.textWhite,
                    ),
                  ],
                ),
                // Divider(),
              ],
            ),
          );
        }),
      );
    }else {
      return const SizedBox.shrink();
    }
  }


  Widget _buildOrderVisitTime(ServiceOrderConfirmState state, ServiceOrderConfirmVm vm, BuildContext context, WidgetRef ref) {
    String visitTime = state.visitTime??'';
    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            const MyAssetImage(
              Assets.serviceTimeIcon,
              width: 16,
              height: 16,
            ),
            const SizedBox(
              width: 10,
            ),
            MyTextView(
             S.current.visit_time,
              fontSize: 17,
              isFontBold: true,
              textColor: context.appColors.textBlack,
            ),
          ],
        ),
        Expanded(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              MyTextView(
                visitTime,
                fontSize: 15,
                textColor: context.appColors.textDarkGray999,
                isFontRegular: true,
                textAlign: TextAlign.end,
                marginRight: 17,
              ),
              // 右箭头 icon
              const MyAssetImage(
                Assets.serviceRightIcon,
                width: 17.5,
                height: 17.5,
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildOrderPayCardInfo(ServiceOrderConfirmState state, ServiceOrderConfirmVm vm, BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MyTextView(
           S.current.card_caps,
            fontSize: 17,
            isFontMedium: true,
            textColor: context.appColors.textPrimary,
            marginBottom: 15,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Wrap(
                alignment: WrapAlignment.start,
                crossAxisAlignment: WrapCrossAlignment.center,
                children: [
                  const MyAssetImage(
                    Assets.serviceCardIcon,
                    width: 63.5,
                    height: 38.5,
                  ),
                  MyTextView(
                    'Ending 9423',
                    fontSize: 15,
                    isFontMedium: true,
                    textColor: context.appColors.textBlack,
                    marginLeft: 27.5,
                  ),
                ],
              ),
              MyButton(
                onPressed: (){
                  ComponentServiceManager().paymentService.startChooseCardPage();
                },
                text: S.current.change,
                minWidth: 80,
                minHeight: 30,
                textColor: context.appColors.textWhite,
                fontSize: 15,
                fontWeight: FontWeight.w400,
                backgroundColor: context.appColors.textPrimary,
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildOrderRemark(ServiceOrderConfirmState state, ServiceOrderConfirmVm vm, BuildContext context, WidgetRef ref) {
    //签名的说明文本
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // const MyAssetImage(
            //   Assets.assetsYyHomeLogo,
            //   width: 15,
            //   height: 17.5,
            // ),
            // const SizedBox(
            //   width: 10,
            // ),
            MyTextView(
              S.current.remarks_information,
              fontSize: 17,
              isFontBold: true,
              textColor: context.appColors.textBlack,
              marginBottom: 15,
            ),
          ],
        ),
        Container(
          margin: const EdgeInsets.only(left:10, right:10,top: 0),
          width: double.infinity,
          height: 200,
          padding: const EdgeInsets.all(15),
          decoration: BoxDecoration(
              color: DarkThemeUtil.multiColors(context, ColorUtils.string2Color("#F2F3F6"),darkColor: AppColorsTheme.color666666),
              borderRadius: BorderRadius.circular(5),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.2),
                  spreadRadius:1,
                  blurRadius: 2,
                  offset: const Offset(0.5, 0.5), // changes position of shadow
                ),
              ]
          ),
          child: _buildTextAreaLayout(context, vm, ref, 'remark',),
        ),
      ],
    );
  }

  /// 多行输入框
  Widget _buildTextAreaLayout(BuildContext context, ServiceOrderConfirmVm vm, WidgetRef ref,String key){
    final state = ref.watch(serviceOrderConfirmVmProvider);
    final noteCount = useState(0);
    return Stack(
        children: [
          Container(
            child: TextField(
              cursorColor: context.appColors.authFiledText,
              cursorWidth: 1.5,
              autofocus: false,
              enabled: true,
              maxLines: null,
              focusNode: state.remarkInfo[key]!['focusNode'],
              controller: state.remarkInfo[key]!['controller'],
              decoration: InputDecoration(
                isDense: true,
                isCollapsed: true,
                border: InputBorder.none,
                hintText: state.remarkInfo[key]!['hintText'],
                hintStyle: TextStyle(
                  color: DarkThemeUtil.multiColors(context, context.appColors.authFiledHint, darkColor: Colors.black),
                  fontSize: 16.0,
                  fontWeight: FontWeight.w400,
                ),
              ),
              style: TextStyle(
                color: DarkThemeUtil.multiColors(context, context.appColors.authFiledText, darkColor: Colors.black),
                fontSize: 16.0,
                fontWeight: FontWeight.w400,
              ),
              textInputAction: TextInputAction.done,
              onSubmitted: (value) {
                FocusScope.of(context).unfocus();
              },
              expands: true,
              onChanged: (text) {
                // 当文本改变时，更新字符数量
                noteCount.value = text.length;
              },
            ),
          ),
          // Positioned(
          //   bottom: 0.0,
          //   right: 0.0,
          //   child: Text(
          //     S.current.characters(noteCount.value),
          //     style: TextStyle(
          //       color: context.appColors.textBlack,
          //       fontSize: 15.0,
          //     ),
          //   ),
          // ),
        ]
    );
  }


  Widget _buildOrderRules(ServiceOrderConfirmState state, ServiceOrderConfirmVm vm, BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            MyTextView(
             S.current.service_rules,
              fontSize: 17,
              isFontBold: true,
              textColor: context.appColors.textBlack,
              marginBottom: 10,
            ),
          ],
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            MyTextView(
              'Dear user, in order to ensure the time efficiency of service personnel, if an order is cancelled within 60 minutes before the start of the service, a certain percentage of your order amount may be deducted. If a coupon is used for the order, it will be refunded to your account after cancellation. Please forgive me!If cancelled more than 60 minutes before the service, 100% of the payment amount will be refundedCancel within 0-60 minutes before the start of the service and the service personnel have accepted the order:If it is due to your personal reasons, the platform will deduct 20% of the payment amount (up to a maximum of 30 yuan), and the remaining amount will be refunded through the original payment methodIf it is due to the store\'s reasons, the platform will complete the verification within 24 hours. After verification is passed, the full amount will be refunded to the original route within 1-3 working daysAfter the service starts, if you have any disputes with the service personnel due to service quality issues, please contact customer service for resolution. Contact phone number: +65 66889955',
              fontSize: 14,
              textColor: context.appColors.textBlack,
              isFontRegular: true,
            ),
          ],
        )
      ],
    );
  }

  // 底部操作区域
  Widget _buildBottomSection(ServiceOrderConfirmState state, ServiceOrderConfirmVm vm,WidgetRef ref, BuildContext context, int id, int? cleanServiceTypeId) {

    double totalPrice = ref.watch(serviceOrderConfirmVmProvider.select((state) => ((state.cleanServiceToTalCost??0.0) + (state.extraCost??0.0)??0.0)));

    return Container(
      height: 50,
      width: double.infinity,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: [
          Container(
            width: 122,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: [
                Container(
                  alignment: Alignment.center,
                  padding: const EdgeInsets.only(left:5, right: 0,top:5,bottom: 5),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      MyTextView(
                        "\$$totalPrice",
                        fontSize: 18,
                        textColor: context.appColors.textWhite,
                        isFontRegular: true,
                        marginLeft: 5,
                        marginRight: 15,
                        onClick: (){

                        },
                      ),
                    ],
                  ),
                ),
              ],
            ).backgroundColor(context.appColors.textPrimary),
          ),
          Expanded(
            child: Container(
              color: DarkThemeUtil.multiColors(context, context.appColors.redDefault, darkColor: Colors.red),
              child: Center(
                child: MyTextView(
                  S.current.pay_now,
                  textColor: DarkThemeUtil.multiColors(context,context.appColors.textWhite, darkColor: Colors.white),
                  fontSize: 17,
                  isFontMedium: true,
                  textAlign: TextAlign.center,
                ),
              ),
            ).onTap((){
              vm.handlerClickPayNow(context, id: id , cleanServiceTypeId: cleanServiceTypeId);
            }),
          ),
        ],
      ),
    );
  }
}