Clean/lib/module/photo_preview/phtoto_selected_preview_view.dart

import 'package:clean/base/base_page.dart';
import 'package:clean/data/bean/photos_type.dart';
import 'package:clean/module/photo_preview/photo_selected_preview_controller.dart';
import 'package:clean/resource/assets.gen.dart';
import 'package:clean/router/app_pages.dart';
import 'package:flutter/Material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:lottie/lottie.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';
import 'package:get/get.dart';

import '../../utils/styles.dart';

class PhotoSelectedPreviewPage
    extends BasePage<PhotoSelectedPreviewController> {
  const PhotoSelectedPreviewPage({super.key});

  static void start(PhotosType photosType, Set<String> selectedIds) {
    Get.toNamed(RoutePath.photoSelectedPreview, arguments: {
      "photosType": photosType,
      "selectedIds": selectedIds,
    });
  }

  @override
  bool statusBarDarkFont() {
    return false;
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(children: [
      PopScope(
          canPop: false,
          onPopInvokedWithResult: (didPop, result) {
            if (didPop) {
              return;
            }
            controller.clickBack();
          },
          child: Container(
            child: SafeArea(
              child: Obx(() {
                if (controller.photoGroups.isEmpty ||
                    controller.photoGroups[0].images.isEmpty) {
                  return _noNoPicturesCard();
                } else if (controller.isKeepAll.value) {
                  return _finishCleanCard();
                }
                return Column(
                  children: [
                    _titleCard(),
                    Flexible(
                      child: Obx(() {
                        return SizedBox(
                          child: GridView.builder(
                              padding: EdgeInsets.symmetric(horizontal: 16.w),
                              scrollDirection: Axis.vertical,
                              // 设置为垂直方向滚动
                              physics: BouncingScrollPhysics(),
                              gridDelegate:
                                  SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 3, // 每行显示 2 个元素
                                mainAxisSpacing: 8.w, // 垂直间距
                                crossAxisSpacing: 8.h, // 水平间距
                              ),
                              itemCount:
                                  controller.photoGroups[0].images.length,
                              itemBuilder: (context, index) => _buildPhotoItem(
                                  context,
                                  index,
                                  controller.photoGroups[0].images)),
                        );
                      }),
                    ),
                    Obx(() {
                      if (controller.photoGroups.isNotEmpty ||
                          controller.photoGroups[0].images.isNotEmpty) {
                        return _bottomBarCard();
                      } else {
                        return SizedBox();
                      }
                    }),
                    SizedBox(height: 8.h),
                  ],
                );
              }),
            ),
          )),
      Obx(() {
        if (controller.isKeepAll.value) {
          return IgnorePointer(
            child: Assets.images.bgPhotoSelectedPreviewFinish.image(
              width: 360.w,
            ),
          );
        } else {
          return IgnorePointer(
            child: Assets.images.bgHome.image(
              width: 360.w,
            ),
          );
        }
      }),
    ]);
  }

  Widget _titleCard() {
    return Container(
      alignment: Alignment.centerLeft,
      padding:
          EdgeInsets.only(left: 16.w, top: 14.h, right: 16.w, bottom: 20.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Obx(() {
            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  onTap: () => controller.clickBack(),
                  child: Assets.images.iconBackArrow.image(
                    width: 28.w,
                    height: 28.h,
                  ),
                ),
                // 如果photoGroup数据为空，不显示全选按钮
                controller.photoGroups.isEmpty ||
                        controller.photoGroups[0].images.isEmpty
                    ? Container()
                    : GestureDetector(
                        onTap: () => controller.toggleGroupSelection(
                            controller.photoGroups[0].images),
                        child: Obx(() => Text(
                              controller
                                      .getGroupByImages(
                                          controller.photoGroups[0].images)
                                      .isSelected
                                      .value
                                  ? 'Deselect All'
                                  : 'Select All',
                              style: TextStyle(
                                color: Colors.white.withValues(alpha: 0.7),
                                fontSize: 14.sp,
                                fontWeight: FontWeight.w400,
                              ),
                            )),
                      ),
              ],
            );
          }),
        ],
      ),
    );
  }

  Widget _bottomBarCard() {
    return GestureDetector(
        onTap: () {
          controller.clickDelete();
        },
        child: Container(
          width: 328.w,
          height: 48.h,
          decoration: ShapeDecoration(
            color: Color(0xFF0279FB),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.r),
            ),
          ),
          padding: EdgeInsets.symmetric(horizontal: 16.w),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Assets.images.iconDelete.image(
                width: 18.w,
                height: 18.h,
              ),
              SizedBox(width: 5.w),
              Obx(() {
                if (controller.selectedPhotosIds.isNotEmpty) {
                  return Text(
                    'delete ${controller.selectedFilesSizeString}',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  );
                } else {
                  return Text(
                    'Keep All',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  );
                }
              }),
            ],
          ),
        ));
  }

  Widget _buildPhotoItem(context, index, List<AssetEntity> images) {
    final group = controller.getGroupByImages(controller.photoGroups[0].images);
    return GestureDetector(
      onTap: () => controller.clickImage(images, index, controller.photosType),
      child: Obx(() {
        var isSelected = group.isImageSelected(images[index]);
        return Stack(
          children: [
            Container(
              width: 104.w,
              height: 104.w,
              decoration: ShapeDecoration(
                color: Colors.white.withValues(alpha: 0.12),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(9.27.sp),
                ),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(9.27.sp),
                child: AssetEntityImage(
                  group.images[index],
                  width: 104.w,
                  isOriginal: false,
                  thumbnailSize: const ThumbnailSize.square(300),
                  height: 104.w,
                  fit: BoxFit.cover,
                  frameBuilder: Styles.customFrameBuilder(
                    width: 104.w,
                    height: 104.w,
                  ),
                ),
              ),
            ),
            Positioned(
              right: 8.w,
              bottom: 8.h,
              child: GestureDetector(
                  onTap: () => controller.toggleImageSelection(images, index),
                  child: Container(
                    child: isSelected
                        ? Center(
                            child: Assets.images.iconSelected.image(
                              width: 20.w,
                              height: 20.h,
                            ),
                          )
                        : Center(
                            child: Assets.images.iconUnselected.image(
                            width: 20.w,
                            height: 20.h,
                          )),
                  )),
            ),
          ],
        );
      }),
    );
  }

  Widget _noNoPicturesCard() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        _titleCard(),
        SizedBox(height: 170.h),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 70.w,
              height: 70.h,
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(),
              child: Assets.images.iconNoPictures.image(),
            ),
            SizedBox(height: 22.h),
            Text(
              'No pictures found',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.sp,
                fontWeight: FontWeight.w700,
              ),
            ),
            SizedBox(height: 12.h),
            Text(
              'No pictures available at the moment',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white.withValues(alpha: 0.6),
                fontSize: 14.sp,
                fontWeight: FontWeight.w400,
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _finishCleanCard() {
    return Container(
      width: 360.w,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Spacer(
            flex: 3,
          ),
          Text(
            'Great!',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 32.sp,
              fontWeight: FontWeight.w700,
            ),
          ),
          SizedBox(height: 14.h),
          Text(
            "You've completed 1 photo review",
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white.withValues(alpha: 0.8),
              fontSize: 16.sp,
              fontWeight: FontWeight.w400,
            ),
          ),
          SizedBox(height: 47.h),
          // Assets.images.iconPhotoSelectedPreviewFireworks.image(
          //   width: 158.w,
          //   height: 158.h,
          // ),

          SizedBox(
              child: Lottie.asset(
            Assets.anim.animPhotoSelectedPreviewFireworks,
            width: 158.w,
            height: 158.w,
            repeat: false,
          )),

          Spacer(
            flex: 5,
          ),
        ],
      ),
    );
  }
}