fis_lib_measure/lib/view/measure/measure_images_bar.dart

import 'package:fis_jsonrpc/rpc.dart';
import 'package:fis_measure/interfaces/process/workspace/exam_info.dart';
import 'package:fis_measure/process/workspace/measure_controller.dart';
import 'package:fis_measure/process/workspace/measure_data_controller.dart';
import 'package:fis_measure/process/workspace/measure_handler.dart';
import 'package:fis_measure/view/measure/measure_images_bar.dart';
export 'package:fis_lib_business_components/index.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class MeasureImagesBar extends StatefulWidget implements FWidget {
  const MeasureImagesBar({Key? key}) : super(key: key);

  @override
  State<MeasureImagesBar> createState() => _MeasureImagesBarState();
}

class _MeasureImagesBarState extends State<MeasureImagesBar> {
  /// 图片滑动控制器
  ScrollController scrollController = ScrollController();

  /// 数据
  final measureData = Get.find<MeasureDataController>();

  /// 全部图片list
  final measureController = Get.find<MeasureController>();

  /// 当前可滑动的范围宽度
  late double width = 0;

  /// 是否滑到最后
  bool _isEnd = false;

  /// 计算下标
  int _currentIndex = 0;

  /// 左边能否滑动
  bool get isLeftCanScroll => _currentIndex <= 0;

  /// 右边能否滑动
  bool get isRightCanScroll => _isEnd;

  /// 滑动区域的key值
  final GlobalKey globalKey = GlobalKey();

  /// 图片左划事件
  void onLeftMoveImage() async {
    if (_currentIndex > 0) {
      _currentIndex--;
      await scrollController.animateTo(
        (160 * _currentIndex).toDouble(),
        duration: const Duration(milliseconds: 300),
        curve: Curves.linear,
      );
    }
  }

