<template>
  <div class="chatRoom">
    <div class="m-header">
      <span class="chatRoom-name">{{name}}</span>
      <span @click="showDe" class="chatcount" v-show="count!=0">(&nbsp{{count}}&nbsp)&nbsp人</span>
      <span class="showmore" @click="showDe()" v-if="chatObj.msgType==2">...</span>
    </div>
    <div class="mainbody">
      <div class="demo-split">
        <Split v-model="split2" mode="vertical">
          <div slot="top" class="demo-split-pane">
            <div @click="getMoreChatRecord" class="moreChatRecord" v-if="chatScrollHeight == 0 && isShowMore">
              <p>查看更多消息</p>
            </div>
            <div class="moreChatRecord" v-if="chatScrollHeight == 0 && !isShowMore">
              <p class="noMore">没有更多记录了哟~</p>
            </div>
            <ul v-loading="loading" class="chatUl" ref="messageWrapper" @mousewheel="onMouseWheel">
              <!--@mousewheel="onMouseWheel"-->
              <li @mouseenter="chatenter(index)" @mouseleave="chatleave()" v-show="item.content!=null"
                  v-for="(item,index) in messages" :class="getClass(item.self)">
                <div class="toux">
                  <img :src="'http://101.132.238.98:9090/' + item.fromAccountImage"
                       class="chattoux" v-if="!!item.fromAccountImage">
                  <img class="chattoux" src="../../assets/maildatou.png"
                       v-if="!item.fromAccountImage">

                  <!--<div slot="content">-->
                  <!--<md-card>-->
                  <!--<md-card-header>-->
                  <!--<md-card-header-text>-->
                  <!--<div class="md-title">{{item.fromAccountName}}</div>-->

                  <!--</md-card-header-text>-->

                  <!--<md-card-media>-->
                  <!--<img :src="'http://101.132.238.98:9090/' + item.fromAccountImage" v-if="!!item.fromAccountImage">-->
                  <!--<img src="../../assets/maildatou.png" v-if="!item.fromAccountImage">-->
                  <!--</md-card-media>-->

                  <!--</md-card-header>-->
                  <!--<div class="pd16">-->
                  <!--<div class="md-subhead"><span class="textdq">手机号</span>&nbsp&nbsp{{userInfos.mobNo}}</div>-->
                  <!--<div class="md-subhead"><span class="textdq">单位</span>&nbsp&nbsp{{userInfos.companyName}}</div>-->
                  <!--<span class="chaochuhh md-subhead"><span class="textdq">个人简介</span>&nbsp&nbsp{{userInfos.profile}}</span>-->

                  <!--</div>-->


                  <!--</md-card>-->


                  <!--</div>-->
                </div>
                <div class="c-body">


                  <p style="text-align: left" v-if="!item.self">{{item.fromAccountName}}</p>
                  <!-- item.type为1是文本类型的聊天记录，item.type为2是文件类型的聊天记录 -->


                  <p class="content" v-if="item.type == '1'">
                    <span v-if="panduana(item.content)" v-html="returna(item.content)">{{item.content}}</span>
                    <span v-else v-html="replace_em(item.content)">{{item.content}}</span>

                    <a id="triangles"></a>
                    <span class="readflag yidu" v-if="item.readFlag&&chatObj.msgType!=2&&item.self">已读</span>
                    <span class="readflag weidu" v-if="!item.readFlag&&chatObj.msgType!=2&&item.self">未读</span>
                    <span v-if="chatindex==index" class="copys" v-clipboard:copy="item.content"
                          v-clipboard:success="onCopy"
                          v-clipboard:error="onError">
						复制
                      <!-- <Tooltip content="复制" placement="top">
                         <Icon class="copyicon" type="md-copy" />
                             </Tooltip> -->


						</span>
                  </p>


                  <p class="content" v-if="item.type == '2'" style="background: #fff;">
                    <a class="fileurl">
                      <!-- <span>{{item.content}}</span><br> -->
                      <div @click="showlan(item)" class="wdicon">
                        <div class="wdicon_left">
                          <img :src="panIcon(item.fileType)" alt="">
                        </div>
                        <div class="wdicon_right">
                  <p>{{item.content}}</p>
                  <p class="matop8">{{convertFileSize(item.size, "B")}}</p>
                </div>
          </div>
          <span class="fileurlss"><span @click.stop="showlan(item)" class="yulans">预览</span>&nbsp&nbsp
								<span class="xiazais" @click="chatFileDownload(item)">下载</span>
								</span>
          </a>
          <span class="readflag yidu" v-if="item.readFlag&&chatObj.msgType!=2&&item.self">已读</span>
          <span class="readflag weidu" v-if="!item.readFlag&&chatObj.msgType!=2&&item.self">未读</span>
          <a id="triangles"></a>
          </p>


          <p class="content" v-if="item.type == '4'">
            <video preload="auto" controls="controls" playsinline="true" x-webkit-airplay="allow" x5-playsinline
                   x5-video-player-type="h5" x5-video-player-fullscreen="true" style="object-fit:fill"
                   :src="item.url"></video>
            <a id="triangles"></a>
          </p>


          <p class="date">{{item.time | parseTime}}</p>
      </div>
      </li>
      <p style="clear: both;height: 1px;"></p>

      </ul>
    </div>


    <div slot="bottom" class="demo-split-pane">
      <li class="sendMes" @mousedown.stop="mousedown">
        <div class='sendhead'>
          <span v-show="showUpload" class="gpic" @click="fileDialogShow = true">
						<img alt='发送文件' src="../../assets/chat/fujian.svg">
					</span>
          <span v-show="showVideo" class="gpic" @click="openVideo">
						<img alt='发起视频' src="../../assets/chat/video.svg">
					</span>
          <span class="gpic" @click="openRecord">
						<img alt="聊天记录" src="../../assets/chat/lishi.svg">
					</span>
          <el-popover
            placement="top"
            title="表情选择"
            trigger="hover"
          >
            <!-- 表情包组件 -->
            <emoji @emojiData="emojiData"></emoji>
            <span slot="reference" class="gpic">
						<img alt="表情" src="../../assets/icon/tool/ltxl.svg">
					</span>
          </el-popover>
        </div>
        <!-- <el-input v-show="false" @focus="getNewmessages" type="textarea" class="sendContent" placeholder="按 Enter 发送" v-model="msgInfo.msg"></el-input> -->
        <!-- <div class="innerHtml" conteneditable='true'>

                </div> -->
        <tiny :texts="msgInfo.msg" v-on:contentss="contentss"></tiny>

        <p class="send" v-if="!!msgInfo.msg.trim()">
          <lbButton name="发送" @clicks="goSendMsg(1)" type="1" size="1"></lbButton>

        </p>
      </li>
    </div>
    </Split>

  </div>

  </div>
  <el-dialog title="" :visible.sync="picDialogShow" :fullscreen="true" center v-dialogDrag :modal="false"
             :close-on-click-modal="false" custom-class="picDIas">
    <img :src="picUrl" class="picshow"></img>
  </el-dialog>

  <el-dialog title="聊天记录" :visible.sync="isRecord" width="500px" center custom-class="recordDia">
    <chatRecord :chatObj="chatObj"></chatRecord>
  </el-dialog>
  <el-dialog v-loading="fileloading"
             element-loading-text="拼命上传中...请稍等..." title="请选择文件" :visible.sync="fileDialogShow" width="500px" center>
    <div class="upload_dialog">
      <div class="mouse_shade upload_local" @mouseover="localImg = require('../../assets/file/bendiwenjians.svg')"
           @mouseleave="localImg = require('../../assets/file/bendiwenjian.svg')">
        <el-upload :http-request="uploadFile" :file-list="fileList" action="">
          <!--<div style="width: 7rem;">-->
          <img :src="localImg"/>
          <!--<img src="../../assets/icon/file/local-normal.svg" />-->
          <p style="width: 6rem;" class="title">本地文件</p>
          <!--</div>-->
        </el-upload>
      </div>
    </div>
  </el-dialog>
  <el-dialog title="成员列表" width="165px" :visible="isShowRight" :before-close="handleClose" :modal="false"
             :show-close="false" class="newDetail">
    <ul v-loading="listsloading" class="lists">
      <i @click="isAddsf()" class="el-icon-circle-plus"></i>
      <i v-show="userNames==qunzhuname && wutichu>=1" @click="isdeltef('1')" class="el-icon-remove"></i>
      <i v-show="userNames!=qunzhuname && lvshself==false" class="el-icon-error" @click="isdeltef('2')"></i>

      <li v-if="item.role=='Owner'" v-for="item in memeberlist"><img
        :src="'http://101.132.238.98:9090/' + item.headImg">{{item.userName}}<span
        class="colororg">&nbsp&nbsp&nbsp群主</span></li>
      <li v-if="item.role!='Owner'&&item.lawyerFlag==true" v-for="item in memeberlist"><img
        :src="'http://101.132.238.98:9090/' + item.headImg">{{item.userName}}<span class="colororg chenban">&nbsp&nbsp&nbsp承办律师</span>
      </li>
      <li v-if="item.role!='Owner'&&item.lawyerFlag!=true" v-for="item in memeberlist"><img
        :src="'http://101.132.238.98:9090/' + item.headImg">{{item.userName}}
      </li>

      <li v-show="userNames==qunzhuname&&lvshself==false" class="jiesanli">
        <el-button class="addButton jiesan" @click="DissolveGroupChat">解散群组</el-button>
      </li>


    </ul>
  </el-dialog>

  <el-dialog title="群聊踢出" v-dialogDrag :visible.sync="groupshow" width="300px" :modal="false"
             :close-on-click-modal="false"
             custom-class="addDialig">
    <p>成员列表</p>
    <div class="cytc">
      <li class='tcli' v-if="item.role!='Owner'&&!item.lawyerFlag" v-for="item in memeberlist">
        <md-checkbox class="md-primary" v-model="checkLists" :value="item">{{item.userName}}</md-checkbox>
      </li>
    </div>
    <p class="dialogcenter">
      <el-button class="addButton" @click="KickGroupChat('1')">踢出</el-button>
    </p>
  </el-dialog>

  <el-dialog title="群聊邀请" v-dialogDrag :visible.sync="isAdds" width="300px" :modal="false" :close-on-click-modal="false"
             custom-class="addDialig">
    <addGroup :childmsg="msg" ref="addgroup" @isShua="isShuas"></addGroup>
  </el-dialog>

  <div class="savefile">

    <el-dialog id="baocunweizhi" v-dialogDrag title="文件保存" :visible.sync="isSaveFile" width="400px" append-to-body>
      <p class="slectfile">请选择存放位置&nbsp&nbsp&nbsp
        <el-select v-model="savePalce" placeholder="请选择">
          <el-option v-for="item in savePalceList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </p>
      <p class="dialogcenter">
        <el-button class="secondButton-white" @click="isSaveFile=false">取消</el-button>
        <el-button class="secondButton" @click="saveChatFile">保存</el-button>
      </p>
    </el-dialog>
  </div>

  <el-dialog
    :close-on-click-modal="false"
    title="视频聊天"
    :visible.sync="videoDialogVisible"
    width="80%"
    :before-close="videoClose">
    <videoRoom></videoRoom>
  </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VueClipboard from 'vue-clipboard2'
  VueClipboard.config.autoSetContainer = true
  Vue.use(VueClipboard)
  import videoRoom from '../roomVideo/video.vue'
  import {
    getApi,
    postApi,
    getMessage
  } from "../../api/commonApi";
