<!-- 聊天记录 -->
<template>
    <div class="common_chat-wrapper">
        <div class="common_chat-inner">
            <!-- 聊天记录 -->
            <div v-if="chatLoaded" class="common_chat-main" id="common_chat_main" ref="common_chat_main">
                <div class="common_chat-main-content">
                    <div class="inner">
                        <div v-for="(item ,index) in chatInfoEn.messageList" :key="index">
                            <!-- 系统消息 -->
                            <div class="item sys">
                                <!-- 1)文本类型 -->
                                <div class="text-content">
                                    <p>{{formatTime(item.sendTime)}}</p>
                                </div>
                            </div>
                            <!-- 客户、客服 -->
                            <div  class="item" :class="{ sender: item.fromId == adminId, receiver: item.fromId != adminId }">
                                <div class="info-wrapper" :class="item.state">
                                    <!-- 头像 -->
                                    <div class="avatar-wrapper">
                                      <img class="kf-img" v-if="item.fromImage" :src="item.fromImage" />
                                      <Icon v-else type="md-contact" size="30" />
                                    </div>
                                    <div class="status-icon uni-flex">
                                    <div class="icon loading" v-show="item.status==1"></div>
                                    <div class="icon warn" v-show="item.status==3"></div>
                                  </div>

                                    <!-- 1)文本类型 -->
                                    <div v-if="item.msgType == 1" class="item-content common_chat_emoji-wrapper-global">
                                        <p class="text" :class="{isUrl:isUrl}" @click="openURL">{{item.content}}</p>
                                    </div>
                                    <!-- 2)图片类型 -->
                                    <div v-else-if="item.msgType == 2 " class="item-content">
                                        <img class="img" :src="item.content" @click="imgViewDialog_show(item)" />
                                    </div>
                                    <!-- 3)视屏类型 -->
                                    <div v-else-if="item.msgType == 3 " class="item-content thumb-con">
                                        <video :src="item.content" class="video" @click="imgViewDialog_show(item)"></video>
                                    </div>
                                    <!-- 3)文件类型 -->
                                    <div v-else-if="item.contentType=='file'" class="item-content ">
                                        <div class="file">
                                            <i class="file-icon iconfont fa fa-file"></i>
                                            <div class="file-info">
                                                <p class="file-name">{{getFileName(item.fileName)}}</p>
                                                <div class="file-opr">
                                                    <div v-show="item.state=='success'">
                                                        <a class="file-download" :href="item.fileUrl" target="_blank" :download="item.fileUrl">下载</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 4)文本类型 -->
                                    <div v-if="item.contentType=='transformServer'" class="item-content common_chat_emoji-wrapper-global">
                                        <p class="text">
                                            当前没有配置机器人，
                                            <el-button type="text" @click="chatCallback('transformServer')">转接客服</el-button>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部区域 -->
            <div class="common_chat-footer">
                <div>
                    <!-- 表情、文件选择等操作 -->
                    <div class="opr-wrapper">
                        <!-- <common-chat-emoji class="item" ref="qqemoji" @select="qqemoji_selectFace"></common-chat-emoji> -->
                        <!-- <a class="item" href="javascript:void(0)" @click="fileUpload_click('file')">
                           <Icon type="ios-folder-outline" size="20"></Icon>
                           <Icon type="md-add-circle"  size="20" @click.native="uploadShow" /> -->
                          <Upload
                            :width="20"
                            :iconSize="20"
                            iconType="md-images"
                            v-model="Image"
                            @uploadSuccess="sendImage"
                          />
                          <div class="video" style="margin-left:8px">

                          <Upload
                            :width="20"
                            :iconSize="20"
                            iconType="md-videocam"
                            v-model="Image"
                            type="video"
                            @uploadSuccess="sendImage"
                          />
                          </div>
                        <!-- </a> -->
                        <form method="post" enctype="multipart/form-data">
                            <input type="file" name="uploadFile" id="common_chat_opr_fileUpload" style="display:none;position:absolute;left:0;top:0;width:0%;height:0%;opacity:0;" />
                        </form>
                    </div>
                    <!-- 聊天输入框 -->
                    <div class="input-wrapper">
                        <Input
                            :maxlength="500"
                            type="textarea"
                            :border="false"
                            class="inputContent common_chat_emoji-wrapper-global"
                            id="common_chat_input"
                            :autofocus="true"
                            :rows="4"
                            @keydown.native="inputContent_keydown"
                            v-model="inputContent"
                        ></Input>
                    </div>
                    <!-- 发送按钮 -->
                    <Button type="primary" size="small" class="send-btn" :class="chatInfoEn.state" @click="sendText()">发送</Button>
                </div>
                <!-- 离线 -->
                <div v-show="chatInfoEn.state=='off' || chatInfoEn.state=='end'" class="off-wrapper">
                    <span class="content">会话已经结束</span>
                </div>
            </div>
        </div>
        <!-- 图片查看dialog -->
        <Modal
      v-model="detailModal"
      footer-hide
      class="upload-detail-modal"
      class-name="vertical-center-modal"
      :width="50"
    >
      <img :src="detailSrc" alt v-if="type == 2" style="width: 100%;height:100%;object-fit: contain;" />
      <video
        :src="detailSrc"
        v-if="detailModal && type == 3"
        webkit-playsinline
        playsinline
        x5-playsinline
        autoplay
        controls="controls"
        style="width: 100%;height: 100%"
      />
    </Modal>
        <el-dialog title :visible.sync="imgViewDialogVisible" class="imgView-dialog" :modal="false">
            <div class="header">
                <!-- <i class="iconfont fa fa-remove" @click="imgViewDialog_close"></i> -->
                <Icon type="md-close" size="30" color="#fff" @click.native="imgViewDialog_close" />
            </div>
            <div class="main">
                <img class="img" :src="imgViewDialog_imgSrc" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import common_chat_emoji from './common_chat_emoji.vue'
