<template>
  <view class="IMmsgContent-container">
    <u-navbar :title="ImItemInfo.username" :autoBack="true"> </u-navbar>
    <view class="tui-chat-content" id="tui-chat-content">
      <!-- <tui-loadmore
        v-if="loadding"
        :index="3"
        type="primary"
        text=" "
      ></tui-loadmore> -->
      <view>
        <view class="tui-label">对方已通过您的好友请求</view>
        <view v-for="(item, index) of msgList" :key="index">
          <view class="tui-chat-center">{{
            formatTime(item.message_time)
          }}</view>
          <view class="tui-chat-right" v-if="item.message_kind == 1">
            <view
              v-if="item.msg.type == 'text' || item.msg.type == 'user'"
              class="tui-chatbox tui-chatbox-right"
            >
              <u-parse
                :content="item.msg.content.text"
                class="parse-content"
              ></u-parse>
            </view>
            <view
              v-if="item.msg.type == 'img'"
              class="tui-chatbox tui-chatbox-right img"
            >
              <image
                :src="item.msg.content.url"
                :style="{
                  width: item.msg.content.w,
                  height: item.msg.content.h,
                }"
                @click="showImgPreview(item)"
                class=""
              ></image>
            </view>
            <view
              class="tui-flex-center tui-flex-end"
              v-if="item.msg.type == 'voice'"
            >
              <view
                class="tui-chatbox tui-chatbox-right tui-chat-flex tui-ml tui-flex-reverse"
                @click="playVoice(item)"
              >
                <image
                  :src="
                    isPlayVoice && item.msg.id == playMsgid
                      ? '/static/images/chat/voice.gif'
                      : '/static/images/chat/voice.png'
                  "
                  class="tui-chat-voice tui-rotate tui-ml"
                ></image>
                <view :style="{ width: calculateVoiceWidth(item.mp3Time) }"
                  >{{ item.mp3Time }}"</view
                >
              </view>
            </view>
            <image
              :src="item.msg.userinfo.face"
              class="tui-user-pic tui-left"
            ></image>
          </view>
          <view class="tui-chat-left" v-if="item.message_kind == 2">
            <image
              :src="item.msg.userinfo.face"
              class="tui-user-pic tui-right"
            ></image>
            <view class="tui-flex-center" v-if="item.msg.type == 'voice'">
              <view
                class="tui-chatbox tui-chatbox-left tui-chat-flex tui-mr"
                @click="playVoice(item)"
              >
                <image
                  :src="
                    isPlayVoice && item.msg.id == playMsgid
                      ? '/static/images/chat/voice.gif'
                      : '/static/images/chat/voice.png'
                  "
                  class="tui-chat-voice tui-mr"
                ></image>
                <view :style="{ width: calculateVoiceWidth(item.mp3Time) }"
                  >{{ item.mp3Time }}"</view
                >
              </view>
              <!-- <tui-badge :dot="true" type="danger"></tui-badge> -->
            </view>
            <view
              v-if="item.msg.type == 'text'"
              class="tui-chatbox tui-chatbox-left"
            >
              <u-parse :content="item.msg.content.text"></u-parse>
            </view>
            <view
              v-if="item.msg.type == 'img'"
              class="tui-chatbox tui-chatbox-right"
            >
              <!-- <image
                :src="formatImg(item)"
                @click="showImgPreview(item)"
                class="tui-user-pic tui-left img"
              ></image> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    <t-chat-bar
      @sendMsg="chatBarSendMsg"
      paddingBottom
      @uploadPictures="uploadPictures"
      @photograph="photograph"
      @uploadVideo="selectVideo"
      :isHideKeyBoard="isHideKeyBoard"
    ></t-chat-bar>
  </view>
</template>

