YYHome/packages/cpt_property/lib/modules/ioan/property_ioan_page.dart

import 'package:cpt_property/components/bottomDialog.dart';
import 'package:cs_resources/generated/assets.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:plugin_platform/engine/toast/toast_engine.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';

import '../../../router/page/property_page_router.dart';
import 'property_ioan_vm.dart';

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

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

  Widget _buildContentTopAdviceSection(BuildContext context,WidgetRef ref, _vm){
    return Column(
      children: [
        MyTextView(
          "YY Home",
          textColor: ColorUtils.string2Color('#000000'),
          fontSize: 27,
          isFontMedium: true,
          textAlign: TextAlign.center,
        ),
        MyTextView(
          "Find the best home loan for you",
          textColor: ColorUtils.string2Color('#000000'),
          fontSize: 16,
          isFontRegular: true,
          marginBottom: 14,
          textAlign: TextAlign.center,
        ),
        Container(
          width: double.infinity,
          height: 210,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(0),
            color: ColorUtils.string2Color('#FEFEFE'),
            image: const DecorationImage(
              image: AssetImage('packages/cs_resources/${Assets.propertyHomeLoanBg}'), // 使用包中的资源
              fit: BoxFit.cover,
            ),
          ),
          child: Column(
            children: [
              MyTextView(
                "YY Home exclusive rates:",
                textColor: ColorUtils.string2Color('#FEFEFE'),
                fontSize: 15,
                boxWidth: 237,
                boxHeight: 35,
                alignment: Alignment.center,
                textAlign: TextAlign.center,
                marginTop: 5.5,
                backgroundColor: ColorUtils.string2Color('#4161D0')
              ),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                        width: 105,
                        height: 105,
                        padding: const EdgeInsets.all(5),
                        color: ColorUtils.string2Color('#4161D0'),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            MyTextView(
                              _vm.state.lowestFloatingRate,
                              textColor: ColorUtils.string2Color('#FEFEFE'),
                              fontSize: 30,
                            ),
                            MyTextView(
                              "Lowest Floating Rate",
                              textColor: ColorUtils.string2Color('#FEFEFE'),
                              fontSize: 14,
                              textAlign: TextAlign.center,
                            ),
                          ]
                        )
                    ),
                    Container(
                        width: 105,
                        height: 105,
                        padding: const EdgeInsets.all(5),
                        color: ColorUtils.string2Color('#4161D0'),
                        margin: const EdgeInsets.only(left: 18),
                        child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              MyTextView(
                                _vm.state.lowestFixedRate,
                                textColor: ColorUtils.string2Color('#FEFEFE'),
                                fontSize: 30,
                              ),
                              MyTextView(
                                "Lowest Floating Rate",
                                textColor: ColorUtils.string2Color('#FEFEFE'),
                                fontSize: 14,
                                textAlign: TextAlign.center,
                              ),
                            ]
                        )
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        MyTextView(
          "Check out what others are offering:",
          textColor: ColorUtils.string2Color('#FEFEFE'),
          fontSize: 15,
          boxWidth: double.infinity,
          boxHeight: 40.5,
          alignment: Alignment.center,
          textAlign: TextAlign.center,
          backgroundColor: ColorUtils.string2Color('#4161D0'),
        ),

        const SizedBox(height: 20),

        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            MyLoadImage(
              Assets.propertyAdvicePic,
              width: 132,
              // height: 122.5,
            ),
            Expanded(
              child: Container(
                // color: Colors.red,
                padding: const EdgeInsets.only(left: 50,right: 20),
                child: Column(
                  // mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        MyTextView(
                          "Floating",
                          textColor: ColorUtils.string2Color('#000000'),
                          fontSize: 14,
                          textAlign: TextAlign.center,
                        ),
                        MyTextView(
                          "Fixed",
                          textColor: ColorUtils.string2Color('#000000'),
                          fontSize: 14,
                          textAlign: TextAlign.center,
                          marginLeft: 50.5,
                        ),
                      ],
                    ),
                    // const SizedBox(height: 10),

                    Expanded(child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            MyTextView(
                              "3.08%",
                              textColor: ColorUtils.string2Color('#000000'),
                              fontSize: 16,
                              textAlign: TextAlign.center,
                              isFontMedium: true,
                              marginLeft: 15,
                            ),
                            MyTextView(
                              "2.50%",
                              textColor: ColorUtils.string2Color('#000000'),
                              fontSize: 16,
                              textAlign: TextAlign.center,
                              isFontMedium: true,
                              marginLeft: 50.5,
                            ),
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            MyTextView(
                              "3.08%",
                              textColor: ColorUtils.string2Color('#000000'),
                              fontSize: 16,
                              textAlign: TextAlign.center,
                              isFontMedium: true,
                              marginLeft: 15,
                            ),
                            MyTextView(
                              "2.50%",
                              textColor: ColorUtils.string2Color('#000000'),
                              fontSize: 16,
                              textAlign: TextAlign.center,
                              isFontMedium: true,
                              marginLeft: 50.5,
                            ),
                          ],
                        ).marginOnly(top: 15),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            MyTextView(
                              "3.08%",
                              textColor: ColorUtils.string2Color('#000000'),
                              fontSize: 16,
                              textAlign: TextAlign.center,
                              isFontMedium: true,
                              marginLeft: 15,
                            ),
                            MyTextView(
                              "2.50%",
                              textColor: ColorUtils.string2Color('#000000'),
                              fontSize: 16,
                              textAlign: TextAlign.center,
                              isFontMedium: true,
                              marginLeft: 47.5,
                            ),
                          ],
                        ).marginOnly(top: 15),
                      ],
                    ))


                  ],
                ),
              ),
            ),
          ],
        ).constrained(height: 160),
      ],
    );
  }

  Widget _buildContentMiddleTextSection(BuildContext context,WidgetRef ref, _vm) {
    return Column(
        children: [
          MyTextView(
            "The right advice to help you choose the best package in the market!",
            textColor: ColorUtils.string2Color('#000000'),
            fontSize: 18,
            isFontMedium: true,
            marginTop: 20,
            marginBottom: 20,
            textAlign: TextAlign.center,
          ),
          MyTextView(
            "-No Hidden Fees, We Are Out ToHelp You!-Interest Savings With Lowest RatesGuarantee-One-Stop Access to All The BanksPackages",
            textColor: ColorUtils.string2Color('#000000'),
            fontSize: 15,
            textAlign: TextAlign.center,
            marginBottom: 20,
          ),
        ],
    );
  }

  Widget _buildContentOfferSection(BuildContext context,WidgetRef ref, _vm) {
    final offerTextInfoList = _vm.state.offerTextInfoList.map((value) => value).toList();
    return Container(
      width: double.infinity,
      child: Column(
        children: [
          MyTextView(
           "What do we offer?",
            textColor: ColorUtils.string2Color('#000000'),
            fontSize: 18,
            isFontMedium: true,
            marginTop: 16.5,
            marginBottom: 16.5,
          ),
          Wrap(
            children: List.generate(offerTextInfoList.length, (index){
              return Container(
                width: MediaQuery.of(context).size.width / 2 - 100,
                margin: const EdgeInsets.only(right: 15,bottom: 15),
                padding: const EdgeInsets.only(left: 15,right: 15,top:15,bottom:15,),
                // decoration: BoxDecoration(
                //   borderRadius: BorderRadius.circular(10),
                //   color: ColorUtils.string2Color('#F5F5F5'),
                // ),
                child: Column(
                  children: [
                    MyLoadImage(
                      offerTextInfoList[index]["icon"],
                      width: offerTextInfoList[index]["iconWidth"],
                      height: offerTextInfoList[index]["iconHeight"],
                    ),
                    const SizedBox(height: 13,),
                    MyTextView(
                      offerTextInfoList[index]["title"],
                      fontSize: 15,
                      textColor: ColorUtils.string2Color('#000000'),
                      textAlign: TextAlign.center,
                    ),
                  ]
                ),
              );
            }),
          ),
        ]
      ),
    );
  }

  Widget _buildContentBottomPartnersSection(BuildContext context,WidgetRef ref, _vm) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        MyTextView(
          "Our Partners",
          textColor: ColorUtils.string2Color('#000000'),
          fontSize: 18,
          isFontMedium: true,
          marginBottom: 16.5,
        ),
        MyLoadImage(Assets.propertyOurPartners,),
      ],
    );
  }

  Widget _buildCotentBox(BuildContext context,WidgetRef ref, _vm) {
    return Column(
      children: [
        _buildContentTopAdviceSection(context, ref, _vm),
        const SizedBox(height: 15,),
        _buildContentMiddleTextSection(context, ref, _vm),
        const SizedBox(height: 15,),
        _buildContentOfferSection(context, ref, _vm),
        const SizedBox(height: 15,),
        _buildContentBottomPartnersSection(context, ref, _vm),
      ],
    );
  }


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

    useEffect((){
      _vm.initPageData();
      return () {};
    }, []);

    return Scaffold(
      backgroundColor: ColorUtils.string2Color("#F2F3F6"),
      // appBar: AppBar(title: Text("资产")),
      body: Column(
        children: [
          Expanded(
            child: LoadStateLayout(
              state: state.loadingState,
              errorMessage: state.errorMessage,
              errorRetry: () {
                _vm.retryRequest();
              },
              successWidget: SingleChildScrollView(
                scrollDirection: Axis.vertical,
                physics: const BouncingScrollPhysics(),
                clipBehavior: Clip.none,
                child: Padding(
                    padding: const EdgeInsets.only(left: 15,right: 15,top: 15),
                    child: _buildCotentBox(context, ref, _vm),
                )
              ),
            )
          ),
          Visibility(
            visible: state.loadingState == LoadState.State_Success,
            child: Container(
              height: 50,
              color: ColorUtils.string2Color('#4161D0'),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // MyLoadImage(Assets.propertyIoanItemBg,width: 60,height: 50,),
                  const SizedBox(width: 10,),
                  MyTextView(
                    "Request a Quote",
                    fontSize: 16,
                    textColor: Colors.white,
                    isFontMedium: true,
                  ),
                ],
              ),
            ).onTap((){
              _vm.handlerRequestQuote(context);
            }),
          )
        ],
      ),
    );
  }
}