huixiang_app/lib/im/chat_details_page.dart

import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'dart:ui';

import 'package:dio/dio.dart';
import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:huixiang/data/base_data.dart';
import 'package:huixiang/data/user_info.dart';
import 'package:huixiang/im/database/message.dart';
import 'package:huixiang/im/out/message.pb.dart';
import 'package:huixiang/main.dart';
import 'package:huixiang/data/im_user.dart';
import 'package:huixiang/retrofit/retrofit_api.dart';
import 'package:huixiang/view_widget/classic_header.dart';
import 'package:huixiang/view_widget/my_appbar.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:image_pickers/image_pickers.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:shared_preferences/shared_preferences.dart';

import '../../community/release_dynamic.dart';
import '../../generated/l10n.dart';
import '../../utils/font_weight.dart';
import '../utils/flutter_utils.dart';
import '../view_widget/custom_image.dart';
import '../view_widget/request_permission.dart';
import 'im_view/on_chat_message.dart';
import 'im_view/on_chat_msg_instance.dart';

class ChatDetailsPage extends StatefulWidget {
  final Map<String, dynamic>? arguments;

  ChatDetailsPage({this.arguments});

  @override
  State<StatefulWidget> createState() {
    return _ChatDetailsPage();
  }
}

class _ChatDetailsPage extends State<ChatDetailsPage>
    with WidgetsBindingObserver
    implements OnChatMessage {
  ApiService? apiService;
  List<Medias> mediaPaths = [];
  int selectCount = 9;
  int dynamicType = 0;
  final TextEditingController chatController = TextEditingController();
  bool emojiShowing = false;
  double keyboard = -1;
  bool needShowSmiley = false;
  bool needHideSmiley = false;
  bool isKeyBoardShow = false;
  bool moreShow = false;
  bool needShowMore = false;
  bool needHideMore = false;
  var commentFocus = FocusNode();
  String hintText = "输入消息内容...";
  UserInfo? userInfo;
  final OnChatMessage? _tempOnChatMessage = OnChatMsgInstance.instance.onChatMessage;
  final ScrollController scrollController = ScrollController();
  String tex = "";
  String selfUserId = "";
  ImUser? _toUser;
  late String conversation;
  List<String> imageUrl = [];

  @override
  void onMessage(txt) {
    // SmartDialog.showToast("聊天 $txt", alignment: Alignment.center);
  }

  RefreshController refreshController = RefreshController();
  List<Message> messages = [];
  int page = 0;

  loadMessageList() async {
    selfUserId = (await SharedPreferences.getInstance()).getString("userId") ?? "";
    conversation = conversationId(selfUserId, _toUser?.mid);

    ImUser? imUser = await hxDatabase.queryImUserById(conversation);
    if (imUser == null) {
      await hxDatabase.insertOrUpdateImUser(_toUser!.toJson());
    }

    // unread msg 2 read state
    await hxDatabase.readMessage(conversation);
    await refresh();

    socketClient.addCallback(_toUser?.mid ?? '', (Message message) {
      messages.insert(0, message);
      if (message.msgType == MsgType.VIDEO.value || message.msgType == MsgType.IMAGE.value) {
        imageUrl.add(message.attach);
      }
      messageShowTime().then((value) {
        refreshState();
        jumpToBottom();
      });
    });

    messageImageUrl();

    refreshState();
    jumpToBottom();
  }

  Future refresh() async {
    List<Message>? messagePage = await hxDatabase.queryUList(conversation, page: page + 1, pageSize: 10);
    debugPrint("refresh-message-list: ${messagePage?.length ?? ''}  page: $page");
    if (messagePage?.isEmpty ?? true) {
      refreshController.loadNoData();
      return;
    } else {
      refreshController.loadComplete();
      page += 1;
    }
    if (page == 1) {
      messages = messagePage!;
    } else {
      messages.addAll(messagePage!);
    }
    await messageShowTime();
    return Future.value();
  }

  /// 消息中的图片
  messageImageUrl() {
    imageUrl = messages.where((e) => e.msgType == MsgType.VIDEO.value || e.msgType == MsgType.IMAGE.value).map((e) => e.attach).toList();
  }

  Future messageShowTime() async {
    List<Message>? messagePages = await hxDatabase.queryTList(conversation);
    for (var value in messages) {
      Message? message = messagePages?.firstWhere((element) => value.id == element.id);
      value.showTime = message != null;
    }
  }

  SharedPreferences? sharedPre;

  ///查询个人信息
  queryUser() async {
    sharedPre = await SharedPreferences.getInstance();
    if (apiService == null)
      apiService = ApiService(Dio(), context: context, token: sharedPre?.getString("token"));
    if ((sharedPre?.containsKey('user') ?? false) &&
        sharedPre?.getString('user') != null &&
        sharedPre?.getString('user') != "") {
      userInfo = UserInfo.fromJson(jsonDecode(sharedPre!.getString('user')!));
      if (userInfo?.phone?.isNotEmpty ?? false) {
        setState(() {});
        return;
      }
    }
    BaseData<UserInfo>? baseData = await apiService?.queryInfo().catchError((onError) {});
    if (baseData?.isSuccess ?? false) {
      setState(() {
        userInfo = baseData!.data;
      });
      SharedPreferences.getInstance().then((value) => {
            value.setString('user', jsonEncode(baseData!.data)),
          });
    }
  }

  refreshState() {
    if (mounted) setState(() {});
  }

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

    _toUser = widget.arguments?["toUser"];
    OnChatMsgInstance.instance.onChatMessage = this;
    WidgetsBinding.instance.addObserver(this);
    commentFocus.addListener(_focusNodeListener);

    queryUser();
    loadMessageList();
  }

  void jumpToBottom() {
    Future.delayed(const Duration(milliseconds: 100), () {
      scrollController.position.jumpTo(0);
    });
  }

  void didChangeMetrics() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (!mounted) return;
      isKeyBoardShow = MediaQuery.of(context).viewInsets.bottom > 0;
      if (MediaQuery.of(context).viewInsets.bottom == 0) {
        if (isKeyBoardShow) {
          FocusScope.of(context).requestFocus(FocusNode());
          if (mounted) if (!emojiShowing) if (!moreShow)
            setState(() {
              hintText = "请输入消息内容...";
              isKeyBoardShow = false;
            });
        }
      } else {
        if (mounted)
          setState(() {
            isKeyBoardShow = true;
          });
      }
    });
    if (needShowSmiley && window.viewInsets.bottom <= 0.1) {
      needShowSmiley = false;
      setState(() {
        emojiShowing = true;
      });
    }
    if (needHideSmiley && window.viewInsets.bottom > 0.1) {
      needHideSmiley = false;
      setState(() {
        emojiShowing = false;
      });
    }
    if (needShowMore && window.viewInsets.bottom <= 0.1) {
      needShowMore = false;
      setState(() {
        moreShow = true;
      });
    }
    if (needHideMore && window.viewInsets.bottom > 0.1) {
      needHideMore = false;
      setState(() {
        moreShow = false;
      });
    }
  }

  @override
  void dispose() {
    super.dispose();
    OnChatMsgInstance.instance.onChatMessage = _tempOnChatMessage;
    WidgetsBinding.instance.removeObserver(this);
    commentFocus.removeListener(_focusNodeListener);
    scrollController.dispose();
    socketClient.removeCallback(_toUser?.mid ?? '');
  }

  void _focusNodeListener() {
    /*if (_focusNode.hasFocus || _focusNode.consumeKeyboardToken()){
			setState(() {
				smileyPadGone = true;
			});
		}*/
  }

  ///输入框点击事件
  _onTextFieldTap() {
    if (emojiShowing) {
      needHideSmiley = true;
    }
    if (moreShow) {
      needHideMore = true;
    }
  }

  ///表情包点击事件
  _onSmileyTap() {
    if (!emojiShowing && commentFocus.hasFocus && isKeyBoardShow) {
      needShowSmiley = true;
      commentFocus.unfocus();
    } else {
      setState(() {
        emojiShowing = !emojiShowing;
        isKeyBoardShow = emojiShowing;
        moreShow = false;
      });
    }
  }

  ///更多点击事件
  _onMoreTap() {
    if (!moreShow && commentFocus.hasFocus && isKeyBoardShow) {
      needShowMore = true;
      commentFocus.unfocus();
    } else {
      setState(() {
        moreShow = !moreShow;
        isKeyBoardShow = moreShow;
        emojiShowing = false;
      });
    }
  }

  ///图片/视频选择
  Future getImageOrVideo(GalleryMode galleryMode) async {
    if (selectCount == 0) return;
    mediaPaths.clear();
    List<Media> medias = await ImagePickers.pickerPaths(
      galleryMode: galleryMode,
      selectCount: (galleryMode == GalleryMode.video) ? 1 : selectCount,
      showGif: true,
      showCamera: false,
      compressSize: 500,
      uiConfig: UIConfig(
        uiThemeColor: Color(0xFFFFFFFF),
      ),
      cropConfig: CropConfig(
        enableCrop: false,
        width: 200,
        height: 200,
      ),
    );

    mediaPaths.addAll(medias.map((e) => Medias(e)).toList());
    selectCount = 9 - mediaPaths.length;

    if (mediaPaths.length > 0) {
      if (galleryMode == GalleryMode.image) {
        dynamicType = 1;
      } else {
        dynamicType = 2;
      }

      List<String> filePath = mediaPaths.map((e) => "${e.path}").toList();
      Future.forEach(filePath.toSet(), (path) async {
        String fileUrl = await qiniu.uploadFile(apiService!, path);
        socketClient.sendMessage(_toUser?.mid ?? '', fileUrl, attach: path, msgType: galleryMode == GalleryMode.image ? 2 : 4).then((value) {
          Message message = value;
          messages.insert(0, message);
          chatController.clear();
          messageShowTime().then((value) {
            refreshState();
            jumpToBottom();
          });
        });
      });
    }
    setState(() {});
  }

  ///拍照
  openCamera() async {
    if (await Permission.camera.isPermanentlyDenied) {
      showCupertinoDialog(
          context: context,
          builder: (context) {
            return RequestPermission(
              "assets/image/icon_camera_permission_tips.webp",
              S.of(context).ninxiangjiquanxianweikaiqi,
              S.of(context).weilekaipaizhaoxuanzhetouxiang,
              S.of(context).kaiqiquanxian,
              (result) async {
                if (result) {
                  await openAppSettings();
                }
              },
              heightRatioWithWidth: 0.82,
            );
          });
    } else if (await Permission.camera.isGranted) {
      if (await Permission.storage.isPermanentlyDenied) {
        showCupertinoDialog(
            context: context,
            builder: (context) {
              return RequestPermission(
                "assets/image/icon_storage_permission_tips.webp",
                "您未开启存储权限，请点击开启",
                "为了您可以在使用过程中访问您设备上的照片、媒体内容和文件，请您开启存储使用权限",
                S.of(context).kaiqiquanxian,
                (result) async {
                  if (result) {
                    await openAppSettings();
                  }
                },
                heightRatioWithWidth: 0.82,
              );
            });
      } else if (await Permission.storage.isGranted) {
        Media? medias = await ImagePickers.openCamera(
          cameraMimeType: CameraMimeType.photo,
          cropConfig: CropConfig(
            enableCrop: true,
            width: 200,
            height: 200,
          ),
          compressSize: 500,
        );
        if (medias == null) return;
        String path = medias.path ?? '';
        String fileUrl = await qiniu.uploadFile(apiService!, path);
        socketClient.sendMessage(_toUser?.mid ?? '', fileUrl, attach: path, msgType: 2).then((value) {
          Message message = value;
          messages.insert(0, message);
          chatController.clear();
          messageShowTime().then((value) {
            refreshState();
            jumpToBottom();
          });
        });
      } else {
        showCameraTipsAlertDialog(context);
        return false;
      }
    } else {
      showCameraTipsAlertDialog(context);
      return false;
    }
  }

  ///拍照权限说明
  showCameraTipsAlertDialog(context) async {
    //显示对话框
    showDialog(
      context: context,
      barrierDismissible: false,
      barrierColor: null,
      builder: (BuildContext context) {
        return Column(
          children: [
            Container(
              width: double.infinity,
              padding: EdgeInsets.all(15),
              margin: EdgeInsets.all(15),
              decoration: new BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                      padding: EdgeInsets.only(
                        right: 10.w,
                      ),
                      child: Icon(
                        Icons.add_photo_alternate_outlined,
                        color: Colors.black,
                        size: 22,
                      )),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          "相机权限使用说明",
                          style: TextStyle(
                            fontSize: 18.sp,
                            fontWeight: MyFontWeight.regular,
                            color: Colors.black,
                          ),
                        ),
                        SizedBox(
                          height: 3.h,
                        ),
                        Text(
                          "实现您扫码、拍摄等功能。",
                          style: TextStyle(
                            fontSize: 13.sp,
                            height: 1.2,
                            fontWeight: MyFontWeight.regular,
                            color: Colors.black,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            )
          ],
          mainAxisSize: MainAxisSize.min,
        );
      },
    );
    await Permission.camera.request();
    Navigator.of(context).pop();
    if (await Permission.camera.isGranted) {
      openCamera();
    }
  }

  @override
  Widget build(BuildContext context) {
    double h = MediaQuery.of(context).viewInsets.bottom;
    if (h > 0) {
      jumpToBottom();
      if (keyboard < h) {
        keyboard = h;
        // setState(() {});
      }
    }
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
        setState(() {
          needShowSmiley = false;
          emojiShowing = false;
          isKeyBoardShow = emojiShowing;
          moreShow = false;
          isKeyBoardShow = moreShow;
        });
      },
      child: Scaffold(
        // resizeToAvoidBottomInset: false,
        backgroundColor: Color(0xFFF6F6F6),
        appBar: MyAppBar(
          title: _toUser?.nickname,
          titleColor: Color(0xFF0D0D0D),
          titleSize: 17.sp,
          leading: true,
          leadingColor: Colors.black,
          action: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () async {
              await Navigator.of(context).pushNamed('/router/chat_setting',
                  arguments: {"userId": _toUser?.mid});
              page = 0;
              refresh().then((value) {
                refreshState();
              });
            },
            child: Container(
              alignment: Alignment.center,
              child: Icon(
                Icons.more_horiz,
                color: Colors.black,
                size: 30,
              ),
            ),
          ),
        ),
        body: Container(
          child: Column(
            children: [
              Expanded(
                child: SmartRefresher(
                  enablePullDown: false,
                  enablePullUp: true,
                  header: MyHeader(),
                  footer: CustomFooter(
                    loadStyle: LoadStyle.ShowWhenLoading,
                    builder: (BuildContext context, LoadStatus? mode) {
                      return SizedBox();
                    },
                  ),
                  reverse: true,
                  scrollController: scrollController,
                  controller: refreshController,
                  onRefresh: () {
                    debugPrint("");
                  },
                  onLoading: () {
                    refresh().then((value) {
                      refreshState();
                    });
                  },
                  child: chatDetailsList(),
                ),
                flex: 1,
              ),
              input(),
            ],
          ),
        ),
      ),
    );
  }

  ///聊天列表
  Widget chatDetailsList() {
    return ListView.builder(
      itemCount: messages.length,
      reverse: true,
      padding: EdgeInsets.zero,
      itemBuilder: (context, position) {
        return GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            setState(() {
              if (emojiShowing) {
                emojiShowing = !emojiShowing;
              }
              if (moreShow) {
                moreShow = !moreShow;
              }
            });
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: chatDetailsItem(position),
        );
      },
    );
  }

  Widget chatDetailsItem(position) {
    bool isSelf = messages[position].fromId == selfUserId;
    bool isText = messages[position].msgType == 1;
    bool isImage = messages[position].msgType == 2;
    GlobalKey _buttonKey = GlobalKey();
    return Container(
      padding: EdgeInsets.only(
        top: 16,
        bottom: 16,
      ),
      child: Column(
        children: [
          if (messages[position].showTime)
            Text(
              // position == messages.length-1
              //     ?
              AppUtils.milliTimeFormatter(DateTime.fromMillisecondsSinceEpoch(
                  int.parse(messages[position].time)))
              // : AppUtils.getTimeDisplay(
              //     DateTime.fromMillisecondsSinceEpoch(
              //         int.parse(messages[position].time)),
              //     DateTime.fromMillisecondsSinceEpoch(
              //         int.parse(messages[position+1].time)))
              ,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Color(0xFFA29E9E),
                fontSize: 10.sp,
                fontWeight: MyFontWeight.regular,
              ),
            ),
          // if (messages.indexOf(message) == (messages.length - 1))
          //   Padding(
          //     padding: EdgeInsets.only(top: 10.h, bottom: 24.h),
          //     child: Text(
          //       "在对方未回复或关注你之前，你只能发送一条信息",
          //       textAlign: TextAlign.center,
          //       style: TextStyle(
          //         color: Color(0xFFA29E9E),
          //         fontSize: 10.sp,
          //         fontWeight: MyFontWeight.regular,
          //       ),
          //     ),
          //   ),
          // if (messages.indexOf(message) == (messages.length - 1))
          //   SizedBox(
          //     height: 16.h,
          //   ),

          /// not self
          if (!isSelf && isText)
            SizedBox(
              height: 10.h,
            ),
          if (!isSelf && isText)
            Padding(
              padding: EdgeInsets.only(left: 17.w, right: 39.w),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      Navigator.of(context).pushNamed(
                        '/router/personal_page',
                        arguments: {
                          "memberId": _toUser?.mid ?? "",
                          "inletType": 1
                        },
                      );
                    },
                    child: MImage(
                      _toUser?.avatar ?? '',
                      isCircle: true,
                      height: 44.h,
                      width: 44.h,
                      fit: BoxFit.cover,
                      errorSrc: "assets/image/default_1.webp",
                      fadeSrc: "assets/image/default_1.webp",
                    ),
                  ),
                  SizedBox(
                    width: 12.w,
                  ),
                  Expanded(
                    child: Container(
                      alignment: Alignment.centerLeft,
                      child: GestureDetector(
                        onLongPress: () {
                          showMessageMenu(context, _buttonKey, messages[position]);
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            color: Color(0xFFFFFFFF),
                            boxShadow: [
                              BoxShadow(
                                color: Color(0xFFA8A3A3).withAlpha(12),
                                offset: Offset(0, 4),
                                blurRadius: 4,
                                spreadRadius: 0,
                              ),
                            ],
                          ),
                          key: _buttonKey,
                          padding: EdgeInsets.symmetric(
                            vertical: 8.h,
                            horizontal: 12.w,
                          ),
                          child: Text(
                            tex = messages[position].content,
                            textAlign: TextAlign.left,
                            style: TextStyle(
                              height: 1.2.h,
                              color: Color(0XFF0D0D0D),
                              fontSize: 17.sp,
                              fontWeight: MyFontWeight.medium,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),

          /// self
          if (isSelf && isText)
            SizedBox(
              height: 10.h,
            ),
          if (isSelf && isText)
            Padding(
              padding: EdgeInsets.only(left: 36.w, right: 16.w),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  if (messages[position].state == 3)
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(100),
                        color: Color(0xFFFF441A),
                      ),
                      width: 20,
                      height: 20,
                      alignment: Alignment.center,
                      child: Text(
                        "!",
                        textAlign: TextAlign.left,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 17.sp,
                          fontWeight: MyFontWeight.regular,
                        ),
                      ),
                    ),
                  if (messages[position].state == 3)
                    SizedBox(
                      width: 12.w,
                    ),
                  Expanded(
                    child: Container(
                        alignment: Alignment.centerRight,
                        child: InkWell(
                          onLongPress: () {
                            showMessageMenu(context, _buttonKey, messages[position]);
                          },
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(6),
                              color: Color(0xFF32A060),
                              boxShadow: [
                                BoxShadow(
                                  color: Color(0xFFA8A3A3).withAlpha(12),
                                  offset: Offset(0, 4),
                                  blurRadius: 4,
                                  spreadRadius: 0,
                                ),
                              ],
                            ),
                            key: _buttonKey,
                            padding: EdgeInsets.symmetric(
                              vertical: 8.h,
                              horizontal: 12.w,
                            ),
                            child: Text(
                              tex = messages[position].content,
                              textAlign: TextAlign.left,
                              style: TextStyle(
                                height: 1.2.h,
                                color: Colors.white,
                                fontSize: 17.sp,
                                fontWeight: MyFontWeight.medium,
                              ),
                            ),
                          ),
                        ),
                    ),
                  ),
                  SizedBox(
                    width: 12.w,
                  ),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      Navigator.of(context).pushNamed(
                        '/router/personal_page',
                        arguments: {
                          "memberId": "0",
                          "inletType": 1,
                        },
                      );
                    },
                    child: MImage(
                      userInfo?.headimg ?? "",
                      isCircle: true,
                      height: 44.h,
                      width: 44.h,
                      fit: BoxFit.cover,
                      errorSrc: "assets/image/default_1.webp",
                      fadeSrc: "assets/image/default_1.webp",
                    ),
                  ),
                ],
              ),
            ),

          /// not self image 图片
          if (!isSelf && isImage)
            Padding(
              padding: EdgeInsets.only(left: 17.w, right: 39.w, top: 20.h),
              child: Row(
                children: [
                  MImage(
                    userInfo?.headimg ?? "",
                    isCircle: true,
                    width: 44,
                    height: 44,
                    fit: BoxFit.cover,
                    errorSrc: "assets/image/default_1.webp",
                    fadeSrc: "assets/image/default_1.webp",
                  ),
                  SizedBox(
                    width: 12.w,
                  ),
                  GestureDetector(
                    onLongPress: () {
                      showMessageMenu(context, _buttonKey, messages[position]);
                    },
                    onTap: () {
                      if (imageUrl.contains(messages[position].attach)) {
                        ImagePickers.previewImages(imageUrl, imageUrl.indexOf(messages[position].attach));
                      }
                    },
                    child: FutureBuilder(
                      future: fetchImageSize(messages[position]),
                      key: _buttonKey,
                      builder: (BuildContext context, AsyncSnapshot snapshot) {
                        if (snapshot.connectionState ==
                                ConnectionState.waiting ||
                            snapshot.hasError) {
                          return Image.file(
                            File(messages[position].attach),
                            width: 180.w,
                            height: 200.h,
                            alignment: Alignment.centerLeft,
                            fit: BoxFit.contain,
                          );
                        } else {
                          return Image.file(
                            File(messages[position].attach),
                            width: snapshot.data.width,
                            height: snapshot.data.height,
                            alignment: Alignment.centerLeft,
                            fit: BoxFit.cover,
                          );
                        }
                      },
                    ),
                  ),
                  Spacer(),
                ],
              ),
            ),

          /// self image 图片
          if (isSelf && isImage)
            Padding(
              padding: EdgeInsets.only(
                left: 39.w,
                right: 17.w,
                top: 20.h,
              ),
              child: Row(
                children: [
                  Spacer(),
                  GestureDetector(
                    onLongPress: () {
                      showMessageMenu(context, _buttonKey, messages[position]);
                    },
                    onTap: () {
                      debugPrint("imageUrl: ${imageUrl}");
                      if (imageUrl.contains(messages[position].attach)) {
                        ImagePickers.previewImages(imageUrl, imageUrl.indexOf(messages[position].attach));
                      }
                    },
                    child: FutureBuilder (
                      future: fetchImageSize(messages[position]),
                      key: _buttonKey,
                      builder: (BuildContext context, AsyncSnapshot snapshot) {
                        if (snapshot.connectionState == ConnectionState.waiting || snapshot.hasError) {
                          return Image.file(
                            File(messages[position].attach),
                            width: 180.w,
                            height: 200.h,
                            alignment: Alignment.centerRight,
                            fit: BoxFit.contain,
                          );
                        } else {
                          return Image.file(
                            File(messages[position].attach),
                            width: snapshot.data.width,
                            height: snapshot.data.height,
                            alignment: Alignment.centerRight,
                            fit: BoxFit.contain,
                          );
                        }
                      },
                    ),
                  ),
                  SizedBox(
                    width: 12.w,
                  ),
                  MImage(
                    userInfo?.headimg ?? "",
                    isCircle: true,
                    width: 44,
                    height: 44,
                    fit: BoxFit.cover,
                    errorSrc: "assets/image/default_1.webp",
                    fadeSrc: "assets/image/default_1.webp",
                  ),
                ],
              ),
            ),

          /// no reply long time
          // if (messages.indexOf(message) == 0)
          //   Padding(
          //     padding: EdgeInsets.only(left: 17.w, right: 17.w, top: 24.h),
          //     child: Text(
          //       "由于对方没有回复你，你只能发送一条消息，需要对方关注或回复后才能恢复正常聊天",
          //       textAlign: TextAlign.center,
          //       style: TextStyle(
          //         color: Color(0xFFA29E9E),
          //         fontSize: 10.sp,
          //         fontWeight: MyFontWeight.regular,
          //       ),
          //     ),
          //   ),
        ],
      ),
    );
  }

  /// 显示消息菜单
  showMessageMenu(context, _buttonKey, message) {
    RenderBox renderBox = _buttonKey.currentContext.findRenderObject() as RenderBox;
    Offset buttonPosition = renderBox.localToGlobal(Offset.zero);
    Size buttonSize = renderBox.size;
    showMenu(
      context: context, ///去除阴影
      elevation: 0,
      color: Colors.transparent,
      position: RelativeRect.fromLTRB(
        buttonPosition.dx + (buttonSize.width - 180.w) / 2, // 居中对齐
        buttonPosition.dy - 68,
        buttonPosition.dx + buttonSize.width,
        buttonPosition.dy,
      ),
      /// 设置弹出菜单的显示位置
      items: [
        PopupMenuItem(
          value: 1,
          padding: EdgeInsets.zero,
          child: Stack(
            alignment: Alignment.bottomCenter,
            children: [
              Container(
                padding: EdgeInsets.only(bottom: 13.h),
                child: Container(
                  width: 180.w,
                  decoration: BoxDecoration(
                    color: Color(0xFF2A2A2A),
                    borderRadius: BorderRadius.circular(6),
                  ),
                  padding: EdgeInsets.symmetric(
                    horizontal: 32.w,
                    vertical: 7.5.h,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            this.copy(message.content);
                            Navigator.pop(context);
                          });
                        },
                        child: Column(
                          children: [
                            Image.asset(
                              "assets/image/icon_chat_copy.webp",
                              height: 16,
                              width: 16,
                            ),
                            SizedBox(
                              height: 2.h,
                            ),
                            Text(
                              "复制",
                              textAlign:
                              TextAlign.center,
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 12.sp,
                                fontWeight: MyFontWeight
                                    .regular,
                              ),
                            ),
                          ],
                        ),
                      ),
                      GestureDetector(
                        onTap: () async {
                          await hxDatabase.deleteByMsgId("${message.id}");
                          messages.remove(message);
                          Navigator.pop(context);
                          if (mounted) {
                            setState(() {});
                          }
                        },
                        child: Column(
                          children: [
                            Image.asset(
                              "assets/image/icon_chat_delete.webp",
                              height: 16,
                              width: 16,
                            ),
                            SizedBox(
                              height: 2.h,
                            ),
                            Text(
                              S.of(context).shanchu,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 12.sp,
                                fontWeight: MyFontWeight.regular,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Image.asset(
                "assets/image/icon_copy_j.webp",
                height: 17,
                width: 17,
              ),
            ],
          ),
        ),
      ],
    );
  }

  Future<Size> fetchImageSize(Message message) async {
    String imageLocalPath = message.attach;
    String imageUrl = message.content;
    debugPrint("$imageLocalPath");
    debugPrint("$imageUrl");

    File file = File(imageLocalPath);
    if (!(await file.exists())) {
      await qiniu.downloadFile(imageUrl, savePath: imageLocalPath);
    }

    Size size = Size.zero;

    if (sharedPre != null) {
      String? sizeStr = sharedPre!.getString(imageLocalPath);
      if (sizeStr != null && sizeStr != "") {
        Map<String, dynamic> sizeMap = jsonDecode(sizeStr);
        size = Size(sizeMap["width"], sizeMap["height"]);
        if (size != Size.zero) {
          return size;
        }
      }
    }

    Completer<Size> completer = Completer();
    Image.file(file)
        .image
        .resolve(ImageConfiguration())
        .addListener(ImageStreamListener((image, synchronousCall) {
      size = Size((image.image.width).toDouble(),
          (image.image.height).toDouble());
      size = resizeImage(size);
      Map<String, double> sizeMap = {
        "width": size.width,
        "height": size.height,
      };
      sharedPre?.setString(imageLocalPath, jsonEncode(sizeMap));
      completer.complete(size);
    }));
    return completer.future;
  }

  resizeImage(Size size) {
    if (size.width > 180 || size.height > 200) {
      if (size.width > size.height) {
        int height = size.height ~/ (size.width ~/ 180);
        size = Size(180, height.toDouble());
      } else {
        int width = size.width ~/ (size.height ~/ 200);
        size = Size(width.toDouble(), 200);
      }
    }
    return size;
  }

  ///富文本输入框
  Widget input() {
    return Container(
      color: Color(0xFFFDFCFC),
      padding: EdgeInsets.only(top: 14.h, bottom: 15.h),
      child: Column(
        children: [
          ///输入框
          Row(
            children: [
              Expanded(
                flex: 1,
                child: Container(
                  margin: EdgeInsets.only(
                    left: 20.w,
                  ),
                  decoration: BoxDecoration(
                    color: Color(0xFFF6F6F6),
                    borderRadius: BorderRadius.circular(6),
                  ),
                  child: Container(
                    margin: EdgeInsets.only(left: 17.w),
                    alignment: Alignment.topLeft,
                    child: TextField(
                      textInputAction: TextInputAction.send,
                      onTap: () {
                        moreShow = false;
                        _onTextFieldTap();
                      },
                      onEditingComplete: () {
                        var commentText = chatController.text;
                        if (commentText.trim() == "") {
                          return;
                        }
                        socketClient
                            .sendMessage(_toUser?.mid ?? '', commentText)
                            .then((value) {
                          Message message = value;
                          messages.insert(0, message);
                          chatController.clear();
                          messageShowTime().then((value) {
                            refreshState();
                            jumpToBottom();
                          });
                        });
                      },
                      maxLines: 8,
                      minLines: 1,
                      focusNode: commentFocus,
                      controller: chatController,
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: hintText,
                        hintStyle: TextStyle(
                          fontSize: 14.sp,
                          color: Color(0xFF868686),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  _onSmileyTap();
                  jumpToBottom();
                },
                child: Container(
                  padding: EdgeInsets.only(left: 15.w, right: 8.w),
                  child: Image.asset(
                    "assets/image/icon_chat_emo.webp",
                    height: 26.h,
                    width: 26.h,
                  ),
                ),
              ),
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  _onMoreTap();
                  jumpToBottom();
                },
                child: Container(
                  padding: EdgeInsets.only(left: 8.w, right: 19.w),
                  child: Image.asset(
                    "assets/image/chat_more.webp",
                    height: 26.h,
                    width: 26.h,
                  ),
                ),
              ),
            ],
          ),
          SizedBox(
            height: 16.h,
          ),

          ///表情
          Offstage(
            offstage: !emojiShowing,
            child: SizedBox(
              height: keyboard == -1 ? 270 : keyboard,
              width: MediaQuery.of(context).size.width,
              child: EmojiPicker(
                textEditingController: chatController,
                config: Config(
                  emojiViewConfig: EmojiViewConfig(
                    columns: 7,
                    emojiSizeMax: 32 * (Platform.isIOS ? 1.10 : 1.0),
                    verticalSpacing: 0,
                    horizontalSpacing: 0,
                    backgroundColor: const Color(0xFFF2F2F2),
                    gridPadding: EdgeInsets.zero,
                    recentsLimit: 28,
                    replaceEmojiOnLimitExceed: false,
                    noRecents: Text(
                      "最近使用",
                      style: TextStyle(fontSize: 20, color: Colors.black26),
                      textAlign: TextAlign.center,
                    ),
                    loadingIndicator: const SizedBox.shrink(),
                    buttonMode: ButtonMode.MATERIAL,
                  ),
                  skinToneConfig: SkinToneConfig(
                    enabled: true,
                    dialogBackgroundColor: Colors.white,
                    indicatorColor: Colors.grey,
                  ),
                  categoryViewConfig: CategoryViewConfig(
                    initCategory: Category.RECENT,
                    iconColor: Colors.grey,
                    iconColorSelected: Colors.blue,
                    backspaceColor: Colors.blue,
                    categoryIcons: const CategoryIcons(),
                    tabIndicatorAnimDuration: Duration(milliseconds: 0),
                  ),
                  checkPlatformCompatibility: true,
                ),
              ),
            ),
          ),

          ///更多
          Offstage(
            offstage: !moreShow,
            child: Container(
              height: keyboard == -1 ? 167.h : keyboard,
              child: Column(
                children: [
                  Container(
                    width: double.infinity,
                    height: 1.h,
                    color: Color(0xFFF7F7F7),
                    margin: EdgeInsets.only(bottom: 10.h),
                  ),
                  Row(
                    children: [
                      GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          openCamera();
                        },
                        child: Column(
                          children: [
                            Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(6),
                                color: Color(0xFFFFFFFF),
                                boxShadow: [
                                  BoxShadow(
                                    color: Color(0xFFD5D5D5).withAlpha(25),
                                    offset: Offset(4, 2),
                                    blurRadius: 4,
                                    spreadRadius: 0,
                                  )
                                ],
                              ),
                              margin: EdgeInsets.only(right: 15.w, left: 14.w),
                              padding: EdgeInsets.all(12),
                              child: Image.asset(
                                "assets/image/icon_chat_camera.webp",
                                height: 24,
                                width: 24,
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.only(top: 8.h),
                              child: Text(
                                "拍照",
                                style: TextStyle(
                                  fontSize: 12.sp,
                                  color: Color(0xFFA29E9E),
                                  fontWeight: MyFontWeight.regular,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          getImageOrVideo(GalleryMode.image);
                        },
                        child: Column(
                          children: [
                            Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(6),
                                color: Color(0xFFFFFFFF),
                                boxShadow: [
                                  BoxShadow(
                                    color: Color(0xFFD5D5D5).withAlpha(25),
                                    offset: Offset(4, 2),
                                    blurRadius: 4,
                                    spreadRadius: 0,
                                  )
                                ],
                              ),
                              padding: EdgeInsets.all(12),
                              child: Image.asset(
                                "assets/image/icon_chat_photo.webp",
                                height: 24,
                                width: 24,
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.only(top: 8.h),
                              child: Text(
                                "相册",
                                style: TextStyle(
                                  fontSize: 12.sp,
                                  color: Color(0xFFA29E9E),
                                  fontWeight: MyFontWeight.regular,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 复制文本
  copy(String tex) {
    debugPrint(tex);
    Clipboard.setData(ClipboardData(text: tex));
  }
}