import 'package:shared/utils/log_utils.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: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_appbar.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/widget_export.dart';

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

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

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

  Widget _buildTop(BuildContext context, WidgetRef ref, _vm) {
    // List itemsList = _vm.state.list.toList();
    return Container(
        color: ColorUtils.string2Color('#FFFFFF'),
        child: Column(children: [
          Container(
            width: double.infinity,
            height: 160,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                    'packages/cs_resources/${Assets.propertyHomeLoanBg}'),
                fit: BoxFit.fill, // 设置图片平铺
              ),
            ),
          ).marginOnly(bottom: 15),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text(
                'Home Services!',
                style: TextStyle(
                    fontSize: 16.0,
                    color: Colors.black,
                    fontWeight: FontWeight.w400), // 设置字体大小
              ),
              TextButton(
                onPressed: () {
                  _vm.doDeleteAccount();
                },
                style: TextButton.styleFrom(
                  foregroundColor: Colors.black,
                  backgroundColor: ColorUtils.string2Color('#4161D0'), // 背景颜色
                  minimumSize: const Size(70, 30), // 最小宽度和高度
                  padding: const EdgeInsets.symmetric(
                      horizontal: 11.0, vertical: 9), // 内边距
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5), // 圆角
                    side: BorderSide(
                      color: ColorUtils.string2Color('#4161D0'),
                      width: 1.0,
                    ), // 边框
                  ),
                ),
                child: const Text(
                  'Filter',
                  style: const TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ])).paddingOnly(top: 10, left: 15, right: 15);
  }

  Widget _buildItem(BuildContext context, WidgetRef ref, _vm, item) {
    return Container(
            width: MediaQuery.of(context).size.width / 2 - 25,
            height: 146,
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(6.0)),
              boxShadow: [
                BoxShadow(
                    color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
              ],
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                      child: Text(
                        maxLines: 2, // 设置最大行数为2
                        overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
                        item['title'],
                        style: const TextStyle(
                            fontSize: 16.0,
                            color: Colors.black,
                            fontWeight: FontWeight.w700),
                      ),
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    MyAssetImage(
                      item['price'],
                      width: 110,
                      height: 80,
                    )
                  ],
                ),
              ],
            ).paddingOnly(top: 15, left: 15))
        .marginOnly(bottom: 15);
  }

// list
  Widget _buildSaleList(BuildContext context, WidgetRef ref, _vm) {
    List itemsList = _vm.state.list.toList();
    return ListView.builder(
      itemCount: itemsList.length,
      itemBuilder: (context, index) {
        bool noLast = !(index == itemsList.length - 1);
        bool isLast = index == itemsList.length - 1;
        if (index % 2 == 0 && noLast) {
          return Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              _buildItem(context, ref, _vm, itemsList[index]),
              _buildItem(context, ref, _vm, itemsList[index + 1]),
            ],
          );
        } else if (index % 2 != 0 && noLast) {
          return Row();
        } else if (index % 2 != 0 && isLast) {
          return Row();
        } else {
          return Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              _buildItem(context, ref, _vm, itemsList[index]),
            ],
          );
        }
        // _buildSaleItem(context, ref, itemsList[index], _vm);
      },
    );
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(servicesVmProvider);
    final _vm = ref.read(servicesVmProvider.notifier);
    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "Service",
        backgroundColor: context.appColors.whiteBG,
      ),
      body: Container(
        child: Column(
          children: [
            _buildTop(context, ref, _vm),
            Expanded(
              child: EasyRefresh(
                // 上拉加载
                onLoad: () async {
                  Log.d("----onLoad");
                  _vm.onLoadData();
                },
                // 下拉刷新
                onRefresh: () async {
                  Log.d("----onRefresh");
                  _vm.refreshListData();
                },
                child: Container(
                    color: ColorUtils.string2Color('#F2F3F6'),
                    padding: const EdgeInsets.only(
                        bottom: 15, left: 15, right: 15, top: 15),
                    child: _buildSaleList(context, ref, _vm)),
              ),
            )
          ],
        ),
      ),
    );
  }
}