<template>
  <view>
    <view class="content" @touchstart="hideDrawer">
      <scroll-view
        class="msg-list"
        scroll-y="true"
        :scroll-with-animation="scrollAnimation"
        :scroll-top="scrollTop"
        :scroll-into-view="scrollToView"
        @scrolltoupper="loadHistory"
        upper-threshold="50"
      >
        <!-- 加载历史数据waitingUI -->
        <view class="loading" v-if="ispage">
          <view class="spinner">
            <view class="rect1"></view>
            <view class="rect2"></view>
            <view class="rect3"></view>
            <view class="rect4"></view>
            <view class="rect5"></view>
          </view>
        </view>

        <view
          class="row"
          v-for="(row, index) in msgList"
          :key="index"
          :id="'msg' + row.msg.id"
        >
          <!-- 系统消息 -->
          <block v-if="row.type == 'system'">
            <view class="system">
              <!-- 文字消息 -->
              <view v-if="row.msg.type == 'text'" class="text">
                {{ row.msg.content.text }}
              </view>
              <!-- 领取红包消息 -->
              <view v-if="row.msg.type == 'redEnvelope'" class="red-envelope">
                <image
                  src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/red-envelope-chat.png"
                ></image>
                {{ row.msg.content.text }}
              </view>
            </view>
          </block>
          <!-- 用户消息 -->
          <block v-if="row.type == 'user'">
            <!-- 自己发出的消息 -->
            <view class="my" v-if="row.msg.userinfo.uid == myuid">
              <!-- 左-消息 -->
              <view class="left">
                <!-- 文字消息 -->
                <view v-if="row.msg.type == 'text'" class="bubble">
                  <u-parse
                    :content="row.msg.content.text + ''"
                    @navigate="navigate"
                    :imageProp="{ lazyLoad: true }"
                    class="white"
                  ></u-parse>
                </view>
                <!-- 语言消息 -->
                <view
                  v-if="row.msg.type == 'voice'"
                  class="bubble voice"
                  @tap="playVoice(row)"
                  :class="playMsgid == row.msg.id ? 'play' : ''"
                >
                  <view class="length">{{
                    row.message_length
                      ? row.message_length
                      : row.msg.content.length
                  }}</view>
                  <view class="icon my-voice"></view>
                </view>
                <!-- 图片消息 -->
                <view
                  v-if="row.msg.type == 'img'"
                  class="bubble img"
                  @tap="showPic(row.msg)"
                >
                  <image
                    :src="row.msg.content.url"
                    :style="{
                      width: row.msg.content.w + 'px',
                      height: row.msg.content.h + 'px',
                    }"
                  ></image>
                </view>
                <!-- 视频消息 -->
                <view
                  v-if="row.msg.type == 'video'"
                  class="bubble video"
                  @tap="playVideo(row)"
                  :class="playMsgid == row.msg.id ? 'play' : ''"
                >
                  <image
                    lazy-load
                    src="/static/images/play.png"
                    style="width: 100rpx; height: 100rpx"
                  ></image>
                </view>
                <!-- 红包 -->
                <view
                  v-if="row.msg.type == 'redEnvelope'"
                  class="bubble red-envelope"
                  @tap="openRedEnvelope(row.msg, index)"
                >
                  <image
                    src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/red-envelope.png"
                  ></image>
                  <view class="tis">
                    <!-- 点击开红包 -->
                  </view>
                  <view class="blessing">
                    {{ row.msg.content.blessing }}
                  </view>
                </view>

                <!-- 商品 -->
                <view
                  v-if="row.msg.type == 'item'"
                  class="bubble red-envelope"
                  style="width: 100%; max-width: 100%"
                >
                  <navigator
                    :url="
                      '/pages/product/detail' +
                      '?pid=' +
                      row.msg.content.item_id
                    "
                    class="m-product-item"
                  >
                    <view class="m-product-img product-list">
                      <image lazy-load :src="row.msg.content.product_image" />
                    </view>
                    <view
                      class="m-product-info1"
                      style="
                        display: flex;
                        flex-flow: column;
                        justify-content: space-between;
                      "
                    >
                      <view class="m-product-name2">
                        <label style="color: #606060">{{
                          row.msg.content.product_item_name
                        }}</label>
                      </view>
                      <view class="m-product-price1">
                        <view class="money">
                          <block>
                            <label>{{ __("￥") }}</label
                            ><label style="">{{
                              number_format(row.msg.content.item_unit_price, 2)
                            }}</label>
                          </block>
                        </view>
                      </view>
                    </view>
                  </navigator>
                </view>
              </view>
              <!-- 右-头像 -->
              <view class="right">
                <image :src="row.msg.userinfo.face"></image>
              </view>
            </view>
            <!-- 别人发出的消息 -->
            <view class="other" v-if="row.msg.userinfo.uid != myuid">
              <!-- 左-头像 -->
              <view class="left">
                <image :src="row.msg.userinfo.face"></image>
              </view>
              <!-- 右-用户名称-时间-消息 -->
              <view class="right">
                <view class="username">
                  <view class="name">{{ row.msg.userinfo.username }}</view>
                  <view class="time">{{ row.msg.time }}</view>
                </view>
                <!-- 文字消息 -->
                <view v-if="row.msg.type == 'text'" class="bubble">
                  <u-parse
                    :content="row.msg.content.text + ''"
                    @navigate="navigate"
                    :imageProp="{ lazyLoad: true }"
                  ></u-parse> </view
                ><br />
                <view
                  v-if="row.msg.type == 'text'"
                  @click="translate(row.msg.content.text, index)"
                  style="font-size: 24rpx; line-height: 60rpx; width: 100%"
                >
                  {{ row.translate_txt ? row.translate_txt : __("翻译") }}
                </view>
                <!-- 语音消息 -->
                <view
                  v-if="row.msg.type == 'voice'"
                  class="bubble voice"
                  @tap="playVoice(row)"
                  :class="playMsgid == row.msg.id ? 'play' : ''"
                >
                  <view class="icon other-voice"></view>
                  <view class="length">{{
                    row.message_length
                      ? row.message_length
                      : row.msg.content.length
                  }}</view>
                </view>
                <!-- 图片消息 -->
                <view
                  v-if="row.msg.type == 'img'"
                  class="bubble img"
                  @tap="showPic(row.msg)"
                >
                  <image
                    :src="row.msg.content.url"
                    :style="{
                      width: row.msg.content.w + 'px',
                      height: row.msg.content.h + 'px',
                    }"
                  ></image>
                </view>
                <!-- 视频消息 -->
                <view
                  v-if="row.msg.type == 'video'"
                  class="bubble video"
                  @tap="playVideo(row)"
                  :class="playMsgid == row.msg.id ? 'play' : ''"
                >
                  <image
                    lazy-load
                    src="/static/images/play.png"
                    style="width: 100rpx; height: 100rpx"
                  ></image>
                </view>
                <!-- 红包 -->
                <view
                  v-if="row.msg.type == 'redEnvelope'"
                  class="bubble red-envelope"
                  @tap="openRedEnvelope(row.msg, index)"
                >
                  <image
                    src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/red-envelope.png"
                  ></image>
                  <view class="tis">
                    <!-- 点击开红包 -->
                  </view>
                  <view class="blessing">
                    {{ row.msg.content.blessing }}
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>
    <!-- 抽屉栏 -->
    <view
      class="popup-layer"
      :class="popupLayerClass"
      @touchmove.stop.prevent="discard"
    >
      <!-- 表情 -->
      <!-- <swiper class="emoji-swiper"
            @animationfinish="moveend($event)"
            :class="{hidden:hideEmoji}"
            indicator-dots="true"
            duration="150"
            :current="dotsCurrent"
            >
                <swiper-item v-for="(page,pid) in emojiList" :key="pid">
                    <view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
                        <image mode="widthFix" :src="'https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/emoji/'+em.url"></image>
                    </view>
                </swiper-item>
            </swiper> -->
      <emotion @addEmoji="addEmoji" :class="{ hidden: hideEmoji }"></emotion>
      <!-- 更多功能 相册-拍照-红包 -->
      <view class="more-layer" :class="{ hidden: hideMore }">
        <view class="list">
          <view class="box" @tap="chooseImage">
            <view class="icon tupian2"></view>
          </view>
          <view class="box" @tap="camera">
            <view class="icon paizhao"></view>
          </view>

          <view class="box" @tap="handRedEnvelopes" v-if="false">
            <view class="icon hongbao"></view>
          </view>

          <!-- #ifdef MP-WEIXIN || APP-PLUS -->
          <view class="box" @tap="chooseVideo">
            <image
              style="
                border-radius: 10px;
                width: 32px;
                height: 32px;
                background-color: #333;
              "
              src="/static/images/play.png"
            ></image>
          </view>
          <!-- #endif -->

          <view class="box" @tap="weizhi" v-if="false">
            <image
              style="font-size: 16px; width: 32px; height: 32px"
              src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/weizhi.png"
            ></image>
          </view>
          <!-- <view class="box" @tap="handRedEnvelopes">
                        <image style="font-size:16px;width: 32px; height: 32px;"
                        src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/红包.png"></image>
                    </view> -->

          <view class="box" @tap="yuyinshuru" v-if="false">
            <image
              style="font-size: 16px; width: 32px; height: 32px"
              src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/yuyinshuru.png"
            ></image>
          </view>

          <view class="box" @tap="meShouchang" v-if="false">
            <image
              style="font-size: 16px; width: 32px; height: 32px"
              src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/me-shouchang.png"
            ></image>
          </view>

          <view class="box" @tap="userinfo" v-if="false">
            <image
              style="font-size: 16px; width: 32px; height: 32px"
              src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/userinfo.png"
            ></image>
          </view>

          <!-- <view class="box" @tap="handRedEnvelopes">
                        <image style="font-size:16px;width: 32px; height: 28px;" src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/文件.png"></image>
                    </view> -->
        </view>
      </view>
    </view>
    <!-- 底部输入栏 -->
    <view
      class="input-box"
      :class="popupLayerClass"
      @touchmove.stop.prevent="discard"
    >
      <!-- H5下不能录音，输入栏布局改动一下 -->
      <!-- #ifndef H5 -->
      <view class="voice">
        <view
          class="icon"
          :class="isVoice ? 'jianpan' : 'yuyin'"
          @tap="switchVoice"
        ></view>
      </view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="more" @tap="showMore">
        <view class="icon add"></view>
      </view>
      <!-- #endif -->
      <view class="textbox">
        <view
          class="voice-mode"
          :class="[isVoice ? '' : 'hidden', recording ? 'recording' : '']"
          @touchstart="voiceBegin"
          @touchmove.stop.prevent="voiceIng"
          @touchend="voiceEnd"
          @touchcancel="voiceCancel"
          >{{ voiceTis }}
        </view>
        <view class="text-mode" :class="isVoice ? 'hidden' : ''">
          <view class="box">
            <textarea
              auto-height="true"
              v-model="textMsg"
              @focus="textareaFocus"
              cursor-spacing="20"
            />
          </view>
          <view class="em" @tap="chooseEmoji">
            <view class="icon biaoqing"></view>
          </view>
        </view>
      </view>
      <!-- #ifndef H5 -->
      <view class="more" @tap="showMore">
        <view class="icon add"></view>
      </view>
      <!-- #endif -->
      <view class="send" :class="isVoice ? 'hidden' : ''" @tap="sendText">
        <view class="btn">{{ __("发送") }}</view>
      </view>
    </view>
    <!-- 录音UI效果 -->
    <view class="record" :class="recording ? '' : 'hidden'">
      <view class="ing" :class="willStop ? 'hidden' : ''">
        <view class="icon luyin2"></view>
      </view>
      <view class="cancel" :class="willStop ? '' : 'hidden'">
        <view class="icon chehui"></view>
      </view>
      <view class="tis" :class="willStop ? 'change' : ''">{{ recordTis }}</view>
    </view>
    <!-- 红包弹窗 -->
    <view class="windows" :class="windowsState">
      <!-- 遮罩层 -->
      <view
        class="mask"
        @touchmove.stop.prevent="discard"
        @tap="closeRedEnvelope"
      ></view>
      <view class="layer" @touchmove.stop.prevent="discard">
        <view class="open-redenvelope">
          <view class="top">
            <view class="close-btn">
              <view class="icon close" @tap="closeRedEnvelope"></view>
            </view>
            <image
              src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_1.jpg"
            ></image>
          </view>
          <view class="from">来自{{ redenvelopeData.from }}</view>
          <view class="blessing">{{ redenvelopeData.blessing }}</view>
          <view class="money">{{ redenvelopeData.money }}</view>
          <view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
            查看领取详情
            <view class="icon to"></view>
          </view>
        </view>
      </view>
    </view>

    <view class="videoShow" v-if="isPlay">
      <!-- #ifndef MP-WEIXIN -->
      <uni-nav-bar
        title=""
        backgroundColor="#f8f8f8"
        @clickLeft="isPlay = false"
        :default="false"
        leftText="退出"
        leftIcon=""
      />
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <view class="header"
        ><text @click="isPlay = false">{{ __("退出") }}</text></view
      >
      <!-- #endif -->
      <video
        :src="video"
        ref="video"
        object-fit="contain"
        @ended="isPlay = false"
        @pause="isPlay = false"
        :autoplay="true"
      ></video>
    </view>
  </view>