//  import {
//    mapGetters,
//    mapState,
//    mapActions
//  } from 'vuex';
  import IScroll from 'iscroll';
  import $ from 'jquery';
  import {
    webim
  } from '../../../static/sdk/webim.js'
  import emoji from '../emoji/emoji'
  import chatRecord from './chatRecord'
  import addGroup from './addGroup'
  import {isPic} from '../../utils/isPicture.js'
  import tiny from '../tinymce/editor3'
  import {debug} from 'util';
  import lbButton from '../material/button/lbButton.vue'
  export default {
    name: 'chatRoom',
    /**
     * name：聊天对象的名称或群名称
     * chatObj：聊天相关信息
     * isShowMore：是否展示查看更多消息按钮
     */
    filters: {
      parseTime(time, cFormat) {
        if(arguments.length === 0) {
          return null
        }
        const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
        let date
        if(typeof time === 'object') {
          date = time
        } else {
          if(('' + time).length === 10) time = parseInt(time) * 1000
          date = new Date(time)
        }
        const formatObj = {
          y: date.getFullYear(),
          m: date.getMonth() + 1,
          d: date.getDate(),
          h: date.getHours(),
          i: date.getMinutes(),
          s: date.getSeconds(),
          a: date.getDay()
        }
        const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
          let value = formatObj[key]
          if(key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
          if(result.length > 0 && value < 10) {
            value = '0' + value
          }
          return value || 0
        })
        return time_str
      }
    },
    props: ['name', 'chatObj', 'isShowMore', 'showUpload', 'showVideo', 'messages'],
    data() {
      return {
        videoDialogVisible: false,
        userNames: localStorage.getItem("userName"),
        filesItem: {},//文件对象
        split2: 0.7,//聊天记录框初始比例
        filecontent: '',
        filecontentsize: '',
        showtype: 0,// 1 文档 2图片 展示
        fileshowurl: null,//聊天窗口文件预览
        fileshow: false,//聊天文件预览
        urlshow: [],//文件预览地址
        count: 0,//群组
        msg: '1',//群组唤起
        isAdds: false,
        checkList: [],
        isRecord: false,
        isWangpan: false,
        isOnline: false,
        picDialogShow: false,
        picUrl: '',
        isread: '1',
        isEmty: false,
        list: [],
        loading: false,
        msgInfo: {
          fromUid: localStorage.getItem("userId"),
          toUid: '', //好友id
          msg: '',
          msgType: '1'
        },
        userId: localStorage.getItem("userId"),
        loginInfo: JSON.parse(localStorage.getItem("loginInfo")),
        headurl: JSON.parse(localStorage.getItem("loginInfo")).headurl,
        fileList: [],
        fileTemp: '',
        fileUrl: '',
        msgTemp: '',
        saveChatInfoReq: { //保存数据库聊天记录的请求体
          "chatFlag": 1, //chatFlag:1.单聊 2.群聊【必传】
          "content": "", //发送内容
          "msgType": "1", //消息类型   1.文本 2.文件 3.语音 4.视频
          "receiver": "", //聊天对象id
          "sender": localStorage.getItem('userId'), //发送者id
          "fileUrl": '', //上传本地文件的文件Url
          "fileName": '', //上传本地文件的文件名称
          "fileSize": '', //文件大小
          "businessFileId": '', //上传网盘文件的文件id
          "system": true, //是否是网盘文件
          "fileId": '',//文件id
        },
        getChatInfoReq: { //获取数据库聊天记录的请求体
          chatFlag: 2, //1.单聊 2.群聊【必传】
          friendId: '', //好友id或群组id【必传】
          userId: localStorage.getItem('userId'), //用户id【必传】
          queryKey: '', //搜索内容【可选】
          page: 1, //页码【可选】
          limit: 15, //每页条数【可选】
        }, //获取app服务端数据库聊天记录的请求体
        chatRecordList: [], //聊天记录列表
        fileDialogShow: false, //是否显示选择文件的弹框
        hdFileShow: false, //硬盘的文件目录是否展示
        hdDirList: [], //我的硬盘的目录列表
        hdDirFileList: [], //我的硬盘下的某个目录的文件列表
        loadGif: require('../../assets/gif/loading.gif'),
        chatScrollHeight: 100, //滚动条滚动到的聊天记录的位置
        localImg: require('../../assets/icon/file/local-normal.svg'), //本地文件图标
        skyDriveImg: require('../../assets/icon/file/sky-driver-normal.svg'), //网盘文件图标
        muList: [],
        slectlist: [],
        queryKeys: '',
        info: {
          content: '',
          type: '1',
          createUser: localStorage.getItem('userId'),
          noticeUserIdList: []
        },

        isShowRight: false,
        memeberlist: [],//群成员列表
        checkLists: [],//踢出列表
        checkListsid: [],//踢出id列表
        groupshow: false,//群组列表选框
        wutichu: 0,//有无可踢出人员
        qunzhuname: 0,//群主姓名
        selfGroupId: 0,//自己群聊id (用于退出群聊)
        lvshself: false,//自己是否是律师身份 false不是  true是,
        fileIcon: require('../../assets/icon/file/word.png'), //文件icon
        listsloading: false,//成员列表加载...
        savePalce: '网盘',//存储位置
        savePalceList: [{//存储选择表
          value: '网盘',
          label: '网盘'
        },
          {
            value: '本地',
            label: '本地'
          }
        ],
        isSaveFile: false,//存储弹框,
        websock: null,
        fileloading: false,//文件上传加载...
        chatindex: null,
        userInfos: {},
      }
    },
    components: {
      chatRecord,
      addGroup,
      emoji,
      tiny,
      lbButton,
      videoRoom
    },
    created() {


      this.getList();
//      this.getMyHardDiskDirs();
//      this.getFilelist();


    },
    watch: {
      checkLists(val){
        this.checkListsid = []
        console.log(val)
        for (let i = 0; i < this.checkLists.length; i++) {
          this.checkListsid.push(this.checkLists[i].memberAccount)

        }
      },
      //当选中check变化时 请求接口获取预览url
      checkList(val){
        this.urlshow = []
        console.log(val)

        for (let i = 0; i < val.length; i++) {
          if (this.filepan(val[i].suffix)) {//为office类型
            this.getUrl(val[i].fileId, val[i].fileName)
          } else {//为图片类型无需获取url
            let obj = {}
            obj = {fileName: val[i].fileName, fileUrl: val[i].fileUrl, fileType: 2}
            this.urlshow.push(obj)
          }

        }
        console.log(this.urlshow)
      },
      'messages': {
        deep: true,
        handler() {
          this.getMemberlist()
          let that = this;
          this.$nextTick(() => {
            if (that.messages.length <= 15) { //只有加载第一页聊天记录时定位到页面底部
              that.scrollTo();
            }
          });

        }
      }


    },
