import 'package:cpt_notice_board/modules/notice_board/page/notice_board_page.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:domain/entity/notice_board_event_detail_entity.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_appbar.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/event_detail_vm.dart';

@RoutePage()
class EventDetailPage extends HookConsumerWidget {
  final int? id;

  const EventDetailPage({Key? key, @PathParam('id') required this.id})
      : super(key: key);

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

  Widget _buildDetailTop(BuildContext context, WidgetRef ref, _vm, item) {
    List? resources = item!.resources ?? [];
    return Column(
      children: [
        Column(children: [
          Text(
            item.title,
            style: TextStyle(
                fontSize: 18.0,
                color: context.appColors.textBlack,
                fontWeight: FontWeight.w700), // 设置字体大小
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // const MyAssetImage(
              //   Assets.noticeBoardAnnouncementDetailOur,
              //   width: 15,
              //   height: 15,
              // ).marginOnly(right: 8),
              // const Text(
              //   'Our ref: ',
              //   style: TextStyle(
              //       fontSize: 15.0,
              //       color: Colors.black,
              //       fontWeight: FontWeight.w700), // 设置字体大小
              // ),
              Text(
                item.datetime,
                style: TextStyle(
                    fontSize: 15.0,
                    color: context.appColors.textBlack,
                    fontWeight: FontWeight.w400), // 设置字体大小
              ),
            ],
          ).marginOnly(top: 15),
          // const MyAssetImage(
          //   Assets.propertyHomeLoanBg,
          //   // width: 15,
          //   // height: 15,
          // ).marginOnly(top: 25),
        ]).paddingOnly(bottom: 20),
        Column(
          children: [
            // const Column(
            //   mainAxisAlignment: MainAxisAlignment.center,
            //   crossAxisAlignment: CrossAxisAlignment.center,
            //   children: [
            // Text(
            //   'IMPORTANT',
            //   style: TextStyle(
            //       fontSize: 18.0,
            //       color: Colors.black,
            //       fontWeight: FontWeight.w700), // 设置字体大小
            // )
            // ],
            // ).marginOnly(bottom: 25),
            resources!.length > 0
                ? MyLoadImage(
              resources[0] ?? '',
              width: MediaQuery
                  .of(context)
                  .size
                  .width,
              height: 150,
            ).marginOnly(bottom: 15)
                : Container(),
            Html(
              data: item.content,
            ),
          ],
        ).paddingOnly(top: 0, bottom: 50),
      ],
    );
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final _vm = ref.read(eventDetailVmProvider.notifier);
    final state = ref.watch(eventDetailVmProvider);
    NoticeBoardEventDetailEntity? detailInfo = state.detailInfo;
    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => _vm.initPageData(id: id));
      return () {
        // 组件卸载时执行
        Log.d("property_news_page 组件卸载时执行");
      };
    }, []);
    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "Announcement",
        backgroundColor: context.appColors.backgroundWhite,
      ),
      body: LoadStateLayout(
          state: state.loadingState,
          errorMessage: state.errorMessage,
          errorRetry: () {
            _vm.retryRequest(id: id);
          },
          successWidget: Container(
              child: EasyRefresh(
                child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    physics: const BouncingScrollPhysics(),
                    clipBehavior: Clip.none,
                    child: Padding(
                        padding:
                        const EdgeInsets.only(left: 15, right: 15, top: 15),
                        child: _buildDetailTop(context, ref, _vm, detailInfo))),
              ))),
    );
  }
}