</template>
<script>
import emojiData from "@/static/emoji/emojiData.js";
import emotion from "./emotion/index.vue";
import uParse from "@/components/u-parse/u-parse.vue";

import { mapState, mapMutations } from "vuex";
import $ from "../../helpers/util";
import Config from "../../config/config";
import apirequest from "../../helpers/apiconfig";

export default {
  components: {
    emotion,
    uParse,
  },
  data() {
    return {
      options: {},
      //文字消息
      // dotsCurrent:1,
      textMsg: "",
      //消息列表
      isHistoryLoading: false,
      scrollAnimation: false,
      scrollTop: 0,
      scrollToView: "",
      msgList: [], //信息列表
      msgImgList: [],
      myuid: 0,

      //录音相关参数
      // #ifndef H5
      //H5不能录音
      RECORDER: uni.getRecorderManager(),
      // #endif
      isVoice: false,
      voiceTis: "按住 说话",
      recordTis: "手指上滑 取消发送",
      recording: false,
      willStop: false,
      initPoint: {
        identifier: 0,
        Y: 0,
      },
      recordTimer: null,
      recordLength: 0,

      //播放语音相关参数
      AUDIO: uni.createInnerAudioContext(),
      playMsgid: null,
      VoiceTimer: null,
      // 抽屉参数
      popupLayerClass: "",
      // more参数
      hideMore: true,
      //表情定义
      hideEmoji: true,
      emojiList: [{}],
      emojiPath: "",
      //表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
      // onlineEmoji:{
      // "100.gif":"AbNQgA.gif","101.gif":"AbN3ut.gif","102.gif":"AbNM3d.gif","103.gif":"AbN8DP.gif",
      // "104.gif":"AbNljI.gif","105.gif":"AbNtUS.gif","106.gif":"AbNGHf.gif","107.gif":"AbNYE8.gif",
      // "108.gif":"AbNaCQ.gif","109.gif":"AbNN4g.gif","110.gif":"AbN0vn.gif","111.gif":"AbNd3j.gif",
      // "112.gif":"AbNsbV.gif","113.gif":"AbNwgs.gif","114.gif":"AbNrD0.gif","115.gif":"AbNDuq.gif",
      // "116.gif":"AbNg5F.gif","117.gif":"AbN6ET.gif","118.gif":"AbNcUU.gif","119.gif":"AbNRC4.gif","120.gif":"AbNhvR.gif",
      // "121.gif":"AbNf29.gif","122.gif":"AbNW8J.gif","123.gif":"AbNob6.gif","124.gif":"AbN5K1.gif","125.gif":"AbNHUO.gif","126.gif":"AbNIDx.gif",
      // "127.gif":"AbN7VK.gif","128.gif":"AbNb5D.gif","129.gif":"AbNX2d.gif","130.gif":"AbNLPe.gif",
      // "131.gif":"AbNjxA.gif","132.gif":"AbNO8H.gif","133.gif":"AbNxKI.gif","134.gif":"AbNzrt.gif",
      // "135.gif":"AbU9Vf.gif","136.gif":"AbUSqP.gif","137.gif":"AbUCa8.gif","138.gif":"AbUkGQ.gif",
      // "139.gif":"AbUFPg.gif","140.gif":"AbUPIS.gif","141.gif":"AbUZMn.gif","142.gif":"AbUExs.gif",
      // "143.gif":"AbUA2j.gif","144.gif":"AbUMIU.gif","145.gif":"AbUerq.gif","146.gif":"AbUKaT.gif",
      // "147.gif":"AbUmq0.gif","148.gif":"AbUuZV.gif","149.gif":"AbUliF.gif","150.gif":"AbU1G4.gif",
      // "151.gif":"AbU8z9.gif","152.gif":"AbU3RJ.gif","153.gif":"AbUYs1.gif","154.gif":"AbUJMR.gif",
      // "155.gif":"AbUadK.gif","156.gif":"AbUtqx.gif","157.gif":"AbUUZ6.gif","158.gif":"AbUBJe.gif",
      // "159.gif":"AbUdIO.gif","160.gif":"AbU0iD.gif","161.gif":"AbUrzd.gif","162.gif":"AbUDRH.gif",
      // "163.gif":"AbUyQA.gif","164.gif":"AbUWo8.gif","165.gif":"AbU6sI.gif","166.gif":"AbU2eP.gif",
      // "167.gif":"AbUcLt.gif","168.gif":"AbU4Jg.gif","169.gif":"AbURdf.gif","170.gif":"AbUhFS.gif",
      // "171.gif":"AbU5WQ.gif","172.gif":"AbULwV.gif","173.gif":"AbUIzj.gif","174.gif":"AbUTQs.gif",
      // "175.gif":"AbU7yn.gif","176.gif":"AbUqe0.gif","177.gif":"AbUHLq.gif","178.gif":"AbUOoT.gif",
      // "179.gif":"AbUvYF.gif","180.gif":"AbUjFU.gif","181.gif":"AbaSSJ.gif","182.gif":"AbUxW4.gif",
      // "183.gif":"AbaCO1.gif","184.gif":"Abapl9.gif","185.gif":"Aba9yR.gif","186.gif":"AbaFw6.gif",
      // "187.gif":"Abaiex.gif","188.gif":"AbakTK.gif","189.gif":"AbaZfe.png","190.gif":"AbaEFO.gif",
      // "191.gif":"AbaVYD.gif","192.gif":"AbamSH.gif","193.gif":"AbaKOI.gif","194.gif":"Abanld.gif",
      // "195.gif":"Abau6A.gif","196.gif":"AbaQmt.gif","197.gif":"Abal0P.gif","198.gif":"AbatpQ.gif",
      // "199.gif":"Aba1Tf.gif","200.png":"Aba8k8.png","201.png":"AbaGtS.png","202.png":"AbaJfg.png",
      // "203.png":"AbaNlj.png","204.png":"Abawmq.png","205.png":"AbaU6s.png","206.png":"AbaaXn.png",
      // "207.png":"Aba000.png","208.png":"AbarkT.png","209.png":"AbastU.png","210.png":"AbaB7V.png",
      // "211.png":"Abafn1.png","212.png":"Abacp4.png","213.png":"AbayhF.png","214.png":"Abag1J.png","215.png":"Aba2c9.png","216.png":"AbaRXR.png",
      // "217.png":"Aba476.png","218.png":"Abah0x.png","219.png":"Abdg58.png"},
      //红包相关参数
      windowsState: "",
      redenvelopeData: {
        rid: null, //红包ID
        from: null,
        face: null,
        blessing: null,
        money: null,
      },
      chattype: "user",
      chat_to_puid: 0, ///当前对聊的人
      user_other_row: {},
      chattitle: "",

      chatlog: [], ////我们从缓存读取

      page: 1,
      ispage: !1,
      flag: !1,
      video: "",
      isPlay: false,
    };
  },
  computed: {
    ...mapState(["Config", "hasLogin", "userInfo", "plantformInfo", "getMsg"]),
  },
  watch: {
    getMsg: function (val) {
      let that = this;
      let cacheid = 0;
      console.log("获取到数据");
      console.log(val);

      var nowDate = new Date();
      let lastid = val.message_id;
      let tempmy = this.userInfo.im;

      let msg_type = val.msg_type;

      let msg = {
        type: "user",
        sendmethod: this.chattype,
        needload: false,
        fromid: this.chat_to_puid,
        toid: tempmy.puid,
        msg: {
          id: lastid,
          type: msg_type,
          userinfo: {
            uid: this.chat_to_puid,
            username: this.user_other_row.user_nickname,
            face: this.user_other_row.user_avatar,
          },
          content: {
            text: val.content,
          },
        },
      };

      // 用户消息
      switch (msg_type) {
        case "text":
          msg.msg.content.text = val.content;
          break;
        case "voice":
          msg.msg.content.url = val.content;
          break;
        case "img":
          msg.msg.content.url = val.content;
          break;
        case "video":
          msg.msg.content.url = val.content;
          break;
        case "redEnvelope":
          msg.msg.content.blessing = val.content;
          break;
        case "rtc":
          msg.msg.content.text = val.content;
          break;
      }

      if (that.chattype == "user" && val.type == "friend") {
        if (that.chat_to_puid == val.id) {
          console.log("screenMsg");
          console.log(msg);
          that.screenMsg(msg);

          //发起视频聊天
          if (msg_type == "rtc") {
            // #ifdef MP-WEIXIN
            this.$.gotopage("/rtc/room/1v1wx?to_user_id=" + that.options.uid);
            // #endif

            // #ifdef APP-PLUS
            this.$.gotopage("/rtc/room/1v1?to_user_id=" + that.options.uid);
            // #endif
          }
        }
        cacheid = msg.fromid;
      } else if (that.chattype == "group" && val.type == "group") {
        if (that.chat_to_puid == val.toid) {
          that.screenMsg(msg);
        }
        cacheid = msg.toid;
        ///群聊
      } else {
        ///不让在当前页面显示内容
      }

      if (that.chat_to_puid == val.id) {
        apirequest.setMsgRead(lastid, () => {});
        //设为已读
      }

      this.$apiconfig.cacheMessage(val, val.sendmethod, cacheid, tempmy);

      //新消息数归零
      this.$store.commit("resetWeidu", {
        type: this.chattype,
        val: this.chat_to_puid,
      });
    },
  },
  onUnload() {
    let that = this;
    this.$store.commit("resetWeidu", {
      type: this.chattype,
      val: this.chat_to_puid,
    });
    this.$store.commit("setCurrentPuid", "");

    if (!that.plantformInfo.config.chat_global) {
      that.$Socket.nclose();
    }
  },
  onHide() {
    console.log("onHide");
  },
  onLoad(options) {
    let that = this;

    that.voiceTis = this.__("按住 说话");
    that.recordTis = this.__("手指上滑 取消发送");

    /* if (typeof options.uid == 'undefined')
			{
			    that.$.navigateBack(1)
			} */

    this.forceUserInfo(function (user) {
      if (that.userInfo.im) {
        that.getPlantformInfo(function (plantformInfo) {
          if (!that.plantformInfo.config.chat_global) {
            that.$Socket.connectserver(that.userInfo.im);
          }
        });
      }
    });

    this.setData({
      options: options,
    });

    if (options.name) {
      this.chattitle = options.name;
      uni.setNavigationBarTitle({
        title: options.name,
      });
    }

    let params = {
      user_other_id: options.uid,
      is_group: options.type == 1 ? 1 : 0,
    };
    this.$.request({
      url: this.Config.URL.user.msg_config,
      data: params,
      success: (data, status, msg, code) => {
        console.info(data);
        if (status == 200) {
          if (!options.name) {
            this.chattitle = data.user_other_info.user_nickname;
            uni.setNavigationBarTitle({
              title: data.user_other_info.user_nickname,
            });
          }

          this.chat_to_puid = data.user_other_info.puid;
          this.user_other_row = data.user_other_info;

          this.chattype = options.type == 1 ? "group" : "user";
          this.chattitle = options.title;
          this.getMsgList();
          ///将未读条数归零
          this.$store.commit("updateChaterAttr", {
            type: this.chattype,
            val: this.chat_to_puid,
            attr: "weidu",
            data: 0,
            addinfo: {
              weidu: 0,
              lastmsg: "",
              id: this.chat_to_puid,
              avatar: this.user_other_row.user_avatar,
              user_id: this.user_other_row.user_id,
              username: this.user_other_row.user_nickname,
              logtype: this.chattype,
            },
          });

          this.$store.commit("resetWeidu", {
            type: this.chattype,
            val: this.chat_to_puid,
          });
          this.$store.commit("setCurrentPuid", this.chat_to_puid);

          //设置用户消息全部为已读
          //领取操作
          let tmp_params = {
            user_other_id: this.user_other_row.user_id,
          };
          this.$.request({
            url: this.Config.URL.user.msg_set_read,
            data: tmp_params,
            loading: false,
            success: function (tmp_data, tmp_status, tmp_msg, tmp_code) {
              if (tmp_status == 200) {
              }
            },
          });

          //语音自然播放结束
          this.AUDIO.onEnded((res) => {
            this.playMsgid = null;
          });
          // #ifndef H5
          //录音开始事件
          this.RECORDER.onStart((e) => {
            this.recordBegin(e);
          });
          //录音结束事件
          this.RECORDER.onStop((e) => {
            this.recordEnd(e);
          });

          // #endif

          // this.emojiList=[
          // 	[{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
          // 	[{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
          // 	[{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
          // 	[{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
          // 	[{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]
          // ]
          let that = this;

          this.emojiList = emojiData.imgArr[1].emojiList;

          /*that.$Socket.listenlist[this.chattype+this.chat_to_puid]=true;
                       if(that.$Socket.listenlist[this.chattype+this.chat_to_puid]){
                           ///如果已被监听
                       }else{
                           that.$Socket.sockettast.onMessage(function(res){
                                        console.log("页面捕获了socket数据"+res.data)
                                         let temdata= eval("("+res.data+")");

                                          switch(temdata.type){
                                               case 'getmessage':
                                                  let msg =temdata.message;
                                                //{type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}};
                                                   that.screenMsg(msg);
                                                   //that.cacheMessage(msg);
                                         break;
                                }
                            })
                       }*/

          //读取商品信息，直接发送出去
          if (options.item_id) {
            var params = {
              item_id: options.item_id,
            };

            that.$.request({
              url: this.Config.URL.product.item,
              data: params,
              loading: false,
              ajaxCache: {
                timeout: this.Config.CACHE_EXPIRE,
              },

              success: function (data, status, msg, code) {
                if (200 == status) {
                  /* data.item_row.item_unit_price
										data.item_row.product_item_name
										data.item_row.product_image
										data.item_row.item_id */

                  let imgstr =
                    '<img class="chatimg" src="' +
                    data.info.product_image +
                    '">';
                  let content =
                    '<div class="chat-bubble-box">' +
                    imgstr +
                    ' <a href="/pages/product/detail?pid=' +
                    data.info.item_id +
                    '" style="color:#FFF;">' +
                    data.info.product_item_name +
                    that.__("￥") +
                    data.info.item_unit_price +
                    "</a></div>";

                  //content = content.replace(new RegExp( '<img ', "gm"), '<img style="max-width:100%;height:auto;display: flex;" ');

                  let msg = {
                    text: content,
                    item_id: data.info.item_id,
                  };
                  //that.sendMsg(msg, 'item');
                  that.sendMsg(msg, "text");
                }
              },
              complete: function (res, status) {},
            });
          }

          //读取订单信息，直接发送出去
          if (options.text) {
            let msg = {
              text: options.text,
            };
            that.sendMsg(msg, "text");
          }
        } else {
          uni.navigateBack({});
        }
      },
    });
  },

  onShow() {
    this.scrollTop = 9999999;
    let that = this;
    this.myuid = this.userInfo.im.puid;

    //this.getLeavemsg()

    //模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。
    //
    /*uni.getStorage({
			    key: 'redEnvelopeData',
			    success:  (res)=>{
			        // console.log(res.data);
			        let nowDate = new Date();
			        let lastid = this.msgList[this.msgList.length-1].msg.id;
			        lastid++;
			        let row = {type:"user",msg:{id:lastid,type:"redEnvelope",time:nowDate.getHours()+":"+nowDate.getMinutes(),userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{blessing:res.data.blessing,rid:Math.floor(Math.random()*1000+1),isReceived:false}}};
			        this.screenMsg(row);
			        uni.removeStorage({key: 'redEnvelopeData'});
			    }
			});*/
  },

  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),
    // moveend(e){
    //    console.log(e.detail)
    //    if(e.detail.current===4){
    // 		this.dotsCurrent=Object.assign(this.dotsCurrent,1)
    // 	}
    // },
    translate(txt, id) {
      var that = this;
      that.$.request({
        url: this.Config.URL.translate,
        data: {
          txt: txt,
        },
        success: function (data, status, msg, code) {
          if (200 == status) {
            console.log(id);
            that.msgList[id].translate_txt = data.text;
            console.log(that.msgList);
          } else {
            that.Msg(msg);
          }
        },
      });
    },

    // 接受消息(筛选处理)

    screenMsg(msg) {
      console.info("screenMsg");
      console.info(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();
        }
      }
      this.$nextTick(function () {
        // 滚动到底
        this.scrollToView = "msg" + msg.msg.id;
      });
    },

    //触发滑动到顶部(加载历史信息记录)
    loadHistory(e) {
      if (this.isHistoryLoading) {
        return;
      }

      this.isHistoryLoading = true; //参数作为进入请求标识，防止重复请求
      this.scrollAnimation = false; //关闭滑动动画
      let Viewid = this.msgList[0].msg.id; //记住第一个信息ID

      var that = this;
      if (this.flag && this.ispage) {
        that.setData({
          flag: !1,
        }),
          clearTimeout(t);
        var t = setTimeout(() => {
          that.setData({
            page: parseInt(that.page) + 1,
          });
          that.getMsgList(() => {
            //这段代码很重要，不然每次加载历史数据都会跳到顶部
            this.$nextTick(function () {
              this.scrollToView = "msg" + Viewid; //跳转上次的第一行信息位置
              console.info("this.scrollToView ");
              console.info(this.scrollToView);
              this.$nextTick(function () {
                this.scrollAnimation = true; //恢复滚动动画
              });
            });

            this.isHistoryLoading = false;
          });
        }, 500);
      } else {
        this.isHistoryLoading = false;
      }

      return;

      //本地模拟请求历史记录效果
      this.$apiconfig
        .getMessagelog_f({
          data: {
            mid: this.myuid,
            toid: this.chat_to_puid,
          },
        })
        .then((res) => {
          console.log(res);
        });
      setTimeout(() => {
        // 消息列表
        /*this.$apiconfig.getMessagelog_f({data:[]}).then(res=>{

					});*/
        /*let list = [
					    {type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}},
					    {type:"user",msg:{id:2,type:"text",time:"12:57",userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{text:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}}},
					    {type:"user",msg:{id:3,type:"voice",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{url:"/static/voice/1.mp3",length:"00:06"}}},
					    {type:"user",msg:{id:4,type:"voice",time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{url:"/static/voice/2.mp3",length:"00:06"}}},
					]*/
        let list = [];
        if (list.length > 0) {
          // 获取消息中的图片,并处理显示尺寸
          for (let i = 0; i < list.length; i++) {
            if (list[i].type == "user" && list[i].msg.type == "img") {
              list[i].msg.content = this.setPicSize(list[i].msg.content);
              this.msgImgList.unshift(list[i].msg.content.url);
            }
            list[i].msg.id = Math.floor(Math.random() * 1000 + 1);
            this.msgList.unshift(list[i]);
          }

          //这段代码很重要，不然每次加载历史数据都会跳到顶部
          this.$nextTick(function () {
            this.scrollToView = "msg" + Viewid; //跳转上次的第一行信息位置
            this.$nextTick(function () {
              this.scrollAnimation = true; //恢复滚动动画
            });
          });
        }

        this.isHistoryLoading = false;
      }, 1000);
    },
    ///获取留言(如果是好友就从退出时间往前十条十条的加载，群得话只加载最近十条)
    getLeavemsg() {
      let tempmy = this.userInfo.im;
      this.$apiconfig
        .getrecentmsg_f({
          data: {
            mid: tempmy.user_id,
            tid: this.chat_to_puid,
            type: this.chattype,
          },
        })
        .then((res) => {
          console.log(res.data);
        });
    },

    // 加载初始页面消息
    getMsgList(callback) {
      let that = this;
      // 消息列表
      //最好读取和某个人的聊天缓存，所以信息我们都存缓存
      let list = [];
      /*  uni.getStorage({
				      key:'chatim',
				    complete(res) {
				        let tempmy=that.userInfo.data.mine;
				       if(res.data==''||typeof(res.data)=='undefined'){
				        }else{
				          if(typeof(res.data[tempmy.puid])=='undefined'||typeof(res.data[tempmy.puid]['chatlog'])=='undefined'){
				                console.log(1)
				            }else{

				                if(that.chattype=='group'){
				                    if(typeof(res.data[tempmy.puid]['chatlog']['group'+that.chat_to_puid])=='undefined'){

				                    }else{
				                       list= res.data[tempmy.puid]['chatlog']['group'+that.chat_to_puid]
				                    }
				                }else{
				                    console.log(2)
				                    if(typeof(res.data[tempmy.puid]['chatlog']['friend'+that.chat_to_puid])=='undefined'){

				                    }else{
				                        list= res.data[tempmy.puid]['chatlog']['friend'+that.chat_to_puid]


				                    }
				                }

				            }

				        }
				    }
				  })*/

      /* let list = [
                   {type:"system",msg:{id:0,type:"text",content:{text:"欢迎进入聊天室"}}},
                   {type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}},
                   {type:"user",msg:{id:2,type:"text",time:"12:57",userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{text:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}}},
                   {type:"user",msg:{id:3,type:"voice",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{url:"/static/voice/1.mp3",length:"00:06"}}},
                   {type:"user",msg:{id:4,type:"voice",time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{url:"/static/voice/2.mp3",length:"00:06"}}},
                   {type:"user",msg:{id:5,type:"img",time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{url:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/p10.jpg",w:200,h:200}}},
                   {type:"user",msg:{id:6,type:"img",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{url:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/q.jpg",w:1920,h:1080}}},
                   {type:"system",msg:{id:7,type:"text",content:{text:"欢迎进入聊天室"}}},

                   {type:"system",msg:{id:9,type:"redEnvelope",content:{text:"售后客服008领取了你的红包"}}},
                   {type:"user",msg:{id:10,type:"redEnvelope",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{blessing:"恭喜发财，大吉大利，万事如意",rid:0,isReceived:false}}},
                   {type:"user",msg:{id:11,type:"redEnvelope",time:"12:56",userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{blessing:"恭喜发财",rid:1,isReceived:false}}},
               ]*/
      let tempmy = this.userInfo.im;
      console.info("tempmy");
      console.info(tempmy);

      var params = {
        user_other_id: this.user_other_row.user_id,
        data: {
          mid: tempmy.puid,
          tid: this.chat_to_puid,
          type: this.chattype,
        },
        page: this.page,
      };
      this.$apiconfig.getrecentmsg_f(params, (data, status, msg, code) => {
        console.info("getrecentmsg_f");
        console.info(JSON.stringify(data));
        console.info(status);
        console.info(msg);
        if (data.items.length > 0) {
          let array = [];
          list = data.items.forEach((item) => {
            array.push(item);
          });

          list = array;

          // 获取消息中的图片,并处理显示尺寸
          if (list.length > 0) {
            for (let i = 0; i < list.length; i++) {
              if (list[i].type == "user" && list[i].msg.type == "img") {
                list[i].msg.content = this.setPicSize(list[i].msg.content);
                this.msgImgList.push(list[i].msg.content.url);
              }

              list[i].msg = this.$apiconfig.im_decode_msg(list[i].msg);
              list[i].translate_txt = this.__("翻译");
              list[i].msg.translate_txt = this.__("翻译");
            }
          }

          this.msgList = list.concat(this.msgList);
          console.log(this.msgList);

          if (data.page >= data.total) {
            that.setData({
              flag: !1,
              ispage: !1,
            });
          } else {
            that.setData({
              flag: !0,
              ispage: !0,
            });
          }
        } else {
          that.setData({
            flag: !1,
            ispage: !1,
          });
        }

        console.info(data);
        console.info(this.msgList);

        if (callback) {
          callback();
        } else {
          // 滚动到底部
          this.$nextTick(function () {
            //进入页面滚动到底部
            this.scrollTop = 9999;
            this.$nextTick(function () {
              this.scrollAnimation = true;
            });
          });
        }
      });
    },
    //处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
    setPicSize(content) {
      // 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
      let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
      let maxH = uni.upx2px(350); //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;
    },

    //更多功能(点击+弹出)
    showMore() {
      this.isVoice = false;
      this.hideEmoji = true;
      if (this.hideMore) {
        this.hideMore = false;
        this.openDrawer();
      } else {
        this.hideDrawer();
      }
    },
    // 打开抽屉
    openDrawer() {
      this.popupLayerClass = "showLayer";
    },
    // 隐藏抽屉
    hideDrawer() {
      this.popupLayerClass = "";
      setTimeout(() => {
        this.hideMore = true;
        this.hideEmoji = true;
      }, 150);
    },
    // 选择图片发送
    chooseImage() {
      this.getImage("album");
    },
    // 选择视频发送
    chooseVideo() {
      this.upLoadVideo("album");
    },
    upLoadVideo() {
      var that = this;
      uni.chooseVideo({
        count: 1,
        sourceType: ["camera", "album"],
        success: function (res) {
          uni.showLoading({
            title: "视频上传中..",
            mask: true,
          });
          uni.uploadFile({
            url: that.Config.URL.upload_file,
            filePath: res.tempFilePath,
            name: "upfile",
            success: (uploadFileRes) => {
              let msg = {
                url: res.tempFilePath,
                w: uploadFileRes.width,
                h: uploadFileRes.height,
              };
              uni.hideLoading();
              let tmpres = JSON.parse(uploadFileRes.data);
              ///图片上传到服务器，上传完成后发送信息
              if (tmpres.status == 200) {
                msg.url = tmpres.data.url;
                that.sendMsg(msg, "video");
              } else {
                that.$.confirm(tmpres.msg || that.__("发生错误"));
              }
            },
            /* success: (res) => {
								
								that.send_content=JSON.parse(res.data).data.url+','+JSON.parse(res.data).data.cover
								that.send(3)
				            } */
          });
        },
      });
    },
    //拍照发送
    camera() {
      this.getImage("camera");
    },
    //发红包
    handRedEnvelopes() {
      uni.navigateTo({
        url: "HM-hand/HM-hand",
      });
      this.hideDrawer();
    },

    //语音通话
    yuyintonghua() {
      //发送语音通知消息
      let msg = {
        text: this.__("发起语音通话"),
      };
      this.sendMsg(msg, "rtc");

      // #ifdef MP-WEIXIN
      this.$.gotopage("/rtc/room/1v1wx?to_user_id=" + this.options.uid);
      // #endif

      // #ifdef APP-PLUS
      this.$.gotopage("/rtc/room/1v1?to_user_id=" + this.options.uid);
      // #endif
    },

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

                that.$.uploadFile({
                  url: that.Config.URL.upload, //仅为示例，非真实的接口地址
                  filePath: res.tempFilePaths[i],
                  name: "upfile",
                  formData: {
                    user: "test",
                  },
                  success: (uploadFileRes) => {
                    let tmpres = JSON.parse(uploadFileRes.data);
                    ///图片上传到服务器，上传完成后发送信息

                    if (tmpres.status == 200) {
                      msg.url = tmpres.data.url;

                      this.sendMsg(msg, "img");
                    } else {
                      that.$.confirm(tmpres.msg || that.__("发生错误"));
                    }
                  },
                });
              },
            });
          }
        },
      });
    },
    // 选择表情
    chooseEmoji() {
      this.hideMore = true;
      if (this.hideEmoji) {
        this.hideEmoji = false;
        this.openDrawer();
      } else {
        this.hideDrawer();
      }
    },
    //添加表情
    addEmoji(em) {
      //判断删除按钮
      if (em.emojiItem.alt === "[删除]") {
        //  uni.showToast({
        //  	title:"触发删除操作",
        // icon:"none"
        //  })
        var str;
        var msglen = this.textMsg.length - 1;
        let start = this.textMsg.lastIndexOf("[");
        let end = this.textMsg.lastIndexOf("]");
        let len = end - start;
        if (end != -1 && end === msglen && len >= 2 && len <= 4) {
          // 表情字符
          str = this.textMsg.slice(0, start);
        } else {
          // 普通键盘输入汉字 或者字符
          str = this.textMsg.slice(0, msglen);
        }

        this.textMsg = str;

        return;
      }
      // console.log(em)
      this.emojiList = emojiData.imgArr[em.groupIndex].emojiList;
      this.emojiPath = emojiData.imgArr[em.groupIndex].emojiPath;
      if (em.minEmoji === false) {
        this.sendBigEmoji(em.emojiItem.url);
      } else {
        // this.textMsg+=em.alt;
        this.textMsg += em.emojiItem.alt;
      }
    },
    // 发送大表情
    sendBigEmoji(url) {
      this.hideDrawer(); //隐藏抽屉
      if (!url) {
        return;
      }
      let imgstr =
        '<img style="width:48px;height:48px;" src="' +
        this.emojiPath +
        url +
        '">';
      let content =
        '<div style="align-items: center;word-wrap:break-word;">' +
        imgstr +
        "</div>";
      let msg = {
        text: content,
      };
      this.sendMsg(msg, "text");
      this.textMsg = ""; //清空输入框
    },
    //获取焦点，如果不是选表情ing,则关闭抽屉
    textareaFocus() {
      if (this.popupLayerClass == "showLayer" && this.hideMore == false) {
        this.hideDrawer();
      }
    },
    // 发送文字消息
    sendText() {
      /*uni.showToast({
				    title:'发送文本消息',
				    icon:"none"
				})*/
      this.hideDrawer(); //隐藏抽屉
      if (!this.textMsg) {
        return;
      }

      let content = this.replaceEmoji(this.textMsg);
      let msg = {
        text: content,
      };
      this.sendMsg(msg, "text");
      this.textMsg = ""; //清空输入框
    },
    //替换表情符号为图片
    replaceEmoji(str) {
      // 正则表达式匹配内容
      let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
        // console.log("item: " + item);
        for (let i = 0; i < this.emojiList.length; i++) {
          let row = this.emojiList[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;
    },
    // 发送消息
    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,
      };

      var to = {
        id: this.chat_to_puid,
        friend_id: this.user_other_row.user_id,
        user_id: this.user_other_row.user_id,
        name: this.user_other_row.user_nickname,
        avatar: this.user_other_row.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,
      };

      let params = {
        user_other_id: this.user_other_row.user_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,
      };

      this.$apiconfig.sendMessage_f(params, (data, status, res_msg, code) => {
        chat_data.mine.message_id = data.message_other_id;
        //chat_data.to.message_id = data.message_id;

        this.$Socket.nsend(chat_data);

        //实际应用中，此处应该提交长连接，模板仅做本地处理。
        var nowDate = new Date();
        let lastid = data.message_other_id;
        let tempmy = this.userInfo.im;
        ///TOID现在是模拟的
        let msg = {
          type: "user",
          sendmethod: this.chattype,
          needload: needload,
          fromid: tempmy.puid,
          toid: this.chat_to_puid,
          msg: {
            id: lastid,
            type: type,
            userinfo: {
              uid: tempmy.puid,
              username: this.userInfo.user_nickname,
              face: this.userInfo.user_avatar,
            },
            content: content,
          },
        };
        // 发送消息
        if (this.chattype == "group") {
        } else {
          this.screenMsg(msg); ///消息显示在自己聊天面板
          msg.display = true;
          this.$store.commit("updateChaterAttr", {
            type: this.chattype,
            val: this.chat_to_puid,
            attr: "lastmsg",
            data: content,
            addinfo: {
              weidu: 0,
              lastmsg: content,
              id: this.chat_to_puid,
              avatar: this.user_other_row.user_avatar,
              user_id: this.user_other_row.user_id,
              username: this.user_other_row.user_nickname,
              logtype: this.chattype,
            },
          });

          this.$store.commit("resetWeidu", {
            type: this.chattype,
            val: this.chat_to_puid,
          });

          this.$apiconfig.cacheMessage(
            msg,
            this.chattype,
            this.chat_to_puid,
            tempmy
          );
        }
      });

      return;

      ////聊天记录存入缓存
      //
      this.$apiconfig
        .sendMessage_f({
          data: msg,
        })
        .then((res) => {
          console.log(res);
        });

      // 定时器模拟对方回复,三秒
      /*setTimeout(()=>{
				    lastid = this.msgList[this.msgList.length-1].msg.id;
				    lastid++;
				    msg = {type:'user',msg:{id:lastid,time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:content}}

				    // 本地模拟发送消息
				    this.screenMsg(msg);
				},3000)*/
    },

    // 添加文字消息到列表
    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);
    },
    // 打开红包
    openRedEnvelope(msg, index) {
      let rid = msg.content.rid;
      uni.showLoading({
        title: "加载中...",
      });
      // console.log("index: " + index);
      //模拟请求服务器效果
      setTimeout(() => {
        //加载数据
        if (rid == 0) {
          this.redenvelopeData = {
            rid: 0, //红包ID
            from: "大黑哥",
            face: "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face.jpg",
            blessing: "恭喜发财，大吉大利",
            money: "已领完",
          };
        } else {
          this.redenvelopeData = {
            rid: 1, //红包ID
            from: "售后客服008",
            face: "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg",
            blessing: "恭喜发财",
            money: "0.01",
          };
          if (!msg.content.isReceived) {
            // {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
            this.sendSystemMsg(
              {
                text:
                  "你领取了" +
                  (msg.userinfo.uid == this.myuid
                    ? "自己"
                    : msg.userinfo.username) +
                  "的红包",
              },
              "redEnvelope"
            );
            // console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));
            this.msgList[index].msg.content.isReceived = true;
          }
        }
        uni.hideLoading();
        this.windowsState = "show";
      }, 200);
    },
    // 关闭红包弹窗
    closeRedEnvelope() {
      this.windowsState = "hide";
      setTimeout(() => {
        this.windowsState = "";
      }, 200);
    },
    sendSystemMsg(content, type) {
      let lastid = this.msgList[this.msgList.length - 1].msg.id;
      lastid++;
      let row = {
        type: "system",
        msg: {
          id: lastid,
          type: type,
          content: content,
        },
      };
      this.screenMsg(row);
    },
    //领取详情
    toDetails(rid) {
      uni.navigateTo({
        url: "HM-details/HM-details?rid=" + rid,
      });
    },
    // 预览图片
    showPic(msg) {
      uni.previewImage({
        indicator: "none",
        current: msg.content.url,
        urls: this.msgImgList,
      });
    },
    getSplit(item, index) {
      if (index == 1) {
        return item.split(",")[index] + "?200*200.png";
      } else {
        return item.split(",")[index];
      }
    },
    playVideo(row) {
      console.log(row);
      let item = "";
      if (row.message_cat) {
        item = row.message_content;
      } else {
        item = row.msg.content.url;
      }
      console.log(item);

      this.video = item;
      this.isPlay = true;

      setTimeout(() => {
        this.$refs.video.play();
      }, 100);
    },
    // 播放语音
    playVoice(row) {
      this.playMsgid = row.msg.id;
      if (row.message_length) {
        this.AUDIO.src = row.message_content;
      } else {
        this.AUDIO.src = row.msg.content.url;
      }
      this.$nextTick(function () {
        this.AUDIO.play();
      });
    },
    // 录音开始
    voiceBegin(e) {
      if (e.touches.length > 1) {
        return;
      }
      this.initPoint.Y = e.touches[0].clientY;
      this.initPoint.identifier = e.touches[0].identifier;
      this.RECORDER.start({
        format: "mp3",
      }); //录音开始,
    },
    //录音开始UI效果
    recordBegin(e) {
      this.recording = true;
      this.voiceTis = this.__("松开 结束");
      this.recordLength = 0;
      this.recordTimer = setInterval(() => {
        this.recordLength++;
      }, 1000);
    },
    // 录音被打断
    voiceCancel() {
      this.recording = false;
      this.voiceTis = this.__("按住 说话");
      this.recordTis = this.__("手指上滑 取消发送");
      this.willStop = true; //不发送录音
      this.RECORDER.stop(); //录音结束
    },
    // 录音中(判断是否触发上滑取消发送)
    voiceIng(e) {
      if (!this.recording) {
        return;
      }
      let touche = e.touches[0];
      //上滑一个导航栏的高度触发上滑取消发送
      if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
        this.willStop = true;
        this.recordTis = this.__("松开手指 取消发送");
      } else {
        this.willStop = false;
        this.recordTis = this.__("手指上滑 取消发送");
      }
    },
    // 结束录音
    voiceEnd(e) {
      if (!this.recording) {
        return;
      }
      this.recording = false;
      this.voiceTis = this.__("按住 说话");
      this.recordTis = this.__("手指上滑 取消发送");
      this.RECORDER.stop(); //录音结束
    },
    //录音结束(回调文件)
    recordEnd(e) {
      clearInterval(this.recordTimer);
      if (!this.willStop) {
        // console.log("e: " + JSON.stringify(e));
        let tempFilePaths = e.tempFilePath;
        let that = this;
        let urlpaht = that.Config.URL.upload_file;
        this.$.uploadFile({
          url: urlpaht, //仅为示例，非真实的接口地址
          filePath: tempFilePaths,
          header: {
            merchcode: that.$apiconfig.merchcode,
          },
          name: "upfile",
          formData: {
            user: "test",
          },
          success: (uploadFileRes) => {
            let tmpres = JSON.parse(uploadFileRes.data);

            let msg = {
              length: 0,
              url: tmpres.data.url,
            };

            let min = parseInt(this.recordLength / 60);
            let sec = this.recordLength % 60;
            min = min < 10 ? "0" + min : min;
            sec = sec < 10 ? "0" + sec : sec;
            msg.length = min + ":" + sec;
            ///上传录音到服务器
            this.sendMsg(msg, "voice");
          },
        });
      } else {
        // console.log('取消发送录音');
      }
      this.willStop = false;
    },
    // 切换语音/文字输入
    switchVoice() {
      this.hideDrawer();
      this.isVoice = this.isVoice ? false : true;
    },
    discard() {
      return;
    },
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
      console.info(href);
      console.info(e);

      this.$.gopage(href);
    },
  },
};
</script>
<style lang="scss">
@import "@/static/HM-chat/css/style.scss";
@import url("@/components/u-parse/u-parse.css");

.m-product-info1 {
  width: 400rpx;
}

.chat-bubble-box {
  min-width: 300rpx !important;
  color: #ffffff;
}

.videoCont {
  background-color: #f8f8f8 !important;
  border-radius: 0 !important;
  width: 300rpx;
  height: 300rpx;
  position: relative;

  .cover {
    width: 300rpx;
    height: 300rpx;
  }

  .button {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.videoShow {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  background-color: #fff;

  .header {
    padding: 0 30rpx;
    font-size: 28rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #fff;
  }

  video {
    position: absolute;
    /* #ifdef MP-WEIXIN */
    top: 80rpx;
    /* #endif */
    /* #ifndef MP-WEIXIN */
    top: calc(var(--status-bar-height) + 80rpx);
    /* #endif */
    bottom: 0;
    width: 750rpx;
    height: 90%;
  }
}
</style>