  /// 图片右划事件
  void onRightMoveImage() async {
    if (!isRightCanScroll) {
      _currentIndex++;
      await scrollController.animateTo(
        (160 * _currentIndex).toDouble(),
        duration: const Duration(milliseconds: 300),
        curve: Curves.linear,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return FContainer(
      height: 120,
      margin: const EdgeInsets.symmetric(
        vertical: 15,
      ),
      child: FRow(
        children: [
          _buildImageListIcon(
            FIcons.fis_left_arrow,
            isLeftCanScroll,
            onLeftMoveImage,
          ),
          FExpanded(
            child: ScrollableImageList(
              scrollController: scrollController,
              globalKey: globalKey,
              remedicalList: measureData.remedicalList,
            ),
          ),
          _buildImageListIcon(
            FIcons.fis_right_arrow,
            isRightCanScroll,
            onRightMoveImage,
          ),
        ],
      ),
    );
  }

  @override
  void initState() {
    scrollController.addListener(
      () async {
        // 如果滑动到最右边
        if (scrollController.position.pixels ==
            scrollController.position.maxScrollExtent) {
          setState(() {
            _isEnd = true;
          });
        } else {
          setState(
            () {
              _isEnd = false;
            },
          );
        }
      },
    );

    super.initState();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    WidgetsBinding.instance.addPostFrameCallback(
      (mag) {
        width = globalKey.currentContext!.size!.width;
        setState(
          () {
            _isEnd = width >= measureData.remedicalList.length * 160;
            _currentIndex = measureController.examInfo.selectedImageIndex;
            if (_currentIndex * 160 >
                scrollController.position.maxScrollExtent) {
              _currentIndex = scrollController.position.maxScrollExtent ~/ 160;
            }
            scrollController.animateTo(
              (160 * _currentIndex).toDouble(),
              duration: const Duration(milliseconds: 300),
              curve: Curves.linear,
            );
          },
        );
      },
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

  FWidget _buildImageListIcon(
      IconData iconsData, bool isCanClick, Function onIconTap) {
    return FInkWell(
      onTap: () => onIconTap.call(),
      child: FContainer(
        width: 100,
        child: FIcon(
          iconsData,
          color: isCanClick ? Colors.grey : Colors.white,
          size: 30,
        ),
      ),
    );
  }
}

/// 可滑动的图片组，显示当前测量组的所有图片
class ScrollableImageList extends StatefulWidget implements FWidget {
  const ScrollableImageList({
    required this.scrollController,
    required this.globalKey,
    required this.remedicalList,
    Key? key,
  }) : super(key: key);

  /// 图片滑动控制器
  final ScrollController scrollController;

  final GlobalKey globalKey;

  final List<RemedicalInfoDTO> remedicalList;
  @override
  State<ScrollableImageList> createState() => _ScrollableImageListState();
}

class _ScrollableImageListState extends State<ScrollableImageList> {
  /// 当前测量的图片
  // final measureCurrentImage = Get.put(MeasureGetCurrentImage());

  /// 测量AI数据
  final measureData = Get.find<MeasureDataController>();

  MeasureController measureController = Get.find<MeasureController>();
  late final measureHandler = Get.put(MeasureHandler());

  /// 图像数据列表
  List<RemedicalInfoDTO> remedicalList = [];

  /// 当前选中的图像下标
  int selectedImageIndex = -1;

  /// 获取图片地址
  void onChangeImage(
    String imageUrl,
    String remedicalCode,
  ) async {
    if (measureData.itemCurrentImage == imageUrl) {
      return;
    }
    measureHandler.changeImageLoaded = true;
    measureHandler.imageChanged = ChangeImageInfo(
      imageUrl,
      remedicalCode,
    );
    ExamImageInfo selectedImage = measureController.examInfo.images.firstWhere(
      (element) => element.url == imageUrl,
    );
    selectedImageIndex =
        measureController.examInfo.images.indexOf(selectedImage);
    measureData.itemCurrentImage = imageUrl;
    measureController.examInfo.selectedImageIndex = selectedImageIndex;
    setState(() {});
  }

  /// 获取图像Code来更新图像
  void onChangeImageByRemedicalCode(_, e) {
    onChangeImage(findImageUrlByRemedicalCode(e), e);
  }

  /// 更新图像集合
  void onChangeImageList(_, e) {
    measureController = Get.find<MeasureController>();
    setState(() {
      remedicalList = e;
    });
  }

  String findImageUrlByRemedicalCode(String remedicalCode) {
    String imageUrl = '';
    for (var i = 0; i < measureController.examInfo.images.length; i++) {
      if (remedicalList[i].remedicalCode! == remedicalCode) {
        imageUrl = remedicalList[i].terminalImages!.imageUrl!;
        break;
      }
    }
    return imageUrl;
  }

  @override
  void initState() {
    remedicalList = widget.remedicalList;
    measureHandler.changeImageByRemedicalCode
        .addListener(onChangeImageByRemedicalCode);
    measureHandler.changeImageList.addListener(onChangeImageList);
    super.initState();
  }

  @override
  void dispose() {
    measureHandler.changeImageByRemedicalCode
        .removeListener(onChangeImageByRemedicalCode);
    measureHandler.changeImageList.removeListener(onChangeImageList);
    super.dispose();
  }

  @override
  FWidget build(BuildContext context) {
    return FContainer(
      key: ValueKey(measureData.itemCurrentImage),
      alignment: Alignment.topCenter,
      child: _buildImageList(remedicalList),
    );
  }

  FWidget _buildImageList(List<RemedicalInfoDTO> remedicalItemList) {
    return FContainer(
      key: widget.globalKey,
      child: FListView.builder(
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        controller: widget.scrollController,
        itemCount: remedicalItemList.toList().length,
        itemBuilder: (BuildContext context, int index) {
          final FWidget image = ContentImage(
            remedicalInfo: remedicalItemList[index],
            fileDataType: remedicalItemList[index].fileDataType,
            terminalImage: TerminalImage(
              previewUrl: remedicalItemList[index].terminalImages!.previewUrl,
            ),
            isMeasure: true,
            application: remedicalItemList[index].application ?? '',
            onTap: () => onChangeImage(
              remedicalItemList[index].terminalImages!.imageUrl!,
              remedicalItemList[index].remedicalCode!,
            ),
          );
          return FContainer(
            key: ValueKey(measureData.itemCurrentImage),
            width: 160,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              border: Border.all(
                width: 3,
                color: remedicalItemList[index].terminalImages!.imageUrl! !=
                        measureData.itemCurrentImage
                    ? Colors.grey
                    : Colors.blue,
              ),
            ),
            child: image,
          );
        },
      ),
    );
  }
}