<script>
import { GetImConfig, GetImMsgList, GetSendMsgAdd } from "../../api/im";
import { UploadFilePromise } from "../../api/upload";
import { renderTime } from "../../utils/date";
import tChatBar from "@/components/t-chat-bar/t-chat-bar";
import tuiBadge from "@/components/tui-badge/tui-badge.vue";
import emoji from "../../static/im/emojiData.js";
import { mapState } from "vuex";
export default {
  components: {
    tChatBar,
    tuiBadge,
  },
  data() {
    return {
      loadding: false,
      show: true,
      bottom: 0,
      myUserId: 2,
      chatList: [
        {
          type: 1, //1-文字 2-图片 3-语音，4-时间 5-提醒 ...
          userId: 1, //用户标识 不一定是userid
          text: "",
          src: "",
          read: false,
          success: false,
        },
      ],
      ImItemInfo: {
        friend_id: 0,
      },
      msgList: [],
      msgImgList: [],
      pcEmoji: [],
      pcEmojiObj: {},
      //播放语音相关参数
      AUDIO: uni.createInnerAudioContext(),
      // 录音
      RECORDER: uni.getRecorderManager(),
      playMsgid: "",
      isPlayVoice: false,
      sockrt: {},
      chattype: "user",
      isHideKeyBoard: false,
      emojiPath: "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/",
    };
  },
  onLoad: function (options) {
    if (options.item) {
      this.ImItemInfo = JSON.parse(options.item);
      console.log(this.ImItemInfo);
    }
    this.faceList = emoji.imgArr[1].emojiList;
  },
  onShow() {
    this.socketServer();
    this.getPcEmoji();
    // this.getImConfig();
    this.getImMsgList();
  },
  computed: {
    ...mapState("user", ["uid", "userInfo"]),
  },
  methods: {
    uploadPictures() {
      this.isHideKeyBoard = true;
      this.selectPhotoOrTakeShot("album");
      setTimeout(() => {
        this.isHideKeyBoard = false;
      }, 100);
    },
    photograph() {
      this.isHideKeyBoard = true;
      this.selectPhotoOrTakeShot("camera");
      setTimeout(() => {
        this.isHideKeyBoard = false;
      }, 100);
    },
    selectVideo() {
      this.isHideKeyBoard = true;
      this.upLoadVideo();
      setTimeout(() => {
        this.isHideKeyBoard = false;
      }, 100);
    },
    upLoadVideo() {
      uni.chooseVideo({
        count: 1,
        sourceType: ["camera", "album"],
        success: async (res) => {
          uni.showLoading({
            title: "视频上传中..",
            mask: true,
          });

          let result = await UploadFilePromise(res.tempFilePath);
          if (result && result.status == 200) {
            let msg = {
              url: res.tempFilePath,
              w: result.data.width,
              h: result.data.height,
            };

            msg.url = result.data.url;
            this.sendMsg(msg, "video");
          }

          uni.hideLoading();
        },
      });
    },
    selectPhotoOrTakeShot(type) {
      let that = this;
      uni.chooseImage({
        sourceType: [type],
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          for (let i = 0; i < res.tempFilePaths.length; i++) {
            uni.getImageInfo({
              src: res.tempFilePaths[i],
              success: async (image) => {
                var msg = {
                  url: res.tempFilePaths[i],
                  w: image.width,
                  h: image.height,
                };

                console.log(res);

                let result = await UploadFilePromise(res.tempFilePaths[i], {
                  user: "test",
                });
                if (result && result.status == 200) {
                  msg.url = result.data.url;
                  this.sendMsg(msg, "img");
                }
              },
            });
          }
        },
      });
    },
    // 添加文字消息到列表
    addTextMsg(msg) {
      console.info("addTextMsg");
      console.info(msg);
      this.msgList.push(msg);
    },
    // 添加语音消息到列表
    addVoiceMsg(msg) {
      this.msgList.push(msg);
    },
    // 添加图片消息到列表
    addImgMsg(msg) {
      msg.msg.content = this.setPicSize(msg.msg.content);
      this.msgImgList.push(msg.msg.content.url);
      this.msgList.push(msg);
    },
    addRedEnvelopeMsg(msg) {
      this.msgList.push(msg);
    },
    // 添加系统文字消息到列表
    addSystemTextMsg(msg) {
      this.msgList.push(msg);
    },
    // 添加系统红包消息到列表
    addSystemRedEnvelopeMsg(msg) {
      this.msgList.push(msg);
    },
    screened(msg) {
      if (msg.type == "system") {
        // 系统消息
        switch (msg.msg.type) {
          case "text":
            this.addSystemTextMsg(msg);
            break;
          case "redEnvelope":
            this.addSystemRedEnvelopeMsg(msg);
            break;
        }
      } else if (msg.type == "user" || msg.type == "friend") {
        // 用户消息
        switch (msg.msg.type) {
          case "text":
            this.addTextMsg(msg);
            break;
          case "voice":
            this.addVoiceMsg(msg);
            break;
          case "img":
            this.addImgMsg(msg);
            break;
          case "video":
            this.addTextMsg(msg);
            break;
          case "redEnvelope":
            this.addRedEnvelopeMsg(msg);
            break;
        }
        // console.log('用户消息');
        //非自己的消息震动
        // if (msg.msg.userinfo.uid != this.myuid) {
        //   // console.log('振动');
        //   uni.vibrateLong();
        // }
      }
    },
    socketServer() {
      console.log(this.userInfo.im.node_site_url);

      this.sockrt = new this.$Socket({
        url: this.userInfo.im.node_site_url,
        maxInterValCount: 5,
        interValTime: 2000,
        onClose: (res) => {
          console.log("sockrt关闭");
        },
        onOpen: (res) => {
          console.log("sockrt连接成功");
        },
        onMsg: (res) => {
          console.log("onMsg", res);
        },
      });

      this.sockrt.connectserver(this.userInfo.im);
    },
    processTimeString(timeStr) {
      const parts = timeStr.split(":");

      // If there's no colon or format is invalid, return as-is
      if (parts.length !== 2) return timeStr;

      const minutes = parseInt(parts[0], 10);
      const seconds = parseInt(parts[1], 10);

      // Case 1: "00:60" or "01:00" → return "60"
      if (
        (minutes === 0 && seconds === 60) ||
        (minutes === 1 && seconds === 0)
      ) {
        return "60";
      }

      // Case 2: "00:XX" where XX < 60 → return "XX"
      if (minutes === 0 && seconds < 60) {
        return parts[1]; // Return the original seconds part to preserve leading zero
      }

      // For all other cases, return the original string
      return timeStr;
    },
    playVoice(item) {
      this.playMsgid = item.msg.id;

      if (this.isPlayVoice == true) {
        this.AUDIO.stop();
        this.isPlayVoice = false;
        return;
      }

      if (item.message_length) {
        this.AUDIO.src = item.message_content;
      } else {
        this.AUDIO.src = item.msg.content.url;
      }
      this.$nextTick(function () {
        this.isPlayVoice = true;
        this.AUDIO.play();
      });

      this.$nextTick(() => {
        this.AUDIO.onEnded((res) => {
          this.isPlayVoice = false;
        });
      });
    },
    im_decode(content) {
      let that = this;

      //支持的html标签
      var html = function (end) {
        return new RegExp(
          "\\n*\\[" +
            (end || "") +
            "(code|pre|div|span|p|table|thead|th|tbody|tr|td|ul|li|ol|li|dl|dt|dd|h2|h3|h4|h5)([\\s\\S]*?)\\]\\n*",
          "g"
        );
      };
      content = (content || "")
        .replace(/&(?!#?[a-zA-Z0-9]+;)/g, "&amp;")
        //.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;') //XSS
        .replace(/@(\S+)(\s+?|$)/g, '@<a href="javascript:;">$1</a>$2') //转义@

        .replace(/face\[([^\s\[\]]+?)\]/g, function (face) {
          //转义表情

          var alt = face.replace(/^face/g, "");
          return (
            '<img alt="' +
            alt +
            '" title="' +
            alt +
            '" src="' +
            that.pcEmojiObj[alt] +
            '">'
          );
        })
        .replace(/img\[([^\s]+?)\]/g, function (img) {
          //转义图片
          //return '<img class="layui-layim-photos" style="width: 100%;height: 100%;" src="' + img.replace(/(^img\[)|(\]$)/g, '') + '">';

          return (
            '<div><img class="chatimg single-img" src="' +
            img.replace(/(^img\[)|(\]$)/g, "") +
            '" /><span style="min-width: 240px;">&nbsp;</span></div>'
          );
        })
        .replace(/file\([\s\S]+?\)\[[\s\S]*?\]/g, function (str) {
          //转义文件
          var href = (str.match(/file\(([\s\S]+?)\)\[/) || [])[1];
          var text = (str.match(/\)\[([\s\S]*?)\]/) || [])[1];
          if (!href) return str;
          return $.__("不支持该格式:file");
          // #ifdef H5
          return (
            '<a class="layui-layim-file" href="' +
            href +
            '" download target="_blank"><i class="iconfont zc zc-xiangqing im-file"></i><cite>' +
            $.sprintf($.__("不支持该格式,请复制网址到浏览器打开 %s"), href) +
            "</cite></a>"
          );
          // #endif

          // #ifndef H5
          return (
            '<a class="layui-layim-file" href="' +
            href +
            '" download target="_blank"><i class="iconfont zc zc-xiangqing im-file"></i><cite>' +
            $.sprintf($.__("不支持该格式,请复制网址到浏览器打开 %s"), href) +
            "</cite></a>"
          );
          // #endif
        })
        .replace(/audio\[([^\s]+?)\]/g, function (audio) {
          //转义音频
          return $.__("不支持该格式:audio");
          return (
            '<div class="layui-unselect layui-layim-audio" layim-event="playAudio" data-src="' +
            audio.replace(/(^audio\[)|(\]$)/g, "") +
            '"><i class="layui-icon">&#xe652;</i><p>音频消息</p></div>'
          );
        })
        .replace(/video\[([^\s]+?)\]/g, function (video) {
          //转义音频
          return $.__("不支持该格式:video");
          return (
            '<div class="layui-unselect layui-layim-video" layim-event="playVideo" data-src="' +
            video.replace(/(^video\[)|(\]$)/g, "") +
            '"><i class="layui-icon">&#xe652;</i></div>'
          );
        })
        .replace(/\[pre([\s\S]*)\]([\s\S]*)\[\/pre\]/g, function (video) {
          //转义音频
          return $.__("不支持该格式:code");
          return (
            '<div class="layui-unselect layui-layim-video" layim-event="playVideo" data-src="' +
            video.replace(/(^video\[)|(\]$)/g, "") +
            '"><i class="layui-icon">&#xe652;</i></div>'
          );
        })

        .replace(/a\([\s\S]+?\)\[[\s\S]*?\]/g, function (str) {
          //转义链接
          var href = (str.match(/a\(([\s\S]+?)\)\[/) || [])[1];
          var text = (str.match(/\)\[([\s\S]*?)\]/) || [])[1];
          if (!href) return str;
          return (
            '<a href="' + href + '" target="_blank">' + (text || href) + "</a>"
          );
        });
      //.replace(html(), '\<$1 $2\>').replace(html('/'), '\</$1\>') //转移HTML代码
      //.replace(/\n/g, '<br>') //转义换行

      return content;
    },
    replaceEmoji(str) {
      // 正则表达式匹配内容
      let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
        // console.log("item: " + item);
        for (let i = 0; i < this.faceList.length; i++) {
          let row = this.faceList[i];
          for (let j = 0; j < row.length; j++) {
            let EM = row[j];
            if (EM.alt == item) {
              //在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
              //比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
              // let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
              // let imgstr = '<image src="'+onlinePath+this.onlineEmoji[EM.url]+'">';

              let onlinePath = this.emojiPath;
              let imgstr =
                '<img style="width:24px;height:24px;" src="' +
                onlinePath +
                EM.url +
                '">';
              // console.log("imgstr: " + imgstr);
              return imgstr;
            }
          }
        }
      });
      return replacedStr;
    },
    chatBarSendMsg(content) {
      content = this.replaceEmoji(content);
      let msg = {
        text: content,
      };

      this.sendMsg(msg, "text");
    },
    sendMsgText() {
      this.sendMsg(msg, "text");
      if (!this.textMsg) {
        return;
      }

      let content = this.replaceEmoji(this.textMsg);
      let msg = {
        text: content,
      };
    },
    async sendMsg(content, type, needload = false) {
      console.info("--------------");
      console.info(content);
      console.info(content.text);
      console.info(type);
      console.info(needload);

      let message_id = 1001;
      var mine = {
        username: this.userInfo.user_nickname,
        avatar: this.userInfo.user_avatar,
        id: this.userInfo.im.puid,
        user_id: this.userInfo.user_id,
        content: content.text || content.url,
        length: type == "voice" ? content.length : 0,
        w: type == "img" ? content.w : 0,
        h: type == "img" ? content.h : 0,
        item_id: typeof content.item_id != "undefined" ? content.item_id : 0,
        type: type,
        mine: true,
      };

      console.log(mine.avatar);

      var to = {
        id: this.ImItemInfo.id,
        friend_id: this.ImItemInfo.user_id,
        user_id: this.ImItemInfo.user_id,
        name: this.ImItemInfo.user_nickname,
        avatar: this.ImItemInfo.user_avatar,
        type: this.chattype,
      };

      let maxLength = 50;
      if (mine.content.replace(/\s/g, "") !== "") {
        if (mine.content.length > maxLength) {
          //return layer.msg('内容最长不能超过' + maxLength + '个字符')
        }
      }

      var chat_data = {
        mine: mine,
        to: to,
      };

      console.log(this.ImItemInfo);

      let params = {
        user_other_id: this.ImItemInfo.friend_id,
        message_content: mine.content,
        item_id: typeof content.item_id != "undefined" ? content.item_id : 0,
        length: mine.length,
        w: mine.w,
        h: mine.h,
        type: type,
      };

      let res = await GetSendMsgAdd(params);
      if (res && res.status == 200) {
        chat_data.mine.message_id = res.data.message_other_id;

        this.sockrt.nsend(chat_data);
        let lastid = res.data.message_other_id;
        let tempmy = this.userInfo.im;
        ///TOID现在是模拟的
        var nowDate = new Date();
        let msg = {
          type: "user",
          sendmethod: this.chattype,
          needload: needload,
          fromid: tempmy.puid,
          toid: this.ImItemInfo.user_id,
          message_kind: 1,
          msg: {
            id: lastid,
            type: type,
            userinfo: {
              uid: tempmy.puid,
              username: this.userInfo.user_nickname,
              face: this.userInfo.user_avatar,
            },
            content: content,
          },
          message_time: nowDate,
        };
        this.screened(msg);
        this.$nextTick(() => {
          const query = uni.createSelectorQuery().in(this);
          query.select(".IMmsgContent-container").boundingClientRect();
          query.selectAll(".IMmsgContent-container view").boundingClientRect();
          query.exec((res) => {
            const scrollViewHeight = res[0].height;
            const scrollContentHeight = res[1].reduce(
              (total, item) => total + item.height,
              0
            );
            // const scrollTop = scrollContentHeight - scrollViewHeight;

            uni.pageScrollTo({
              scrollTop: scrollViewHeight,
              duration: 0,
            });
          });
        });
      }
    },
    calculateVoiceWidth(seconds) {
      // 微信语音最大宽度限制（根据实际情况调整）
      const MAX_WIDTH = 400; // rpx
      const MIN_WIDTH = 100; // rpx
      const MAX_DURATION = 60; // 微信语音最大60秒

      // 确保秒数在合理范围内
      seconds = Math.min(Math.max(seconds, 1), MAX_DURATION);

      // 计算宽度（线性增长）
      const width =
        MIN_WIDTH + (seconds / MAX_DURATION) * (MAX_WIDTH - MIN_WIDTH);

      // 返回rpx单位的值，取整
      return Math.round(width) + "rpx";
    },
    getPcEmoji() {
      this.pcEmoji = [
        "[微笑]",
        "[嘻嘻]",
        "[哈哈]",
        "[可爱]",
        "[可怜]",
        "[挖鼻]",
        "[吃惊]",
        "[害羞]",
        "[挤眼]",
        "[闭嘴]",
        "[鄙视]",
        "[爱你]",
        "[泪]",
        "[偷笑]",
        "[亲亲]",
        "[生病]",
        "[太开心]",
        "[白眼]",
        "[右哼哼]",
        "[左哼哼]",
        "[嘘]",
        "[衰]",
        "[委屈]",
        "[吐]",
        "[哈欠]",
        "[抱抱]",
        "[怒]",
        "[疑问]",
        "[馋嘴]",
        "[拜拜]",
        "[思考]",
        "[汗]",
        "[困]",
        "[睡]",
        "[钱]",
        "[失望]",
        "[酷]",
        "[色]",
        "[哼]",
        "[鼓掌]",
        "[晕]",
        "[悲伤]",
        "[抓狂]",
        "[黑线]",
        "[阴险]",
        "[怒骂]",
        "[互粉]",
        "[心]",
        "[伤心]",
        "[猪头]",
        "[熊猫]",
        "[兔子]",
        "[ok]",
        "[耶]",
        "[good]",
        "[NO]",
        "[赞]",
        "[来]",
        "[弱]",
        "[草泥马]",
        "[神马]",
        "[囧]",
        "[浮云]",
        "[给力]",
        "[围观]",
        "[威武]",
        "[奥特曼]",
        "[礼物]",
        "[钟]",
        "[话筒]",
        "[蜡烛]",
        "[蛋糕]",
      ];

      let obj = {};

      this.pcEmoji.forEach((item, index) => {
        obj[item] =
          "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/face/" +
          index +
          ".gif";
      });

      this.pcEmojiObj = obj;
    },
    async getImMsgList() {
      let params = {
        typ: "json",
        user_other_id: this.ImItemInfo.friend_id,
        type: "friend",
        page: 1,
      };
      let res = await GetImMsgList(params);
      if (res && res.status == 200) {
        this.msgList = res.data.items.reverse();
        this.msgList.forEach((item) => {
          let time = this.formatTime(item.message_time);
          console.log("时间:", time);
        });

        this.msgList.forEach((item) => {
          item.msg.content.text = this.im_decode(item.msg.content.text);
          if (item.msg.type == "voice") {
            item.mp3Time = this.processTimeString(item.message_length);
          }
          if (item.msg.type == "img") {
            item.msg.content = this.setPicSize(item.msg.content);
            this.msgImgList.push(item.msg.content.url);
          }
        });
      }

      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select(".IMmsgContent-container").boundingClientRect();
        query.selectAll(".IMmsgContent-container view").boundingClientRect();
        query.exec((res) => {
          const scrollViewHeight = res[0].height;
          const scrollContentHeight = res[1].reduce(
            (total, item) => total + item.height,
            0
          );
          // const scrollTop = scrollContentHeight - scrollViewHeight;

          uni.pageScrollTo({
            scrollTop: scrollViewHeight,
            duration: 0,
          });
        });
      });
    },
    formatTime(time) {
      return renderTime(time);
    },
    //处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
    setPicSize(content) {
      // 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
      let maxW = uni.upx2px(250); //350是定义消息图片最大宽度
      let maxH = uni.upx2px(250); //350是定义消息图片最大高度
      if (content.w > maxW || content.h > maxH) {
        let scale = content.w / content.h;
        content.w = scale > 1 ? maxW : maxH * scale;
        content.h = scale > 1 ? maxW / scale : maxH;
      }
      return content;
    },
    showImgPreview(item) {
      uni.previewImage({
        indicator: "none",
        current: item.msg.content.url,
        urls: this.msgImgList,
      });
    },
  },
  onPageScroll(e) {
    if (e.scrollTop == 0 && !this.loadding) {
      this.loadding = true;
      setTimeout(() => {
        this.show = true;
        this.loadding = false;
      }, 1000);
    }
  },
};
</script>

