fis_lib_report/lib/pages/components/input_image.dart

import 'package:fis_lib_report/converts/alignment_convert.dart';
import 'package:fis_lib_report/converts/margin_convert.dart';
import 'package:fis_lib_report/converts/pt_to_px_converter.dart';
import 'package:fis_lib_report/pages/helpler.dart';
import 'package:fis_lib_report/report/inputImage.dart';
import 'package:fis_lib_report/report/inputImageList.dart';
import 'package:fis_lib_report/report_info/input_image_info.dart';
import 'package:fis_lib_report/report_info/input_image_list_info.dart';
import 'package:fis_lib_report/report_info/report_info.dart';
import 'package:fis_ui/business/vid_img_view/index.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class RInputImage extends StatefulWidget {
  final InputImage inputImage;

  RInputImage(this.inputImage);
  @override
  State<StatefulWidget> createState() {
    return _RInputImageState();
  }
}

class _RInputImageState extends State<RInputImage> {
  InputImageInfo? inputImageInfo;
  _RInputImageState();
  Color _borderColor = Colors.grey;
  bool _isSelected = false;
  bool _hasImageBorder = false;
  String _imageUrl = '';

  Widget _child = const Text('请点击此处后选择图片');

  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _initDatas();

    return SizedBox(
      width: PtToPxConverter.ptToPx(widget.inputImage.imageWidth!) + 6,
      child: MouseRegion(
        cursor: SystemMouseCursors.click,
        child: GestureDetector(
          onTap: () {
            if (_isSelected) {
              setState(() {
                _borderColor = Colors.grey;
                _isSelected = false;
                _hasImageBorder = false;
                if (inputImageInfo != null) {
                  inputImageInfo!.isSelected = false;
                }
              });
            } else {
              setState(() {
                _borderColor = const Color.fromARGB(255, 64, 159, 248);
                _isSelected = true;
                _hasImageBorder = true;
                if (inputImageInfo != null) {
                  inputImageInfo!.isSelected = true;
                }
              });
            }
          },
          child: Row(
            mainAxisAlignment: AlignmentConvert.horizontalToMainConvert(
                widget.inputImage.horizontalAlignment),
            children: [
              Container(
                padding: const EdgeInsets.all(3),
                height:
                    PtToPxConverter.ptToPx(widget.inputImage.imageHeight!) + 6,
                width:
                    PtToPxConverter.ptToPx(widget.inputImage.imageWidth!) + 6,
                alignment: Alignment.center,
                margin: MarginConvert.marginConvert(widget.inputImage.margin),
                decoration: BoxDecoration(
                    border: _hasImageBorder
                        ? Border.all(
                            width: 0.5,
                            color: _borderColor,
                          )
                        : null,
                    color: Colors.transparent),
                child: _child,
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _initDatas() {
    _hasImageBorder = widget.inputImage.hasImageBorder!;

    final element = ReportInfo.instance.getElementInfo(widget.inputImage);
    if (element != null) {
      inputImageInfo = element as InputImageInfo;
      inputImageInfo!.onSelect!.addListener((sender, e) {
        setState(() {
          if (_imageUrl != e) {
            _imageUrl = e;
            _child = _getChild();
          } else {
            _imageUrl = '';
            _child = const Text('请点击此处后选择图片');
          }
        });
      });
    }
  }

  Widget _getChild() {
    if (_imageUrl.isNotEmpty) {
      return VidImageView(
        url: _imageUrl,
        fit: BoxFit.fill,
        height: PtToPxConverter.ptToPx(widget.inputImage.imageHeight!),
        width: PtToPxConverter.ptToPx(widget.inputImage.imageWidth!),
      );
    }
    return const Text('请点击此处后选择图片');
  }
}