import 'package:cpt_services/modules/services_contact/services_contact_page.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:shared/utils/color_utils.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 'package:widgets/widget_export.dart';
import 'package:cs_resources/generated/assets.dart';

import '../../../router/page/services_page_router.dart';
import './services_detail_vm.dart';

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

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

  Widget _buildDetailTop(BuildContext context, WidgetRef ref, _vm) {
    // List itemsList = _vm.state.list.toList();
    return Column(
      children: [
        const Column(children: [
          MyAssetImage(
            Assets.propertyHomeLoanBg,
            // width: 15,
            // height: 15,
          ),
        ]),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const Text(
              'IMPORTANT',
              style: TextStyle(
                  fontSize: 18.0,
                  color: Colors.black,
                  fontWeight: FontWeight.w700), // 设置字体大小
            ).marginOnly(bottom: 15),
            Row(children: [
              SizedBox(
                width: 100,
                height: 16,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: 5,
                    itemBuilder: (context, index) {
                      return MyAssetImage(
                        4.1 >= index + 1
                            ? Assets.serviceServiceScoreYes
                            : Assets.serviceServiceScoreNo,
                        width: 16.5,
                        height: 15.5,
                      ).marginOnly(right: 4);
                    }),
              ),
              const Text(
                "4.1",
                style: TextStyle(
                    fontSize: 16.0,
                    color: Colors.black,
                    fontWeight: FontWeight.w500), // 设置字体大小
              ).marginOnly(left: 5),
            ]).marginOnly(bottom: 25),
            const Text(
              'Dear Residents,STANDARD OPERATING PROCEDURE FORREPLACEMENT VEHICLES ANDOVERNICHT PARKING VEHICLES',
              style: TextStyle(
                  fontSize: 15.0,
                  color: Colors.black,
                  fontWeight: FontWeight.w400), // 设置字体大小
            ),
          ],
        ).paddingOnly(top: 15, bottom: 50, left: 15, right: 15),
      ],
    );
  }

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

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "Lift Padding",
        backgroundColor: context.appColors.whiteBG,
      ),
      body: Column(children: [
        Expanded(
          child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              physics: const BouncingScrollPhysics(),
              clipBehavior: Clip.none,
              child: _buildDetailTop(context, ref, _vm)),
        ),
        Container(
          height: 50,
          color: ColorUtils.string2Color('#4161D0'),
          child: Flex(
            direction: Axis.horizontal,
            children: [
              Expanded(
                flex: 1,
                child: Container(
                  color: ColorUtils.string2Color('#4161D0'),
                  height: 100,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      MyTextView(
                        "About",
                        fontSize: 16,
                        textColor: Colors.white,
                        isFontMedium: true,
                      ),
                    ],
                  ),
                ).onTap(() {
                  // 去详情
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const ServicesContactPage()),
                  );
                }),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  color: ColorUtils.string2Color('#FE6C00'),
                  height: 100,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      MyTextView(
                        "Content",
                        fontSize: 16,
                        textColor: Colors.white,
                        isFontMedium: true,
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        )
      ]),
    );
  }
}