import Upload from './upload'
import { formatTime } from '../../../libs/ali-oss'
export default {
  components: {
    commonChatEmoji: common_chat_emoji,
    Upload
  },
  props: {
    chatInfoEn: {
      required: true,
      type: Object,
      default: {
        messageList: [] // 消息集合
      }
    },
    oprRoleName: {
      required: true,
      type: String,
      default: ''
    } // 操作者名称；e.g. server:服务端、client:客服端
  },
  data () {
    return {
      inputContent_setTimeout: null, // 输入文字时在输入结束才修改具体内容
      selectionRange: null, // 输入框选中的区域
      shortcutMsgList: [], // 聊天区域的快捷回复列表
      imgViewDialogVisible: false, // 图片查看dialog的显示
      imgViewDialog_imgSrc: '', // 图片查看dialog的图片地址
      chatLoaded: false, // chat是否已加载完毕
      Image: [],
      inputContent: '',
      detailModal: false,
      type: '',
      detailSrc: ''
    }
  },
  computed: {
    adminId () {
      return this.$store.state.admin.uid
    }
  },
  watch: {},
  mounted () {
    this.$nextTick(function () {
      this.chatLoaded = true
      this.init()
    })
  },
  methods: {
    formatTime,
    isUrl (item) {
      let flag = false
      if (item.type == this.ChatMsgType.TEXT) {
        const strRegex = '^((https|http|ftp)://)?' +// (https或http或ftp):// 可有可无
						'(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' + // ftp的user@  可有可无
						'(([0-9]{1,3}\\.){3}[0-9]{1,3}' + // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
						'|' + // 允许IP和DOMAIN（域名）
						'(localhost)|' +	// 匹配localhost
						'([\\w_!~*\'()-]+\\.)*' + // 域名- 至少一个[英文或数字_!~*\'()-]加上.
						'\\w+\\.' + // 一级域名 -英文或数字  加上.
						'[a-zA-Z]{1,6})' + // 顶级域名- 1-6位英文
						'(:[0-9]{1,5})?' + // 端口- :80 ,1-5位数字
						'((/?)|' + // url无参数结尾 - 斜杆或这没有
						'(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$'
        const re = new RegExp(strRegex)
        flag = re.test(this.itemData.content)
      }
      return flag
    },
    /**
         * 初始化
         * @param {Object} opts 可选对象
         */
    init (opts) {
      // 初始化状态
      this.inputContent = ''
      // 2.滚动到底部
      this.$nextTick(() => {
        this.$refs.common_chat_main.scrollTop = this.$refs.common_chat_main.scrollHeight
        console.log(this.$refs.common_chat_main.scrollHeight)
        // document.getElementById('common_chat_input').focus()
      })
    },
    // 上传图片或视频
    uploadShow () {
      this.uploadFlag = true
    },

    /**
         * 发送文本
         */
    sendText () {
      if (this.inputContent.length == '') {
        return this.$Message.warning('不能发送空白消息')
      }
      var msgContent = this.inputContent
      this.sendMsg({
        msgType: '1',
        content: msgContent
      })
      this.inputContent = ''
    },
    sendImage (msg) {
      // console.log(msg)
      // this.inputContent = msg.content[0]
      // return
      this.sendMsg({
        msgType: msg.msgType === 'video' ? 3 : 2,
        content: msg.content
      })
    },

    /**
         * 输入框的keydown
         */
    inputContent_keydown (e) {
      // 若按了回车，直接发送
      if (e.keyCode == 13) {
        this.sendText()
        e.returnValue = false
      }
    },

    openURL () {
      if (this.isUrl) {
        window.open(this.itemData.content)
      }
    },
    /**
         * 图片查看dialog_显示
         */
    imgViewDialog_show: function (item) {
      this.detailModal = true
      this.type = item.msgType
      this.detailSrc = item.content
      // this.$data.imgViewDialogVisible = true
      // this.$data.imgViewDialog_imgSrc = item.content
    },

    /**
         * 图片查看dialog_显示
         */
    imgViewDialog_close: function () {
      this.$data.imgViewDialogVisible = false
      var self = this
      setTimeout(function () {
        self.$data.imgViewDialog_imgSrc = ''
      }, 100)
    },

    /**
         * 发送消息，e.g. 文本、图片、文件
         * @param {Object} msg 消息对象
         */
    sendMsg: function (msg) {
      // 1.传递
      this.$emit('sendMsg', {
        msg: msg
      })
    },

    /**
         * 聊天记录滚动到底部
         */
    goEnd: function () {
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.common_chat_main.scrollTop = this.$refs.common_chat_main.scrollHeight
        }, 100)
      })
    }
  }
}
</script>
<style lang="less">
.common_chat-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    font-size: 12px;
    float: left;
    border: 0px;
    .common_chat-inner {
        width: 100%;
        height: 100%;
        .common_chat-main {
            position: relative;
            height: calc(~'100% - 190px');
            overflow-y: auto;
            overflow-x: hidden;
            .common_chat-main-header {
                padding-top: 14px;
                text-align: center;
                .el-button {
                    padding: 0px;
                    font-size: 12px;
                    color: #8d8d8d;
                }
            }
            .common_chat-main-content {
                position: absolute;
                width: 100%;
                height: 100%;
                & > .inner {
                    padding-bottom: 20px;
                    .item {
                        clear: both;
                        overflow: hidden;
                    }
                    .sys {
                        color: #b0b0b0;
                        font-size: 12px;
                        text-align: center;
                        .text-content {
                            padding-top: 20px;
                        }
                        .myd-content {
                            .desc {
                                margin-top: 18px;
                            }
                            .text {
                                color: #3e3e3e;
                                margin-top: 12px;
                            }
                            .remark {
                                margin-top: 10px;
                            }
                        }
                    }
                    .receiver,
                    .sender {
                        margin-top: 18px;
                        font-size: 12px;
                        .avatar-wrapper {
                            float: left;
                            .kf-img {
                                width: 40px;
                                height: 40px;
                            }
                        }
                        .info-wrapper {
                            position: relative;
                            text-align: left;
                            font-size: 12px;
                            .status-icon {
                                height: 100%;
                                align-items: center;
                                justify-content: center;
                                width: 20px;
                                float: left;
                                margin-right: 2px;
                                .icon {
                                  width: 20px;
                                  height: 20px;
                                  border-radius: 50%;
                                  margin-top: 12px;
                                  background-repeat: no-repeat;
                                  background-size: contain;

                                  &.loading {
                                    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFjElEQVRYR7VXXWhTZxh+35Ofs7ZitxRqDG1TJAEhLNEiLdQhCNNqnRfb8Dit1dCZ9sI20oLTi7ll6IW2oJjaC2P8KW4OUqZIayjuQhjiluL8K8GLZBiSUmJh3U1iyc857/iOSWhcmphsO1ch53uf7/nen+d7DkKFTyAQ4EVR/I2Fi6LYZjKZkpVAYSVBLMbv9xs4jguw35IkGU0mU7ASrKIEnj9//h0ANCgUimMmk2lx+QbBYNCQSqVkAiqVymgwGPIIvHjxoq6qqmoYEef0ev23K5FbkQADSCaTC0TEIeIti8XyeTkEQqHQLQD4lCVIqVTWNzQ0/FmIRKkMOCVJGmCBHMcdMJvNP2RBimUgFAp1AcD3bC0ijur1envZGWABjx49qlYqlU8BwIiIi6IoftjS0jLP3q1EIBwO64holog0RBTgeX6DTqd7/U4EfD5fXVtbW16qZmdn20VR/AUAFIjotVgsu4o1YSgUugsAnYgoEtGW5ubmh8s3n5ubq1tejlwJZmZmWMN9TURjCoXixKZNm3Ksnz17NkxExzKl6DKbzTcLjWEoFNoPANkyjTQ3N3+V3Xx+fr4aEc8AwBEAOL127Vq5MXMEfD7fFQDoyQQEENHa2toqs2ebxePxh4i4ERF7zGbz9UIpDYfDViK6SkRP9Hp9OyIm2LpXr161E9F1IjJm+uKqVqv9Mo+A3+/XxGIxd6ZzZX0BgHMajeak0WhM3L9/X6nRaDQWi2Wh2LwHg8H6SCSyuHXr1jQR8dFo9BQADLESZja/nU6nbdky/GMKZmZmuojICQCaTMDjeDzexgDLERpGeP369T4AaMnELXIcZ1+zZk1ukvIysBz8wYMHOpVKdTnTTJRKpbSbN28uevK3yUWj0XoAiBIRO6Q3lUrZmpqa5Ala/hTVAZ/Ptx8R1a2trQVrXiojCwsLVkmSklqt9uY7jWEpwP/jPfr9fnUkEmnigc/DT0ACGhsbw5Xeclkwh8Oh5nm+IH4ikQjjz/fuPQGCDQVPh/B02/btG//NyYfPni2KX5QAIj75ePu2bBdXxKMkAa/Xy3Mc11ioBJIkRTo7O2UxqfRxDjj5uC5eEF8uQaXA/1VcUQLTd+/uJ+DUO3ftrGgMx86ft0oclxw4erS8Mbxz545OrWBCROxWI1QqtB0dHWUJ0cjISH2VUiULEQJ6KZWwDRw/XlqIvJPeLuTACUSyFAPQ4/dqasqWYofDoaxbXZsvxQj2I4ODhaV4amrqAyUq3ETSZ5n6ioBwjhBPskZkgOvWrdMcPHiwaCbGx8frXr58+ZfD4ZCcTifPpaVTBJS7jADhVhWR7fDQkOwxcz0wPeV1EZAt82cAQWnt+KRDvo7ZpMRiMfk6JqIeQRAK9oTb5eoGwHEi+H0psfSR3W6XJ2jswoV2SZRYTOY6hqv9g4P51/H0lPckATkAcCxN4ondu3fnDInH4xkGANmQAECXIAg32elqV63+lYCwelVNmyAISbfL9QUR/PhmGY7Y+mw5Q3LJ4ahO1daeIYIjBHTaPjSUb0hYyPT0tGbHjh159ntiYoKZCdmSEZF37969siVzu90GJaeQbTlwaLBarX/I/19yTREAWyMqELb09PbmWbKLFy/W9ff352xf0TGcnJysXlpakk0pAMimdN++fXIn37hxwyCm0jIBhUpp7O7ulr8LroyO6iQ1P8v8BAIERKANfX1972ZK3xaXiYkJJxHJthwRD+zZsyfXwSsRYGtdLlcX0htbDgijtt7e8m35tWvX3q+pqWGp4gDgtiAI2emQcYsReFOKyz8REIuR1Cm+/lD/ofI/TDwezzdE1IiIxwVByOuNkgTcbg2I0gggzB3u7S3/06yU1q/UhKXi3n5f8WXk8XjUr2NxpnSQHcNyN2fr/wafA5ghuxikSgAAAABJRU5ErkJggg==);
                                    animation: rotateloading 2s linear infinite;
                                  }

                                  &.warn {
                                    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC3UlEQVRYR8WXS2xMYRTHf6fTzgjSnaQktZAuSCPSO14rxI4uUAQLjwUNqYjInTY2Fd1I2yEi6lEWHgsSz0iKlWBVj7kNUiwaCyWEXaPSqU6P3Me009HqvZdmZjv3/z+/7/vOOd/5BJ8/baucyUCsGmU1yiKUeQiljlzpQ/iA8ArhEdPSHVLX/cOPtUz2kR4zKijRBlS2ATMm+977vx/Ra/ySZjls9fxNMyGAnqqIMVjahHIQiPoMnP/ZIMJJon2NcqAnPZ7HuADasqSMoswdlOUhA4+VCZ0MRzZI/Yuv+X5/AOiJ+EIy2gGU/5fgoya9RKRaDqXe5PqOAXBWLpnnUxA8G7MXjSzN3YkRAO/MH/vedmGjmNZtpwiSRg3KLV87Zh9HtG9VNidGAZJGM0q9LxP7I9EdYnZddQGqtqNyxb+WFjGtBsfGMbBLrZjuQNkuuk/MrnMewF5UzvoGgEGGqLRL1AVIVl1AZXcAA1BJSH0q6ehb4iairYH0ohfF7NojTof7GbPLw2+TceOIHBEz1eQuIN6I6tFAANDP9HSZ6HFjC8NcDyi2D2/kHDVo/mSDFbFVNGmcR6kNAdAmprXfq4LTKHUhPNpFW41OYFlgMXpZEl27HIDWqksgO4N78Ey0xfiGMCu4WG5KIrXZBYjfAN0U2EP5bu/AABALLIYHkrDWugDGfWBNCI/0vwA8lYS10gN4AqwIBxD6CEhJwlrsAbwE4oEBvCMIl4TCezGtBV4VvEOZHxgAOwnDl2GvmNZcD+AjGuL6FtrDNyI0jchdZ9Wq60GCJ7LTiMK24hD7nSdxW7G7hSEuI+EexSW1dktnKHoGpSYQU/YycgDc6/gtUOLbRCOzs5ONN0l98a3Nv469RAo2kAwPlUvD60+OtrlqDkXy2TdAzkUWfiSDh0Qy7gyRKW4DXecLYKKRzFlJIYfSLH1Bx/IRiEI+TEYgCvk0y02mgj1O8zN6qp7nvwGrGFpWPLPlKgAAAABJRU5ErkJggg==);
                                  }
                                }
                              }
                            .item-content {
                                position: relative;
                                max-width: 330px;
                                // height: 100%;
                                color: #3e3e3e;
                                font-size: 13px;
                                border-radius: 3px;
                                .text {
                                    line-height: 1.8;
                                    white-space: normal;
                                    word-wrap: break-word;
                                    word-break: break-all;
                                    padding: 10px 12px;
                                    &.isUrl{
                                      // color: #0000EE !important;
                                    }
                                }
                                .qqemoji {
                                    width: 24px;
                                    height: 24px;
                                }
                                .img, .video {
                                  // width: 100%;
                                  // height: 100px;
                                    display:block;
                                    max-width: 120px;
                                    max-height: 100px;
                                    object-fit:contain;
                                    white-space: normal;
                                    word-wrap: break-word;
                                    word-break: break-all;
                                    // padding: 5px;
                                    cursor: pointer;
                                }

                                .file {
                                    width: 220px;
                                    padding: 10px 8px;
                                    margin: 3px;
                                    overflow: hidden;
                                    background: #fff;
                                    border-radius: 5px;
                                    .el-button {
                                        padding: 0px;
                                        font-size: 12px;
                                    }
                                    .file-info {
                                        float: left;
                                        padding: 0px 8px;
                                        .file-name {
                                            width: 160px;
                                            display: inline-block;
                                            color: #333333;
                                            white-space: nowrap;
                                            text-overflow: ellipsis;
                                            overflow: hidden;
                                            line-height: 1.3;
                                        }
                                    }
                                    .file-opr {
                                        margin-top: 8px;
                                    }
                                    .file-icon {
                                        float: left;
                                        color: #663399;
                                        font-size: 40px;
                                    }
                                    .file-download {
                                        color: #00a8d7;
                                        cursor: pointer;
                                        text-decoration: blink;
                                    }
                                }
                                .preInput {
                                    position: relative;
                                    color: #8d8d8d;
                                    img {
                                        height: 15px;
                                        position: relative;
                                        top: 3px;
                                    }
                                }
                                .issueList {
                                    width: 250px;
                                    padding: 10px;
                                    .title {
                                        position: relative;
                                        .content {
                                            position: absolute;
                                            margin-top: -1px;
                                            margin-left: 6px;
                                        }
                                    }
                                    .el-collapse-item__wrap {
                                        background: transparent;
                                    }
                                    .el-collapse {
                                        border: 0px;
                                        margin-top: 8px;
                                        margin-bottom: -8px;
                                        .el-collapse-item__header {
                                            font-size: 13px;
                                            background: transparent;
                                            color: #f7455d;
                                            padding-left: 5px;
                                        }
                                        .el-collapse-item__wrap {
                                            .el-collapse-item__content {
                                                font-size: 12px;
                                                color: #3e3e3e;
                                                padding-left: 5px;
                                            }
                                        }
                                    }
                                }
                                .issueExtend {
                                    width: 250px;
                                    padding: 10px 10px 0px;
                                    .main {
                                        border-top: 1px solid #eeeff0;
                                        margin-top: 10px;
                                        padding-top: 10px;
                                        p {
                                            margin-bottom: 5px;
                                        }
                                        .el-button {
                                            font-size: 12px;
                                            color: #f7455d;
                                        }
                                    }
                                }
                                .issueResult {
                                    width: 250px;
                                    .main {
                                        padding: 10px;
                                    }
                                    .footer {
                                        border-top: 1px solid #eeeff0;
                                        height: 30px;
                                        .btn {
                                            width: 60px;
                                            margin: 0px 30px;
                                            padding: 6px 0px;
                                            display: inline-block;
                                            text-align: center;
                                            font-size: 10px;
                                            color: #8d8d8d;
                                            cursor: pointer;
                                            position: relative;
                                            &:first-child::after {
                                                top: 4px;
                                                right: -30px;
                                                width: 1px;
                                                height: 80%;
                                                content: '';
                                                position: absolute;
                                                background-color: #eeeff0;
                                                z-index: 0;
                                            }
                                        }
                                        .iconfont {
                                            font-size: 10px;
                                            margin-right: 5px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .item.receiver {
                        margin-left: 5px;
                        .avatar-wrapper {
                            margin-right: 15px;
                        }
                        .info-wrapper {
                            .item-content {
                                float: left;
                                color: #000000;
                                background-color: #f6f6f6;
                                // border: 1px solid #ccc;
                                &::before {
                                    position: absolute;
                                    top: -1px;
                                    left: -10px;
                                    width: 0px;
                                    height: 0px;
                                    content: '';
                                    border-top: 0px;
                                    // border-right: 10px solid #ccc;
                                    border-bottom: 5px solid transparent;
                                    border-left: 0px;
                                }
                            }
                        }
                    }
                    .item.sender {
                        margin-right: 5px;
                        .avatar-wrapper {
                            float: right;
                            margin-left: 15px;
                        }
                        .info-wrapper {
                            float: right;
                            .item-content {
                                float: right;
                                background: #47B7FF;
                                // border: 1px solid #2753FE;
                                color: #ffffff;
                                &::before {
                                    position: absolute;
                                    top: -1px;
                                    right: -10px;
                                    width: 0px;
                                    height: 0px;
                                    content: '';
                                    border-top: 0px;
                                    border-right: 0px;
                                    border-bottom: 5px solid transparent;
                                    // border-left: 10px solid #2753FE;
                                }
                            }
                        }
                    }
                }
            }
        }
        .common_chat-footer {
            position: relative;
            width: 100%;
            border-top: 1px solid #ccc;
            .opr-wrapper {
                height: 40px;
                padding: 10px;
                display: flex;
                text-align: left;
                & > .item {
                    margin-right: 12px;
                    float: left;
                    font-weight: normal;
                    text-decoration: blink;
                    & > .iconfont {
                        color: #aaa;
                        font-size: 20px;
                    }
                }
            }
            .input-wrapper {
                position: relative;
                padding: 2px 0px 0px 10px;
                .inputContent {
                    width: 99%;
                    padding: 2px;
                    height: 110px;
                    resize: none;
                    overflow: auto;
                    line-height: 1.5;
                    outline: 0px solid transparent;
                }
                .shortcutPopover-wrapper {
                    position: absolute;
                    top: 30px;
                    left: 10px;
                    width: 440px;
                    max-height: 80px;
                    padding: 4px;
                    font-size: 12px;
                    overflow-y: auto;
                    border: 1px solid #9b9aab;
                    border-radius: 3px;
                    background-color: #fff;
                    cursor: pointer;
                    p {
                        padding: 4px;
                        &.selected {
                            background-color: #ded1cc;
                        }
                        .key {
                            display: inline-block;
                            width: 50px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                        .content {
                            display: inline-block;
                            width: 350px;
                            margin-left: 10px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                        .highlight {
                            color: #00a8d7;
                        }
                    }
                }
                .tips {
                    position: absolute;
                    top: 7px;
                    left: 20px;
                    width: auto;
                    color: #8d8d8d;
                }
            }
            .send-btn {
                float: right;
                margin-right: 16px;
                &.off,
                &.end {
                    background-color: #ccc;
                    border-color: #ccc;
                }
            }
            .off-wrapper {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                background-color: rgba(255, 255, 255, 0.6);
                font-size: 14px;
                .content {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}
.imgView-dialog {
    background: #00000080;
    height: 100%;
    .el-dialog {
        max-width: 75%;
        position: relative;
        background: transparent;
        box-shadow: none;
        .el-dialog__header {
            display: none;
        }
        .el-dialog__body {
            padding: 0px;
            text-align: center;
            position: relative;
            .header {
                text-align: right;
                position: relative;
                height: 0px;
                .fa-remove {
                    font-size: 32px;
                    color: white;
                    position: relative;
                    right: -50px;
                    top: -30px;
                    cursor: pointer;
                }
            }
            .main {
              // height:500px ;
               padding: 10px;
                .img {
                    display: inline-block;
                    height: auto;
                    max-width: 90%;
                    // max-width: 100%;
                    // max-height: 100%;
                    // height: 100%;
                }
            }
        }
    }
}
#common_chat_input {
  border: none;
  outline: none;

}
.ivu-input:hover {
    border-color: none;
}

@keyframes rotateloading {
0% {
  -webkit-transform: rotate(0deg);
}

25% {
  -webkit-transform: rotate(90deg);
}

50% {
  -webkit-transform: rotate(180deg);
}

75% {
  -webkit-transform: rotate(270deg);
}

100% {
  -webkit-transform: rotate(360deg);
}
}
</style>
