YYHome/packages/cpt_main/lib/modules/feedback/detail/feedback_detail_page.dart

import 'package:cpt_main/modules/demo_page.dart';
import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/generated/l10n.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:plugin_platform/engine/image/image_nine_grid.dart';
import 'package:router/ext/auto_router_extensions.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 '../../../router/page/main_page_router.dart';
import 'feedback_detail_view_model.dart';

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

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(feedbackDetailViewModelProvider.notifier);
    final state = ref.watch(feedbackDetailViewModelProvider);

    return Scaffold(
      appBar: MyAppBar.appBar(context, S.current.feedback_details, showBottomDivider: true),
      backgroundColor: context.appColors.backgroundDark,
      body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          physics: const BouncingScrollPhysics(),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                color: context.appColors.whiteBG,
                width: double.infinity,
                padding: const EdgeInsets.symmetric(horizontal: 10),
                height: 85,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    MyTextView(
                      "Exchange old houses for new ones",
                      fontSize: 21,
                      isFontMedium: true,
                      textColor: context.appColors.textBlack,
                    ),
                    MyTextView(
                      "18 Sep 2024 18:00  |  Security  |  In Progress",
                      fontSize: 12,
                      marginTop: 8,
                      isFontRegular: true,
                      textColor: context.appColors.textDarkGray,
                    ),
                  ],
                ),
              ),

              //反馈的内容
              Container(
                width: double.infinity,
                margin: const EdgeInsets.only(left: 12.5, right: 12.5, top: 12.5, bottom: 12.5),
                padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 25),
                decoration: BoxDecoration(
                  color: context.appColors.whiteBG,
                  borderRadius: BorderRadius.circular(6.0), // 圆角
                  boxShadow: [
                    BoxShadow(
                      color: const Color(0xFFB8BFD9).withOpacity(0.3), // 阴影颜色
                      offset: const Offset(0, 3), // 阴影的偏移量
                      blurRadius: 8.0, // 模糊半径
                      spreadRadius: 3.0, // 扩散半径
                    ),
                  ],
                ),
                child: Column(
                  children: [
                    MyTextView(
                      "Why are there no implementation rules andapplication methods for exchanging old houses for new ones in Jiang han District?",
                      fontSize: 15,
                      marginBottom: 15,
                      isFontRegular: true,
                      textColor: context.appColors.textDarkGray,
                    ),

                    //九宫格展示
                    ImageNineGrid(
                      isSelectEnable: false,
                      maxImages: 10,
                      spacing: 10,
                      aspectRatio: 108 / 80,
                      initialImages: const [
                        "https://img1.baidu.com/it/u=2931243091,718249849&fm=253&fmt=auto&app=120&f=JPEG?w=569&h=427",
                        "https://inews.gtimg.com/om_bt/OE8piEBa-tbqn-wNvWZl8coi4AlzoUD43upEkoAnIkYL8AA/641",
                        "https://inews.gtimg.com/om_bt/OVx3YS2XJc1zbndGTkjPKW9J0W7kN8M0SIidT-3K4mb2YAA/641",
                        "https://inews.gtimg.com/om_bt/OAVMydtx9BsJxf5i_thi4Oll9sR1px-Esmtv6UHSxoisEAA/641"
                      ],
                      onImagesChanged: (list) {},
                    ),
                  ],
                ),
              ),

              //回复的数据
              state.isReplyState ? _buildReplyWidget(context, ref) : _buildWaitingWidget(context)
            ],
          )),
    );
  }

  Widget _buildReplyWidget(BuildContext context, WidgetRef ref) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            MyTextView(
              S.current.administrator_reply,
              fontSize: 18,
              isFontRegular: true,
              textColor: context.appColors.textBlack,
            ).expanded(),
            MyTextView(
              "20 sep 2024 18:00",
              fontSize: 12,
              isFontRegular: true,
              textColor: context.appColors.textDarkGray,
            )
          ],
        ).marginOnly(left: 12.5, right: 12.5,bottom: 14,top: 2.5),

        //回复的内容
        Container(
          width: double.infinity,
          margin: const EdgeInsets.only(left: 12.5, right: 12.5, bottom: 13.5),
          padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 25),
          decoration: BoxDecoration(
            color: context.appColors.whiteBG,
            borderRadius: BorderRadius.circular(6.0), // 圆角
            boxShadow: [
              BoxShadow(
                color: const Color(0xFFB8BFD9).withOpacity(0.3), // 阴影颜色
                offset: const Offset(0, 3), // 阴影的偏移量
                blurRadius: 8.0, // 模糊半径
                spreadRadius: 3.0, // 扩散半径
              ),
            ],
          ),
          child: Column(
            children: [
              MyTextView(
                "Although the policy of exchanging old houses for new houses in Jianghan District has been released, the specific implementation details and application methods are not yet clear. According to relevant reports, Jianghan District has issued multiple measures for the development of the real estate market, including promoting the trade in policy, but the specific implementation details and application methods have not vet been announced",
                fontSize: 15,
                marginBottom: 15,
                isFontRegular: true,
                textColor: context.appColors.textDarkGray,
              ),

              //九宫格展示
              ImageNineGrid(
                isSelectEnable: false,
                maxImages: 10,
                spacing: 10,
                aspectRatio: 108 / 80,
                initialImages: const [
                  "https://img1.baidu.com/it/u=2931243091,718249849&fm=253&fmt=auto&app=120&f=JPEG?w=569&h=427",
                  "https://inews.gtimg.com/om_bt/OVx3YS2XJc1zbndGTkjPKW9J0W7kN8M0SIidT-3K4mb2YAA/641",
                  "https://inews.gtimg.com/om_bt/OAVMydtx9BsJxf5i_thi4Oll9sR1px-Esmtv6UHSxoisEAA/641"
                ],
                onImagesChanged: (list) {},
              ),
            ],
          ),
        )
      ],
    );
  }

  Widget _buildWaitingWidget(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        children: [
          const SizedBox(height: 40),
          const MyAssetImage(Assets.mainFeedbackWaitingIcon, width: 38, height: 38),
          MyTextView(
            S.current.waiting_for_the_administrator,
            fontSize: 15,
            marginTop: 11,
            marginBottom: 40,
            isFontRegular: true,
            textColor: context.appColors.textDarkGray,
          )
        ],
      ),
    );
  }
}