Flyinsono/lib/lab/components/image_list_item.dart

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/lab/color/lab_colors.dart';
import 'package:flyinsono/lab/components/lab_center_loading.dart';
import 'package:flyinsono/lab/mock_data/mock_rpc.dart';

/// 图片单项
class ImageListItem extends StatefulWidget {
  const ImageListItem({
    super.key,
    required this.imagePreviewUrl,
    required this.imageType,
    required this.description,
    required this.isSelected,
    this.labelBuilder,
    this.onSelected,
    this.isSelectUrmData = false,
    this.isVideo = false,
  });
  final String imagePreviewUrl;
  final ImageType imageType;
  final String description;
  final bool isSelected;
  final bool isSelectUrmData;
  final bool isVideo;

  final VoidCallback? onSelected;
  final Widget? labelBuilder;

  @override
  State<ImageListItem> createState() => _ImageListItemState();
}

class _ImageListItemState extends State<ImageListItem> {
  bool _isHover = false;

  @override
  Widget build(BuildContext context) {
    Color _borderColor = Colors.transparent;
    if (_isHover) {
      _borderColor = LabColors.base600;
    }
    if (widget.isSelected) {
      if (widget.isSelectUrmData) {
        _borderColor = LabColors.base700;
      } else {
        _borderColor = LabColors.green500;
      }
    }

    return Container(
      // margin: EdgeInsets.only(bottom: 5),
      child: MouseRegion(
        cursor: SystemMouseCursors.click,
        onEnter: _handleMouseEnter,
        onExit: _handleMouseExit,
        child: GestureDetector(
          onTap: () {
            widget.onSelected?.call();
          },
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  color: Colors.black,
                  border: Border.all(
                    color: _borderColor,
                    width: 3,
                  ),
                ),
                child: SizedBox.expand(
                  child: Image.network(
                    widget.imagePreviewUrl,
                    fit: BoxFit.contain,
                    loadingBuilder: (context, child, loadingProgress) {
                      if (loadingProgress == null) return child; // 图片已加载，返回图片
                      return LabCenterLoading();
                    },
                    errorBuilder: (BuildContext context, Object error,
                        StackTrace? stackTrace) {
                      return Center(
                        child: Icon(
                          Icons.image_outlined,
                          size: 60,
                          color: LabColors.base600,
                        ),
                      );
                    },
                  ),
                ),
              ),
              if (widget.isVideo) ...[
                Center(
                  child: Icon(
                    Icons.play_circle_outline,
                    color: Colors.white,
                    size: 40,
                  ),
                ),
              ],
              Align(
                alignment: Alignment.bottomLeft,
                child: Container(
                  color: Colors.black,
                  width: double.maxFinite,
                  margin: EdgeInsets.all(3),
                  child: Text(
                    widget.description,
                    style: TextStyle(
                      color: LabColors.text400,
                      fontSize: 12,
                    ),
                  ),
                ),
              ),
              if (widget.labelBuilder != null)
                Align(
                  alignment: Alignment.bottomRight,
                  child: Container(
                    margin: EdgeInsets.all(3),
                    padding: EdgeInsets.symmetric(horizontal: 2),
                    decoration: BoxDecoration(
                      color: Colors.black,
                      borderRadius: BorderRadius.circular(3),
                      border: Border.all(
                        color: LabColors.base800,
                        width: 1,
                      ),
                    ),
                    child: widget.labelBuilder!,
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }

  void _handleMouseEnter(PointerEnterEvent event) {
    setState(() {
      _isHover = true;
    });
  }

  void _handleMouseExit(PointerExitEvent event) {
    setState(() {
      _isHover = false;
    });
  }
}

/// 图片列表的原型项（用于定位大小）
class ImageListItemPrototypeItem extends StatelessWidget {
  const ImageListItemPrototypeItem({Key? key, required this.aspectRatio})
      : super(key: key);

  final double aspectRatio;

  @override
  Widget build(BuildContext context) {
    return Container(
      // margin: EdgeInsets.only(bottom: 5),
      child: AspectRatio(
        aspectRatio: aspectRatio,
        child: Container(),
      ),
    );
  }
}