//    computed: {
//      ...mapState(['messages'])
//    },
    mounted() {


      let that = this;
      this.$nextTick(() => {
        that.scrollTo();
        that._initScroll();
      });


//  var texteare=document.getElementsByTagName('textarea')[0]
// 		texteare.onkeydown=function(e){
// if(e.keyCode == 13 && e.ctrlKey){
//                  // 这里实现换行

// }else if(e.keyCode == 13){
// // 避免回车键换行

// e.preventDefault();
// // 下面写你的发送消息的代码
// 	that.goSendMsg(1);
// }
// }
      $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        }
      });

    },
    // updated() {
    // 	this.getMemberlist()
    // },


    methods: {
      videoClose(){
        this.videoDialogVisible = false
      },
      /**
       * 设置是否显示更多消息的值
       */
      setIsShowMore(val) {
        this.isShowMore = val;
      },
      //根据用户ID获取案件附件和网盘文件列表
      getFilelist(){
        // debugger
        let that = this;
        getApi('/document/fileInfo/case/list', {
          userId: localStorage.getItem('userId'), //用户id
          queryKey: that.queryKeys
        }, function (data) {
          //成功
          that.muList = data.list;
          console.log(that.muList)
        }, function (data) {
          //失败
        })
      },
      /**
       * 获取我的硬盘下的文件夹目录列表
       */
      getMyHardDiskDirs() {
        let that = this;
        getApi('document/fileCatalog/docList', {
          userId: localStorage.getItem('userId'), //用户id
        }, function (data) {
          //成功
          that.hdDirList = data.list;
        }, function (data) {
          //失败

        })
      },

      /**
       * 当前激活面板改变时触发
       */
      handleMessage(val) {
        let index = val - 1;
        this.getMyHdDirFileList(this.hdDirList[index].catalogId);
      },

      /**
       * 获取我的硬盘下的某个目录下的文件列表
       */
      getMyHdDirFileList(dirId) {
        let that = this;
        getApi('document/fileInfo/list', {
          userId: localStorage.getItem('userId'), //用户id
          webCatalogId: dirId, //目录id
        }, function (data) {
          //成功
          that.hdDirFileList = data.page.list;
        }, function (data) {
          //失败

        })
      },

      /**
       * 获取更多聊天记录的数据
       */
      getMoreChatRecord() {
        this.$emit('getMoreChatRecord');
      },

      /**
       * 鼠标滚轮事件 鼠标滑到顶部再继续往上滑动可以获取更多聊天记录
       */
      onMouseWheel(e) {
        console.log('嘿嘿嘿', e.deltaY);
        this.chatScrollHeight = $(".chatUl").get(0).scrollTop;
        if (e.deltaY <= -100 && this.chatScrollHeight == 0 && this.isShowMore) { //鼠标向上滑动且滑动到顶部
          this.getMoreChatRecord();
        }
      },

      scrollTo() {
        let mb = $(".chatUl").get(0);
        if (mb != undefined) {
          mb.scrollTop = mb.scrollHeight;
        }

      },
      _initScroll() {
        this.messageScroll = new IScroll(this.$refs.messageWrapper, {
          click: true
        });
      },
      getList() {

      },
      getClass(value) {
        if (value) {
          return 'isRight'
        } else {
          return 'isLeft'
        }
      },
      //缩小窗口
      letSmall() {
        this.$emit('isSmall', true)
      },
      //已读未读
      readMe(index) {
        this.isread = index
      },
      mousedown(e) {

      },
      keySend: function (event) {

// 				if (event.ctrlKey && event.keyCode === 13) {
// 					this.send();
// 				}
      },

      /**
       * webim发送消息
       *
       * msgType   消息类型    1.文本 2.文件 3.语音 4.视频
       * isSystem  要上传的是否是网盘文件
       * fileUrl  要上传的本地文件Url
       * businessFileId  要上传的网盘文件id
       * fileName  要上传的本地文件名称
       * fileSize  文件大小
       */
      goSendMsg(msgType, item, fileUrl, fileName, fileSize) {
        let result = ''
        if (item) {
          let str = localStorage.getItem('video')
          result = str.substr(30, str.length);//截取后台返回的房间地址
        }
        if (this.msgInfo.msg == '\n') {
          return this.msgInfo.msg = ''
        }
        this.hdFileShow = false;
        this.fileDialogShow = false;
        let that = this;
        let selSess = new webim.Session(this.chatObj.msgType == 1 ? webim.SESSION_TYPE.C2C : webim.SESSION_TYPE.GROUP, this
            .chatObj.toUid, this.chatObj.toUid, '',
          Math.round(new Date().getTime() / 1000));
        let msg = new webim.Msg(selSess, true, -1, Math.round(Math.random() * 4294967296), Math.round(new Date().getTime() /
          1000), this.loginInfo.identifier, webim.GROUP_MSG_SUB_TYPE.COMMON, this.loginInfo.identifierNick);
        let text_obj;
        if (item) {
          text_obj = new webim.Msg.Elem.Text('lb://meeting.' + result);
        } else {
          text_obj = new webim.Msg.Elem.Text(that.msgInfo.msg);
        }
        msg.addText(text_obj);
        webim.sendMsg(msg, function (resp) {
          //发送成功
          // alert('发送成功')
          //保存记录到后台数据库
          that.saveChatInfo(msgType, fileUrl, fileName, fileSize, item);
          //组装后的消息
        }, function (err) {
          //发送失败
          // alert('发送失败' + JSON.stringify(err))
        })


      },

      /**
       * 保存一条聊天记录到数据库
       *
       * msgType   消息类型    1.文本 2.文件 3.语音 4.视频
       * isSystem  要上传的是否是网盘文件
       * fileUrl  要上传的本地文件Url
       * businessFileId  要上传的网盘文件id
       * fileName  要上传的本地文件名称
       * fileSize  文件大小
       */
      saveChatInfo(msgType, fileUrl, fileName, fileSize, item) {
        this.saveChatInfoReq.msgType = msgType; //消息类型
        this.saveChatInfoReq.chatFlag = this.chatObj.msgType == 1 ? 1 : 2; //1.单聊 2.群聊【必传】
        this.saveChatInfoReq.content = msgType == 1 ? this.msgInfo.msg : fileName; //发送内容
        this.saveChatInfoReq.receiver = item ? item : this.chatObj.toUid; //聊天对象id
        this.saveChatInfoReq.fileUrl = fileUrl;
        this.saveChatInfoReq.fileName = fileName;
        this.saveChatInfoReq.fileSize = fileSize;
        let that = this;
        console.log(that.saveChatInfoReq)
        postApi('/chat/chatinfo/save',
          this.saveChatInfoReq,
          function (data) {
            debugger
            console.log(data)

            setTimeout(() => {
              that.$emit('getNewmessage');//刷新父级群组列表
            }, 3000);

            console.log(data.chatInfo.socialFileId)
            //成功

            let fileType;
            if (msgType == '2' || msgType == '4') { //文件类型
              if (!!fileName && fileName.indexOf('.') != -1) {
                let index = fileName.lastIndexOf(".");
                fileType = fileName.substring(index + 1, fileName.length);
              }
            }
            let message = {
              type: msgType,
              content: msgType == 1 ? that.msgInfo.msg : fileName,
              url: fileUrl, //发送的文件url,如果是网盘文件不用加前缀，因为网盘文件返回的fileUrl是全路径
              size: fileSize, //发送的文件大小
              fileType: fileType,
              self: true,
              socialFileId: data.chatInfo.socialFileId,
              time: new Date(),
              fromAccountName: localStorage.getItem('userName'),
              fromAccountImage: localStorage.getItem('photo'),
              isGroup: that.chatObj.msgType == 1 ? true : false
            };
            that.messages.push(message);
            that.msgInfo.msg = ''; //清空发送的内容
            setTimeout(function () {
              that.scrollTo(); //定位到最底部
            }, 300);
            that.$emit('isShua', 1)
          },
          function (data) {
            //失败
            getMessage(data.msg, 'error');
          })
      },

      /**
       * 根据列表的某一个属性排序返回排序后的集合
       */
      compareInitials(property) {
        return function (a, b) {
          var value1 = a[property];
          var value2 = b[property];
          if (/^\d/.test(value1) ^ /^\D/.test(value2)) return value1 > value2 ? 1 : (value1 == value2 ? 0 : -1);
          return value1 > value2 ? -1 : (value1 == value2 ? 0 : 1);
        }
      },
      /**
       * 上传本地文件
       */
      uploadFile(item) {
        // debugger
        let that = this;
        let formData = new FormData();
        that.fileloading = true;
        formData.append('file', item.file)
        console.log(formData)
        postApi('/file/upload',
          formData,
          function (data) {
            //成功
            if (data.fileUrl == null || data.fileUrl == '') {
              getMessage('上传失败', 'error');
              return
            }
            console.log(data)
            that.fileloading = false;
            if (!!data.fileUrl && data.fileUrl.indexOf('.') != -1) {
              let index = data.fileUrl.lastIndexOf(".");
              let fileType = data.fileUrl.substring(index + 1, data.fileUrl.length);
              if (fileType == 'mp4') {//发送视频
                that.goSendMsg(4, data.fileUrl, item.file.name, item.file.size);
              } else {//发送文件（图片,文档。。。）
                that.goSendMsg(2, data.fileUrl, item.file.name, item.file.size);
              }
            }

            that.fileDialogShow = false;
          },
          function (data) {
            //失败
            getMessage('上传失败', 'error');
            that.fileDialogShow = false;
          })
      },

      /**
       * 换算文件大小
       *
       * fileSize 文件大小
       * unit 文件大小单位
       */
      convertFileSize(fileSize, unit) {
        let binaryUnit = 1024;
        let size; //换算后的文件大小
        switch (unit) {
          case 'B': //字节
            let convertKBSize = fileSize / 1024;
            let convertMBSize = convertKBSize / 1024;
            if (convertKBSize < 1) { //小于1KB以B的形式展示
              size = fileSize + 'B';
            } else if (convertKBSize >= 1 && convertKBSize < 1024) { //大于等于1KB且小于1024KB以KB的形式展示
              size = convertKBSize.toFixed(1) + 'KB';
            } else if (convertMBSize >= 1) {
              size = convertMBSize.toFixed(1) + 'MB';
            }
            break;

          case 'KB':

            break;

          case 'MB':

            break;
        }
        return size;
      },
      selectTwo(id){
        var index = this.slectlist.indexOf(id);
        if (index > -1) {
          this.slectlist.splice(index, 1);
        } else {
          this.slectlist.push(id);
        }
      },
      getOpen(id){
        var index = this.slectlist.indexOf(id);
        if (index > -1) {
          return true
        } else {
          return false
        }
      },
      //发送文件，可多选
      sendFile(){
        debugger
        let that = this
        console.log(that.checkList)
        if (that.checkList.length == 0) {
          getMessage('请选择文件', 'warning');
          return
        }
        for (let i = 0; i < that.checkList.length; i++) {
          if (that.checkList[i].fileUrl == null) {
            getMessage('文件' + that.checkList[i].fileName + '路径已失效,请重新上传', 'warning');
          }

          if (that.checkList[i].fileUrl != null) {
            that.goSendMsg(2, that.checkList[i].fileUrl, that.checkList[i].fileName, that.checkList[i].fileSize)
          }
        }
        that.checkList = []
        that.urlshow = []


      },
      toLoad(url, fileName, type){
        debugger
        console.log(fileName)
        if (this.filepan(type)) {
          window.location.href = url
        } else {
          window.open(url)
        }
        //


      },

      ieDown(){
        window.open(url)

      },
      isIE (){
        const explorer = window.navigator.userAgent;
        return explorer.indexOf('MSIE') >= 0 || explorer.indexOf('Trident/7.0') >= 0 || explorer.indexOf('Edge') >= 0;
      },
      //开启视频会议
      openVideo(){
        let that = this;
        getApi('/system/fileinfo/roomUrl', {},
          function (data) {
            localStorage.setItem("video", data.url)//存储会议房间地址
            that.$nextTick(function () {
              that.info.content = data.url
              if (that.chatObj.msgType == 1) {
                that.info.noticeUserIdList.push(that.chatObj.toUid)
              } else {
                that.getMemberlist()
                for (let i = 0; i < that.memeberlist.length; i++) {
                  if (that.memeberlist[i].memberAccount != localStorage.getItem('userId')) {
                    that.info.noticeUserIdList.push(that.memeberlist[i].memberAccount)
                  }
                }
                console.log(that.info.noticeUserIdList)
              }
              for (let item of that.info.noticeUserIdList) {
                that.goSendMsg('1', item)
              }

//              postApi('/system/noticeInfo/generate', that.info,
//                function (data) {
              getMessage('邀请成功', 'success')
//              const {href} = that.$router.resolve({
//                name: 'video'
//              })
//              let iWidth = 1050; //弹出窗口的宽度;
//              let iHeight = 630; //弹出窗口的高度;
//              let iTop = (window.screen.availHeight - 30 - iHeight) / 2; //获得窗口的垂直位置;
//              let iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置;
//              window.open(href + '?' + 'ivideo=1', 'win_name2', "height=" + iHeight + ", width=" + iWidth + ", top=" + iTop + ", left=" +
//                iLeft);
              that.videoDialogVisible = true
//                },
//                function (data) {
//                  getMessage(data.msg, 'error')
//                });
            })
          },
          function (data) {
            getMessage(data.msg, 'error')
          });

      },
      //打开聊天记录
      openRecord(){

        this.isRecord = true
      },
      //查看群成员列表
      showList(){
        console.log(this.chatObj)
      },
      //			弹出详情
      showDe() {
        $(".chatRoom .newDetail .el-dialog").animate({
          width: '183px'
        }, 500)
        this.getMemberlist()
        this.isShowRight = true
      },
      handleClose() {
        $(".chatRoom .newDetail .el-dialog").animate({
          width: '0%'
        }, 500)
        setTimeout(() => {
          this.isShowRight = false
        }, 500);
        //

      },
      isShuas(){
        this.isAdds = false
        this.getMemberlist()
      },
      //获取群成员列表
      getMemberlist(){
        let that = this
        that.groupshow = false;
        that.wutichu = 0;
        that.count = 0;
        that.listsloading = true;
        getApi("txCloud/group/list", {
          groupId: that.chatObj.toUid,
          limit: 50
        }, function (data) {
          console.log(data)
          that.memeberlist = data.list
          if (data.list != null) {
            that.count = data.list.length
            for (let i = 0; i < that.memeberlist.length; i++) {
              if (!that.memeberlist[i].lawyerFlag && that.memeberlist[i].role != 'Owner') {//计算可踢出成员总数
                that.wutichu += 1
              }
              if (that.memeberlist[i].role == 'Owner') {//获取群主名字
                that.qunzhuname = that.memeberlist[i].userName
              }
              if (that.memeberlist[i].userName == that.userNames) {
                that.selfGroupId = that.memeberlist[i].memberAccount//获取自己群组id
                that.lvshself = that.memeberlist[i].lawyerFlag//获取自己律师身份
              }
              that.listsloading = false

            }
          }
          console.log(that.wutichu)
          console.log(that.memeberlist)
        }, function (data) {
          getMessage(data.msg, 'error')
        });
      },
      //打开邀请列表
      isAddsf(){
        this.yaoqing = false;
        this.isAdds = true;
      },
      //返回文件预览url
      getUrl(id, name) {
        let that = this;
        getApi('/wopi/preview/' + id, {},
          function (data) {
            let obj = {}
            obj = {fileName: name, fileUrl: data.url, fileType: 1}
            that.urlshow.push(obj)
          },
          function (data) {

          });
      },
      //判断是是否是文档类型
      filepan(fliletype){
        if (fliletype == 'doc' || fliletype == 'docx' || fliletype == 'xls' || fliletype == 'xlsx' || fliletype == 'ppt' || fliletype == 'pptx') {
          return true
        } else {
          return false
        }

      },
      //聊天窗口文件预览  sender
      showlan(item){
        debugger
        console.log(item)
        let that = this;
        that.readyid(item.chatId, item.sender);
        let ids = item.socialFileId;//存储socialFileId
        that.fileshowurl = null;
        localStorage.setItem('filecontent', item.content)//存储文件名字
        localStorage.setItem('filecontentsize', item.size)//存储文件名字
        localStorage.setItem('socialFileId', item.socialFileId)//存储socialFileId
        localStorage.setItem('itemfileType', item.fileType)
        if (that.filepan(item.fileType)) {//文档
          that.showtype = 'docx';
          that.getUrls(ids);
          that.afileshow()//弹出文件预览
        } else {//图片
          that.fileshowurl = item.url
          that.showtype = 'png';
          localStorage.setItem('fileshowurl', item.url)//存储文件预览url
          that.afileshow()//弹出文件预览
        }
        localStorage.setItem('showtype', that.showtype)//存储文件类型
        localStorage.setItem('filesItemurl', item.url)//存储文件下载url

      },
      //标记文件已读

      readyid(chatId, sender){
        // debugger
        let that = this;
        console.log(sender)
        if (sender == localStorage.getItem("userId")) {
          console.log('自己')
          // return
        } else {
          postApi("/chat/chatinfo/modify/readFlag", {
            msgType: 2,
            userId: localStorage.getItem("userId"),
            toUid: sender,
            readFlag: true,
            chatId: chatId
          }, function (data) {
            that.readq(chatId)//标记已读
          }, function (data) {
            getMessage(data.msg, 'error')
          });
        }
      },
      //前端标记已读
      readq(chatId){
        // debugger
        let ids = chatId
        for (let i = 0; i < this.messages.length; i++) {
          if (this.messages[i].chatId == ids) {
            this.messages[i].readFlag = true;
          }
        }
      },
      //返回文件预览url
      getUrls(id){
        debugger
        let that = this;
        getApi('/wopi/preview/' + id + 'C', {},
          function (data) {
            console.log(data)
            // that.fileshowurl = data.url
            localStorage.setItem('fileshowurl', data.url)
            // that.fileshow = true;
          },
          function (data) {
            getMessage(data.msg, 'error')
          });
      },
      //- X 操作 type 1.踢出群聊 2.退出群聊
      isdeltef(type){
        let that = this;
        if (type == '1') {
          that.groupshow = !that.groupshow;
        } else {
          that.KickGroupChat('2')

        }

      },
      //踢出群聊  POST type 1.踢成员 2.踢自己
      KickGroupChat(type){
        let that = this;
        let msg = '确定踢出所选人员?'
        if (type == '1' && that.checkListsid.length == 0) {

          getMessage('请选择人员', 'warning')
          return

        }

        if (type == '2') {
          that.checkListsid = [that.selfGroupId]
          msg = '确定退出群聊?'
        }
        that.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          postApi('/txCloud/group/deleteMember', {
              groupId: that.chatObj.toUid,
              type: 'public',
              memberList: that.checkListsid,
              reason: '看不下去了'

            },
            function (data) {
              if (type == '1') {
                getMessage('踢出成功', 'success')
                that.checkListsid = []
                that.getMemberlist()
              } else {
                that.$emit('getNewGroup');//刷新父级群组列表
                getMessage('已退出群聊', 'success')
              }


            },
            function (data) {
              getMessage(data.msg, 'error')

            });

        }).catch(() => {
          that.$message({
            type: 'info',
            message: '已取消'
          });
        })

      },
      //解散群组 GET
      DissolveGroupChat(){
        let that = this;
        that.$confirm('解散后将无法恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          getApi('/txCloud/group/destroyGroup', {
              groupId: that.chatObj.toUid
            },
            function (data) {
              getMessage('解散成功', 'success')
              that.$emit('getNewGroup');//刷新父级群组列表

            },
            function (data) {
              getMessage(data.msg, 'error')
            });

        }).catch(() => {
          that.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //判断文档类型
      panIcon(fileType){
        switch (fileType) {
          case 'docx':
            return require('../../assets/icon/file/word.png');
            break;

          case 'doc':
            return require('../../assets/icon/file/word.png');
            break;

          case 'pdf':
            return require('../../assets/icon/file/pdf.png');
            break;

          case 'xls':
            return require('../../assets/icon/file/excel.png');
            break;

          case 'xlsx':
            return require('../../assets/icon/file/excel.png');
            break;

          case 'ppt':
            return require('../../assets/icon/file/ppt.png');
            break;

          case 'zip':
            return require('../../assets/icon/file/zip.png');
            break;

          case 'png':
            return require('../../assets/icon/file/png.png');
            break;

          case 'jpg':
            return require('../../assets/icon/file/jpg.png');
            break;

          case 'html':
            return require('../../assets/icon/file/html.png');
            break;
        }
      },
      //表情包传值
      emojiData(data){
        //  alert(data)
        let msg = this.msgInfo.msg;
        //表情转化为字符代码传给后台
        this.msgInfo.msg += this.replace_em(data);
        // this.msgInfo.msg+=data
        this.msgInfo.msg = this.repalcesss(this.msgInfo.msg);

      },
      repalcesss(str){
        str = str.replace(/<p>(.*?)<\/p>/g, "$1");
        return str
      },
      //后台返回字符代码解析为字符串
      replace_em(str){
        if (str == null) {
          return null

        } else {
          str = str.replace(/\</g, '<');
          str = str.replace(/\>/g, '>');
          str = str.replace(/\n/g, '<br/>');
          str = str.replace(/<p>(.*?)<\/p>/g, "$1");
          str = str.replace("<br>", "");

          if (window.require) {//如果是桌面程序
            str = str.replace(/\[em_([0-9]*)\]/g, '<img style="height:24px;" src="./static/emoji/$1.png" border="0" />');
          } else {//web端
            str = str.replace(/\[em_([0-9]*)\]/g, '<img style="height:24px;" src="../../../static/emoji/$1.png" border="0" />');
          }

          return str;

        }

      },
//弹出选择窗口
      chatFileDownload(item){
        let that = this;
        that.savePalce = '网盘';
        that.isSaveFile = true;
        that.filesItem = item
      },
//保存聊天文件
      saveChatFile(){
        let that = this;

        console.log(
          that.filesItem
        )
        that.readq(that.filesItem.chatId)//标记已读
        if (that.savePalce == '网盘') {
          debugger
          // alert('网盘')
          postApi('/document/fileInfo/download', {
              userId: localStorage.getItem('userId'),
              companyId: localStorage.getItem('companyId'),
              socialFileId: that.filesItem.socialFileId,
              fileName: that.filesItem.content,
              fileUrl: that.filesItem.url,
              webFlag: 4
            },
            function (data) {
              getMessage('保存成功', 'success')
              that.isSaveFile = false;


            },
            function (data) {
              getMessage(data.msg, 'error')

            });

        } else {
          // alert('本地')
          that.toLoad(that.filesItem.url, that.filesItem.content, that.filesItem.fileType);
          that.isSaveFile = false;
        }


      },
      getNewmessages(){
        // alert('666')
        this.$emit('getNewmessage');//刷新父级群组列表
      },
      contentss(val) {
        this.msgInfo.msg = val
      },
      // /afileshow  文件预览
      afileshow(){
        const {href} = this.$router.resolve({
          name: 'fileshow'
        })
        let iWidth = 1050; //弹出窗口的宽度;
        let iHeight = 630; //弹出窗口的高度;
        let iTop = (window.screen.availHeight - 30 - iHeight) / 2; //获得窗口的垂直位置;
        let iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置;
        window.open(href + '?' + 'ifileshow=1', 'win_name2', "height=" + iHeight + ", width=" + iWidth + ", top=" + iTop + ", left=" +
          iLeft);
      },
      //判断是否包含 链接 http https
      panduana(val){
        return val.indexOf("http") != -1
      },
      onCopy(e) {
        getMessage('复制成功', 'success')
        this.returna()
      },
      onError(e) {
        getMessage('复制失败', 'error')
      },

      //
      // 返回a标签
      returna(str){
        if (str.indexOf("http") != -1) {
//          console.log(str)
          // 匹配链接的正则表达式
          var urlReg = /(http:\/\/|ftp:\/\/|https:\/\/|www.)[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/g;
          var array = str.match(urlReg);
// 设置!!为临时占位符
          var rpStr = str.replace(urlReg, '!!')

          function insertLink(el, i, arr) {
            //匹配协议，因为Vuejs会对href属性自动加上' http:// '
            if (el.match('http://') || el.match('ftp://') || el.match('https://')) {
              // console.log('yes')
              var link = ('<a href=\"' + el + '\" target="_blank">' + el + '</a>');
            } else {
              // console.log('false')
              var link = ('<a href=\"http:\/\/' + el + '\" target="_blank">' + el + '</a>');
            }
            // console.log(rpStr)
            // console.log(links)
            // 将字符串里的!! 替换为link的内容并重新赋值给 rpStr
            rpStr = rpStr.replace('!!', link)
            // console.log('result',rpStr)

          }

//          console.log(array)
          if (array != null) {
            array.forEach(insertLink);
            return rpStr
          } else {
            return str
          }


        }


      },
      chatenter(index){
        this.chatindex = index;
      },
      chatleave(){
        this.chatindex = null;
      },
      // /user/team
      getuserinfo(userId){
        let that = this;
        getApi('/user/team', {
            userId: userId
          },
          function (data) {
            that.userInfos = data.userInfo
            console.log(data.userInfo)

          },
          function (data) {
            getMessage(data.msg, 'error')
          });
      }

    }
  }
</script>

<style scoped>

  @import "../wechat/wechat.css";
  @import "../wechat/chatRoom.css";

  .copys {
    color: #57a3f3;
    cursor: pointer;
  }

  .copys:hover {
    color: #6469CC;
  }

  video {
    width: 100%;
  }

  .anjians {
    width: 17px;
  }

  .paddl60 {
    padding-left: 60px !important;
  }

  .secondstep {
    width: 13px;
    margin-left: 8px;

  }

  .onlinewrap {
    display: flex;
  }

  .groupsl {
    width: 35%;
    /* max-height: 600px; */
    /* overflow: auto; */
    padding-right: 20px;
    border-right: 1px dashed #ccc;
  }

  .groupsr {
    width: 65%;
    min-height: 383px;
    /* background: coral; */
    padding: 20px;
    position: relative;
    padding-top: 0;

  }

  .filenone {
    position: absolute;
    text-align: center;
    top: 45%;
    width: 100%;
    opacity: 0.5;
  }

  .show-iframes {
    width: 100%;
    height: 100%;
  }

  .show-iframes::-webkit-scrollbar-track {
    background-color: #f0f3fa !important;
  }

  .show-iframes::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .filename {
    color: #333333;
    margin-bottom: 15px;
    display: block;
    /* margin-top: 15px;
         */
    padding-top: 15px;
    font-weight: bold;
    border-top: 1px dashed #cccccc;
  }

  .fileurl {
    text-align: right;
  }

  .filelian {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    color: #999999
  }

  .fileurlss {
    display: block;
    text-align: left;
    margin-top: 5px;
  }

  .yulans {
    color: #999999;
    margin-left: 5px;
  }

  .xiazais {
    color: #6469CC;
    opacity: 0.8;
  }

  .yulans, .xiazais {
    font-size: 12px;
    cursor: pointer;
  }

  .fileimg {
    margin-bottom: 15px;
  }

  .yulanDialig {
    height: 500px;

  }

  .magin0 {
    margin: 0 auto !important;
  }

  .suanhuai {
    text-align: center;
    color: #6469CC;
    margin-top: 25%;
    opacity: 0.6;
  }

  .cytc {
    padding: 10px;
    height: 240px;
    overflow: auto;
    /* margin-top: 10px; */
  }

  .tcli {
    margin-bottom: 10px;
  }

  .zanwutichu {
    text-align: center;
    margin-top: 115px;
    color: #6469CC;
    opacity: 0.7;
  }

  .chenban {
    font-size: 0.7rem;
    color: #57a3f3;

  }

  .jiesan {
    height: 29px;
    line-height: 4px;
    margin-left: 10px;
    position: fixed;
    bottom: 20px;
    right: 34px;
    background: #FFFFFF !important;
    color: #FF0000 !important;
    border: none;
    opacity: 0.7;

  }

  .jiesanli {
    height: 60px;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    margin-bottom: 0px !important;
    width: 183px !important;
    right: 0 !important;
    border-top: 1px dashed rgb(242, 242, 242)
  }

  .wdicon {
    display: flex;
  }

  .matop8 {
    margin-top: 8px;
  }

  .wdicon_right {
    margin-left: 5px;
    color: #333333
  }

  .wdicon_right:hover {
    color: #57a3f3;
  }

  .emoji {
    width: 315px;
    height: 170px;
    /* background: #6469CC; */
  }

  .gpic {
    margin-left: 10px;
    margin-top: 10px;
  }

  /* .secondButton{
        background: #6469CC;
        color: #FFFFFF;
    }
    .secondButton:hover{
        background: #57a3f3;
        color: #cccccc
    } */
  .isLeft .content .readflag {

    position: absolute;
    right: -30px;
    bottom: 0;
    font-size: 10px;
    opacity: 0.7;
  }

  .isRight .content .readflag {

    position: absolute;
    left: -30px;
    bottom: 0;
    font-size: 10px;
    opacity: 0.7;
  }

  .isLeft .content .copys {

    position: absolute;
    right: -30px;
    bottom: 0;
    font-size: 10px;
    opacity: 0.7;
  }

  .isRight .content .copys {

    position: absolute;
    left: -60px;
    bottom: 0;
    font-size: 10px;
    opacity: 0.7;
  }

  .yidu {
    color: #6469CC

  }

  .weidu {
    color: #6469CC
  }

  .innerHtml {
    height: 100%;
  }

  .dialogcenter {
    margin: 0 !important;
  }

  .groupsr > div {
    height: 500px;
    margin-bottom: 60px;
    overflow: auto;
  }

  .copyicon {
    font-size: 18px;
  }

  .copyicon:hover {
    color: #66CCFF
  }

  .chattoux {
    border-radius: 50%;
    cursor: pointer;
    height: 30px !important;
  }

  .chaochuhh {
    word-break: normal;
    width: auto;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
  }

  .pd16 {
    padding: 16px;
    border-top: 1px solid rgb(242, 242, 242)
  }

  .textdq {

    width: 70px;
    float: left;
    text-align-last: justify;
  }


</style>
<style>
  .send .md-button .md-ripple {
    padding: 0 !important;
  }

  .sendContent .el-textarea__inner {
    border: none !important;
    outline: none !important;
    background: #ffffff;
    min-height: 75px !important;
    height: 100%;
    resize: none;
  }

  .chatRoom .el-upload-list {
    display: none;
  }

  .chatRoom .el-textarea {
    height: 50%;
  }

  .chatRoom .send {
    position: fixed;
    bottom: 1%;
    right: 1%;
  }

  /*定义滚动条轨道*/

  .chatRoom ::-webkit-scrollbar-track {
    background-color: #f0f3fa !important;
  }

  /*定义滚动条高宽及背景*/

  .chatRoom ::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
  }

  /*定义滚动条*/

  .chatRoom .el-upload {
    width: 100% !important;
    /*padding: 1.5rem !important;*/
  }

  .chatRoom .el-upload .container {
    width: 100%;
  }

  .chatRoom ::-webkit-scrollbar-thumb {
    background-color: #ccc !important;
    border-radius: 5px;
  }

  .chatRoom .el-dialog__wrapper {
    /* height:500px; */
    /* height: 90%; */
    top: 0;
    /* margin-top: 5%; */
    overflow: hidden !important;
  }

  .chatRoom .el-upload--picture-card:hover,
  .el-upload:focus {
    color: #6469CC;
  }

  .onlineFile {
    height: 90% !important;
    margin-top: 3% !important;
    overflow: hidden;
  }

  .recordDia {
    height: 400px !important;
    overflow: hidden !important;
  }

  .onlineFile .el-dialog__body {
    height: 100%;
    overflow: auto;
    padding-bottom: 40px !important;
  }

  .onlineFile .el-dialog__header {
    padding: 10px 20px !important;
  }

  .onlineFile .el-checkbox-group {
    font-size: 14px !important;
  }

  .firstButton {
    width: 140px;
    height: 40px;
    line-height: 30px;
    font-size: 18px !important;
    color: #FFFFFF !important;
    border-radius: 5px;
    background: #6469CC !important;
    padding: 0 !important;
    border: 1px solid #6469CC !important;
  }

  .chatRoom .radios {
    margin-top: 20px;
  }

  .chatRoom .newDetail .el-dialog {
    position: absolute !important;
    right: 0;
    margin-top: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .chatRoom .newDetail .el-dialog__body {
    height: 100% !important;
    padding-left: 10px !important;
    padding-right: 5px !important;
    padding-top: 5px !important;
    padding-bottom: 15px !important;
    overflow: hidden !important;
  }

  .chatRoom .picDIas .el-dialog__body {
    height: calc(100% - 30px);
  }

  .addDialigs {
    height: 90%;
    background: #F9F9F9 !important;
    overflow: hidden !important;
    margin-top: 30px !important;
  }

  .wenjiyul .el-dialog__body {
    padding: 0 20px !important;
    height: 100%;
    overflow: hidden;
  }

  .demo-split {
    height: 100%;
    /* border: 1px solid #dcdee2; */
  }

  .demo-split-pane {
    /* padding: 10px; */
    margin-bottom: 10px;
    height: 100%;
  }

  .ivu-split-trigger {
    border: none;
  }

  .sendhead {
    text-align: left;
    padding-top: 5px;

  }

  .chatRoom .mce-top-part {
    display: none !important;
  }

  .chatRoom .mce-statusbar {
    display: none !important;
  }

  .chatRoom .mce-tinymce {
    box-shadow: none !important
  }

  .chatRoom .mce-stack-layout-item {
    border: none !important
  }

  .chatRoom .mce-panel {
    border: none !important
  }

  .chatRoom .ivu-poptip-popper[x-placement^=right] .ivu-poptip-arrow {
    display: none;
  }

  .chatRoom .ivu-poptip-popper[x-placement^=left] .ivu-poptip-arrow {
    display: none;

  }

  .chatRoom .ivu-poptip-inner {
    -moz-box-shadow: 0px 0px 8px #333333;
    -webkit-box-shadow: 0px 0px 8px #333333;
    box-shadow: 0px 0px 8px #333333;
  }

  .md-card {
    width: 320px;
    display: inline-block;
    vertical-align: top;
  }

  .ivu-poptip-popper {
    z-index: 99999;
  }
  .chatRoom .el-dialog{
    margin-top: 5vh!important;
    height: 80%;
  }
  .chatRoom .el-dialog__body{
    height: 95%;
    padding: 0!important;
  }
</style>