<style lang="scss">
.IMmsgContent-container {
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 220rpx;
  box-sizing: border-box;
  background-color: #fafafa;
  font-size: 1rem;
  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;

  /*chatbox*/
  .tui-chat-content {
    width: 100%;
  }

  .tui-chatbox {
    max-width: 66%;
    border-radius: 10rpx;
    position: relative;
    padding: 20rpx 22rpx;
    font-size: 32rpx;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
  }

  .tui-chatbox::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 20rpx;
    border: 16rpx solid;
  }

  .tui-chatbox-left {
    background: #fff;
    border: 1rpx solid #fff;
    display: inline-block;
  }

  .tui-chatbox-left::before {
    right: 100%;
    border-color: transparent #fff transparent transparent;
  }

  .tui-chatbox-right {
    background: #a0d5f3;
    border: 1rpx solid #a0d5f3;
  }

  .tui-chatbox-right::before {
    left: 100%;
    border-color: transparent transparent transparent #a0d5f3;
  }

  /*chatbox*/

  .tui-chatbox /deep/ {
    .chat-bubble-box {
      display: flex;
      align-items: center;
      .chatimg {
        width: 200rpx;
        height: 200rpx;
        margin-right: 20rpx;
      }
    }
  }

  .tui-chat-left,
  .tui-chat-right {
    display: flex;
    align-items: flex-start;
    padding-top: 36rpx;
  }

  .tui-user-pic {
    width: 80rpx;
    height: 80rpx;
    flex-shrink: 0;
    border-radius: 50%;
    display: block;
  }

  .tui-left {
    margin-left: 26rpx;
  }

  .tui-right {
    margin-right: 26rpx;
  }

  .tui-chat-right {
    justify-content: flex-end;
  }

  .tui-chat-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28rpx;
    font-size: 28rpx;
    color: #666;
    padding-top: 36rpx;
  }

  .tui-label {
    display: inline-block;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 24rpx;
    line-height: 24rpx;
    margin-top: 36rpx;
    padding: 12rpx 16rpx;
    text-align: center;
    border-radius: 8rpx;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .tui-img-chatbox {
    position: relative;
  }

  .tui-img-chatbox::after {
    content: "";
    position: absolute;
    height: 200%;
    width: 200%;
    border: 1rpx solid #eaeef1;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    left: 0;
    top: 0;
    border-radius: 20rpx;
  }

  .tui-chat-img {
    max-width: 200rpx;
    /* min-height: 80rpx; */
    display: block;
    border-radius: 10rpx;
  }

  .tui-chat-flex {
    display: flex;
    align-items: center;
  }

  .tui-flex-center {
    display: flex;
    align-items: center;
  }

  .tui-chat-voice {
    width: 40rpx;
    height: 40rpx;
    display: block;
    flex-shrink: 0;
  }

  .tui-rotate {
    transform: rotate(180deg);
  }

  .tui-chat-fail {
    width: 50rpx;
    height: 50rpx;
    display: block;
    flex-shrink: 0;
  }

  .tui-mr {
    margin-right: 16rpx;
  }

  .tui-ml {
    margin-left: 16rpx;
  }

  .tui-flex-end {
    justify-content: flex-end;
  }

  .tui-flex-reverse {
    flex-direction: row-reverse;
  }

  .chat-bubble-box {
    background: red;
  }

  ._root /deep/ {
    .chat-bubble-box {
      display: flex;
      align-items: center;
      .chatimg {
        width: 200rpx;
        height: 200rpx;
        margin-right: 20rpx;
      }
    }
    .single-img {
      width: 300rpx;
      height: 300rpx;
    }
  }

  .img {
    image {
      flex: 1;
      max-width: 350upx;
      max-height: 350upx;
    }
  }
}
</style>
