import 'package:cpt_notice_board/modules/notice_board/page/notice_board_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:flutter_hooks/flutter_hooks.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/load_state_layout.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/widget_export.dart';
import 'package:cs_resources/generated/assets.dart';

import '../../../router/page/notice_board_page_router.dart';
import '../vm/announ_vm.dart';

import '../../announcement_detail/page/announcement_detail_page.dart';

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

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

  Widget _buildItemLeftSection(BuildContext context, WidgetRef ref, item, vm) {
    return Container(
      // color: Colors.blue,
      child: Text(
        maxLines: 2, // 设置最大行数为2
        overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
        item['title'],
        style:  TextStyle(fontSize: 16.0, color: context.appColors.textBlack, fontWeight: FontWeight.w700), // 设置字体大小
      ),
    );
  }

  Widget _buildItemRightSection(BuildContext context, WidgetRef ref, item, vm) {
    return Container(
      // color: Colors.green,
      child: Text(
        item['created_at'],
        style:  TextStyle(fontSize: 14.0, color: context.appColors.textBlack, fontWeight: FontWeight.w400), // 设置字体大小
      ),
    );
  }

  // listitem
  Widget _buildSaleItem(BuildContext context, WidgetRef ref, item, vm) {
    return Container(
      decoration: BoxDecoration(
        color: context.appColors.whiteBG,
        borderRadius: const BorderRadius.all(Radius.circular(6.0)),
        boxShadow: [
          BoxShadow(
            color: context.appColors.itemBGShadow,
          )
        ],
      ),
      child: Column(
        children: [
          SizedBox(
            width: MediaQuery.of(context).size.width - 30,
            height: 100,
            // margin: const EdgeInsets.only(left: 15, right: 15, top: 12.5),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                _buildItemLeftSection(context, ref, item, vm).marginOnly(bottom: 5),
                _buildItemRightSection(context, ref, item, vm),
              ],
            ).paddingOnly(left: 20, right: 20),
          ).constrained(
            minHeight: 117.5,
          ),
        ],
      ).onTap(() {
        // 去详情
        // AnnouncementDetailPage.startInstance(context: context);
        AnnouncementDetailPage.startInstance(id: item['id']);
      }),
    ).marginOnly(left: 15, bottom: 15, right: 15);
  }

  // list
  Widget _buildSaleList(BuildContext context, WidgetRef ref, vm) {
    final state = ref.watch(announVmProvider);
    return SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
      return _buildSaleItem(context, ref, state.list![index], vm);
    }, childCount: state.list!.length));
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(announVmProvider.notifier);
    final state = ref.watch(announVmProvider);
    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => vm.initPageData());
      return () {
        // 组件卸载时执行
        Log.d("property_news_page 组件卸载时执行");
      };
    }, []);
    return EasyRefresh(
      controller: vm.refreshController,
      // 上拉加载
      onLoad: () async {
        Log.d("----onLoad");
        vm.loadMore();
      },
      // 下拉刷新
      onRefresh: () async {
        Log.d("----onRefresh");
        vm.onRefresh();
      },
      child: Container(
        color:context.appColors.backgroundDark,
        padding: const EdgeInsets.only(top: 15),
        child: LoadStateLayout(
          state: state.loadingState,
          errorMessage: state.errorMessage,
          errorRetry: () {
            vm.retryRequest();
          },
          successSliverWidget: [_buildSaleList(context, ref, vm)],
        ),
      ),
    );
  }
}
