dev/dcp-web-gate/src_old/views/helpCenter/customerService/CustomerService.vue

<template>
  <div class="autoBox box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
        
          <el-breadcrumb-item>{{$t('common.Online')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="service">

        <div class="serviceBox">
          <div style="height: 68px;width: 68px;display: inline-block;position: relative;top: 20px;left: 20px;">
            <img src="@/assets/img/helpCenter/CusTitle.png" alt="" style="width: 100%;">
          </div>
          <div class="onlineTile">{{$t('common.customer')}}</div>
        </div>

        <div style="width: 100%;">
            <!-- 聊天框 -->
          <div style="width:66%;height:100%;float:left;border-right:1px solid #bfbfbf;position: relative;">
            <!-- 聊天界面 -->
            <div id="messageList" style="width: 95%;padding: 20px;color: #666666;height: 500px;overflow-y: auto;">
              <div v-for="(item,index) in oldMessageList" style="position: relative;margin: 30px 0">
                <div v-if="item.messageType=='2'">
                  <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;left: 0;">
                    <img  src="@/assets/img/helpCenter/customerHead.png" alt="" style="width: 100%;">
                  </div>
                  <div style="display: inline-block;margin-left: 50px;font-size: 12px;">
                    <span  style="float: left;">{{item.senderName}}</span>
                    <div  style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
                      {{item.sendContent}}
                    </div>
                  </div>
                  <div style="clear: both;"></div>
                </div>
                <div v-if="item.messageType=='1'">
                  <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;right: 0;">
                    <img src="@/assets/img/helpCenter/customerHead.png" alt="" style="width: 100%;">
                  </div>
                  <div style="display: inline-block;margin-right: 50px;font-size: 12px;float: right;">
                    <span  style="float: right;">{{item.senderName}}</span>
                    <div  style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
                      {{item.sendContent}}
                    </div>
                  </div>
                  <div style="clear: both;"></div>
                </div>
                <div v-if="item.messageType=='3'">
                  <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;left: 0;">
                    <img  src="@/assets/img/helpCenter/customerHead.png" alt="" style="width: 100%;">
                  </div>
                  <div style="display: inline-block;margin-left: 50px;font-size: 12px;">
                    <span  style="float: left;">{{item.senderName}}</span>
                    <div  style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
                      {{item.sendContent}}
                    </div>
                  </div>
                  <div style="clear: both;"></div>
                </div>
              </div>
              <!-- <div v-if="this.oldMessageList.size == 0">
                <div style="width:100%;text-align: center;" >没有更多聊天记录了</div>
              </div>
              <div v-if="this.oldMessageList.size > 0"></div>
                <div style="width:100%;margin: 20px auto;text-align: center;">
                  <div style="width: 90px;height: 1px;background-color:  #666666;display: inline-block;"></div>
                  上次聊到这里
                  <div style="width: 90px;height: 1px;background-color: #666666;display: inline-block;"></div>
                </div>

                <div style="text-align: center;">
                  {{date}}
                </div>
              </div> -->

                <!-- 平台客服 -->
<!--                  <div v-for="(item,index) in chatList" style="position: relative;margin: 30px 0">-->
<!--                    <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;left: 0;">-->
<!--                      <img src="@/assets/img/helpCenter/Customer.png" alt="" style="width: 100%;">-->
<!--                    </div>-->
<!--                    <div v-if="item.text  == ''" style="display: inline-block;margin-left: 50px;font-size: 12px;">-->
<!--                      <span style="float: left;">{{item.nickName}}</span>-->
<!--                      <div  style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">-->
<!--                        {{item.content}}-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div v-if="item.text  != ''" style="display: inline-block;margin-left: 50px;font-size: 12px;">-->
<!--                      <span style="float: left;">{{item.nickName}}</span>-->
<!--                      <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">-->
<!--                        {{item.content}}-->
<!--                      </div>-->
<!--                      <div class="quickAnswer">-->
<!--                        <ul v-for="(i,to) in item.text">-->
<!--                          <li>-->
<!--                            {{to + 1}}、{{i.menuName}}-->
<!--                          </li>-->
<!--                        </ul>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div v-for="(j,to) in item.list" style="position: relative;margin: 30px 0">-->
<!--                      <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;right: 0;">-->
<!--                        <img src="@/assets/img/helpCenter/user.png" alt="" style="width: 100%;">-->
<!--                      </div>-->
<!--                      <div style="display: inline-block;margin-right: 50px;font-size: 12px;float: right;">-->
<!--                        <span style="float: right;">{{j.questionerName}}</span>-->
<!--                        <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">-->
<!--                          {{j.questionerContext}}-->
<!--                        </div>-->
<!--                       -->
<!--                      </div>-->
<!--  -->
<!--                    </div>-->
<!--                  </div>-->
                <!-- <div style="position: relative;margin: 30px 0;">
                  <div style="width:32px;height:32px;display: inline-block;position: absolute;top: 25px;left: 0;">
                    <img src="@/assets/img/helpCenter/Customer.png" alt="" style="width: 100%;">
                  </div>
                  <div style="display: inline-block;margin-left: 50px;font-size: 12px;">
                    <span style="float: left;">平台智能在线客服</span>
                    <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
                      您是想问以下问题吗？快读点选可以获取答案，如果不是，请在输入框提问
                    </div>
                    <div class="quickAnswer">
                      <ul>
                        <li>
                          1、如何修改实名认证手机
                        </li>
                        <li>
                          2、个人如何实名认证
                        </li>
                        <li>
                          3、企业如何实名认证
                        </li>
                        <li>
                          4、注册时选择个人，可以申请成为企业用户吗？
                        </li>
                      </ul>
                    </div>
                  </div>
                </div> -->

                 <!-- 转人工客服 -->
                <div v-if="flag == '0'" style="text-align: center;font-size:12px;line-height: 20px;">
                  <div @click="toConnect()" style="height: 22px;background-color: #25C4BA;border-radius: 10px;padding: 0 10px;display: inline-block;color: #fff;" class="cursor">
                    {{$t('common.TransferService')}}
                  </div>
                  <div style="height: 22px;background-color: #dff8f2;border-radius: 10px;padding: 0 10px;display: inline-block;color: #44d6b5;">
                    {{$t('common.CustomerStatus')}}：<span>{{$t(status)}}</span>
                  </div>
                </div>

                <!-- 在线客服 -->
                <div v-if="flag == '0'" v-for="(item,index) in messageList" style="position: relative;margin: 30px 0">
                 <!-- <div v-if="item.messageType=='2'">
                   <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;left: 0;">
                     <img  src="@/assets/img/helpCenter/userHead.png" alt="" style="width: 100%;">
                   </div>
                   <div style="display: inline-block;margin-left: 50px;font-size: 12px;">
                     <span  style="float: left;">{{item.senderName}}</span>
                     <div  style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
                       {{item.sendContent}}
                     </div>
                   </div>
                   <div style="clear: both;"></div>
                 </div> -->
                  <div v-if="item.messageType=='1'">
                    <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;right: 0;">
                      <img src="@/assets/img/helpCenter/userHead.png" alt="" style="width: 100%;">
                    </div>
                    <div style="display: inline-block;margin-right: 50px;font-size: 12px;float: right;">
                      <span  style="float: right;">{{item.senderName}}</span>
                      <div  style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
                        {{item.sendContent}}
                      </div>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                  <div v-if="item.messageType=='3'">
                    <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;left: 0;">
                      <img  src="@/assets/img/helpCenter/userHead.png" alt="" style="width: 100%;">
                    </div>
                    <div style="display: inline-block;margin-left: 50px;font-size: 12px;">
                      <span  style="float: left;">{{$t('common.customer')}}</span>
                      <div  style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;" v-html="item.sendContent">
                        
                      </div>
                    </div>
                    <div class="quickAnswer">
                      <ul v-for="(i,to) in item.umsUserOnlineServiceMenus">
                        <li style="border-bottom:1px doshed #333333" class="cursor">
                        <span  @click="seek(i,to)">{{to + 1}}.{{i}}</span>
                        </li>
                      </ul>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </div>
                
                
<!--                  &lt;!&ndash; 用户 &ndash;&gt;-->
<!--                  <div v-for="(item,index) in custmerList" style="position: relative;margin: 30px 0">-->
<!--                    <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;right: 0;">-->
<!--                      <img src="@/assets/img/helpCenter/user.png" alt="" style="width: 100%;">-->
<!--                    </div>-->
<!--                    <div style="display: inline-block;margin-right: 50px;font-size: 12px;float: right;">-->
<!--                      <span v-if="item.replyingPersonName == null" style="float: right;">{{item.questionerName}}</span>-->
<!--                      <div v-if="item.replyingPersonName == null" style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">-->
<!--                        {{item.questionerContext}}-->
<!--                      </div>-->

<!--                    </div>-->

<!--                  </div>-->

            </div>
           
            
            <div class="down" style="width:100%;position: relative;border-top: 1px solid #bfbfbf;">
              <el-input
                   ref="sendMsg"
                  type="textarea"
                  :placeholder="$t('common.EnterContent')"
                  v-model="contentText"
                  style="width: 92%;border: none;"
              >
              </el-input>
              <el-button ref="btn" 
                @click="sendText" 
                style="position: absolute;right: 10px;top: 45px;text-align:center"
                >{{$t('common.Send')}}
              </el-button>
            </div>

          </div>
          <!-- 常见问题 -->
          <div style="float: right;width: 33.8%;height: 100%;">

            <div style="margin: 0 20px;height: 20px;margin-top: 20px;">
              <span style="float: left;">
                <div style="width: 14px;height: 14px;float: left">
                  <img src="@/assets/img/helpCenter/question.png" alt="" style="width:100%;">
                </div>
                <div style="float:left;margin-left:5px;font-size: 18px;color:#0091FF;font-size:14px;font-weight: 600;">
                  {{$t('common.commonProblem')}}
                </div>
              </span>
              <!-- <span style="float: right;">
                <div style="width: 12px;height: 12px;float: left;">
                  <img src="@/assets/img/helpCenter/change.png" alt="" style="width:100%;">
                </div>
                <div style="float:left;margin-left:5px;font-size:14px;color:#25C4BA">
                  换一批
                </div>
              </span> -->
            </div>

            <div style="width: 100%;margin: 40px 0;font-size: 12px;color: #0091FF;">
              <ul v-for="(item,index) in menu" style="list-style: disc;margin-left: 40px;">
                <li @click="toView('helpCenter',item.id)" style="margin-top: 20px;" >
                 {{item.name}}
                </li>
              </ul>

            </div>
          </div>
          <div style="clear: both;"></div>
        </div>
    </div>
    <el-dialog
      :title="$i18n.locale=='zh'?'提示':'Reminder'"
      :visible.sync="toViewLogin"
      :width="$i18n.locale=='zh'?'500px':'750px'"
      :height="$i18n.locale=='zh'?'300px':'386px'"
      :before-close="toViewLoginChange"
      >
      <div style="width: 100%;height: 100%;">
        <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
        <div style="float: right;margin-right: 20px;" :style="$i18n.locale=='zh'?'width: 49%;margin-top: 10px;':'width: 453px;margin-top: -25px;'">
          <div style="font-size: 20px;font-weight: normal;color: #333333;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                line-height: 40px;">
            {{$t('common.ReminderFirst')}}
          </div>
          <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
            {{$t('common.ReminderSecond')}} <span style="color: #0091FF;font-size: 18px;">{{num}}</span> {{$t('common.ReminderThird')}}
          </div>
          <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
            {{$t('common.ReminderForth')}}
          </div>
          <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
                <span style="margin-left: 40px;" class="cursor" @click="toView('login')">
                  {{$t('common.ReminderFifth')}}
                </span>
            <span style="margin-left: 10px;" class="cursor" @click="toView('Register')">
                  {{$t('common.ReminderSixth')}}
                </span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getDicts } from "@/api/dict";
import { getLevelMenu, saveOrUpdate , addUmsUserOnlineServiceExchangeInformation,getUmsUserOnlineServiceExchangeInformations,  } from "@/api/customer/umsUserOnlineServiceExchangeInformation";
import {getOldMessage, getMessage, getAllInformationByCustomer} from "@/api/customer/baseCustomerMessage"
import Base from "@/views/base/Base";
import { getToken, resetToken } from "@/utils/auth";
import {getHelpColumnTree,getHelpColumnContent} from '@/api/operation/help/helpCenterEntity'

export default {
  extends: Base,
  data () {
    return {
      num:5,
      toViewLogin:false,
      customerServiceId: "",
      status: "common.Offline",
      menu: [],
      data:0,
      timeout: 30 * 1000,//30秒一次心跳
      timeoutObj: null,//心跳心跳倒计时
      serverTimeoutObj: null,//心跳倒计时
      timeoutnum: null,//断开 重连倒计时
      websocket: null,
      timestamp: "",
      //历史聊天信息
      oldMessageList:[],
      //当前聊天记录
      messageList:[],
      flag: "0",
      date: new Date(),
      params:{
        language: this.$i18n.locale.toUpperCase(),
        firstLevelStatus: "y",
      },
      ws: null,
      count: 0,
      userId: null,
      custmerList: [],
      chatList:[{
        img:'',
        nickName:'机器人小智',
        content:'下午好,我是机器人小智',
        text:[],
        list: [],
      },
      {
        img:'',
        nickName:'机器人小智',
        content:'很高兴为您服务!您是想问以下问题吗？快读点选可以获取答案，如果不是，请输入问题序号',
        text:[],
        list: [],
      }],
      contentText: '',// input输入的值
      management:[],
      userSendMessage: {
        id: null,
        senderId: '',
        senderName: '',
        sendContent: '',
        receiverId: '',
        receiverName: '',
        sendingStatus: '',
        receivingStatus: '',
        messageType: '',
        status: '',
        createBy: ''
      },
    }

  },
  // created () {
  //   this.getUserId()
  // },
  mounted () {
    //this.timer = setInterval(this.setTimeout, 5000);
    this.initWebsocket()
    this.$refs.sendMsg.focus()
    this.toInitData()

  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  updated () {
  },
  
  methods: {
    // 未登录跳转
    loginTipsChange(){
        const that=this;
        this.num =5;
        // clearInterval(timer_interval);

        this.timer = setInterval(function() {
          if (that.num > 0) {
            that.num--;
          } else {
            if(that.toViewLogin==true){
              clearInterval(that.timer);
              that.toViewStart('login');
            }else {
              clearInterval(that.timer);
            }
          }
        }, 1000)
      },
    // 判断未登录跳转是否关闭
    toViewLoginChange(done){
      this.toViewLogin=false;
      this.num=5;
      clearInterval(this.timer);
    },
    toInitData() {
      var language = this.$i18n.locale.toUpperCase();
      
      getHelpColumnTree(language).then((result) => {
        this.menu = [];
        if (result.data[0].children != null) {
          result.data[0].children.forEach(element => {
            this.menu.push(element)
          });
        }
        if (result.data[1].children != null) {
          result.data[1].children.forEach(element => {
            this.menu.push(element)
          });
        }
        if (result.data[2].children != null) {
          result.data[2].children.forEach(element => {
            this.menu.push(element)
          });
        } 
        return; 
      })
    },  
    seek(i,to){
      let user = window.localStorage.getItem("user");
      var users = JSON.parse(user);
      var userSendMessage = {}
      if (users == null) {
        userSendMessage.senderId = "0";
        if (this.$i18n.locale.toUpperCase() == "ZH") {
          userSendMessage.senderName = "游客";
        } else {
          userSendMessage.senderName = "Visitor";
        } 
        userSendMessage.sendContent = i;
        userSendMessage.messageType = '1';
        userSendMessage.toMessageType = '3';
        this.messageList.push(userSendMessage);
        this.websocket.send(JSON.stringify(userSendMessage)) // 调用WebSocket send()发送信息的方法
      } else {
        userSendMessage.senderId = users.userId;
        userSendMessage.senderName = users.username;
        userSendMessage.sendContent = i;
        userSendMessage.messageType = '1';
        userSendMessage.toMessageType = '3';
        this.messageList.push(userSendMessage);
        this.websocket.send(JSON.stringify(userSendMessage)) // 调用WebSocket send()发送信息的方法
      }
      
      
    },
    toViewStart(router, json) {
      clearInterval(this.timer);
      this.$router.push({ name: router, params: {key:json} });
    },
    toView(router,id){
      this.$store.commit('modify', router);
      window.localStorage.setItem('router', router);
      const { href } = this.$router.resolve({
          name: router,
          query: {
            key: id
          }
      });
      window.open(href, '_blank');
    },
      //初始化数据,建立连接
    initWebsocket() {
      this.timestamp = Date.parse(new Date());
      let user = window.localStorage.getItem("user");
      if (user != null) {
        var users = JSON.parse(user);
        var userId = users.userId;
        //语言版本
        var language = this.$i18n.locale.toUpperCase();
        var params = users.userId+",customer,"+users.username+","+language;
      } else {
        var language = this.$i18n.locale.toUpperCase();
        var params = "0"+",customer,"+"游客,"+language;
      }
      
    // 判断页面有没有存在websocket连接
      if (window.WebSocket) {
        this.messageList = [];
        var ishttps = 'https:' == document.location.protocol ? true: false;
        if(ishttps){
          this.websocket = new WebSocket("wss://www.geidcp.com/robot/websocket/"+params) 
        }else{
          this.websocket = new WebSocket("ws://localhost:7028/robot/websocket/"+params) 
        }
        // 连接成功
        this.websocket.onopen = this.setOnopenMessage;
        // 连接关闭的回调
        this.websocket.onclose = this.setOncloseMessage;
        // 连接错误
        this.websocket.onerror = this.setErrorMessage;
        // 收到消息的回调
        this.websocket.onmessage = this.clickUserList;

        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = this.onbeforeunload

      }

    },
    reconnect () { // 重新连接
      let self = this;
      if(self.lockReconnect) return;
      self.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      self.timeoutnum && clearTimeout(self.timeoutnum);
      self.timeoutnum = setTimeout(() => {
        //新连接
        self.initWebSocket();
        self.lockReconnect = false;
      }, 5000);
    },

    reset () { // 重置心跳
      var self = this;
      // 清除时间
      clearTimeout(self.timeoutObj);
      clearTimeout(self.serverTimeoutObj);
      // 重启心跳
      self.start();
    },
    start () { // 开启心跳
        var self = this;
        self.timeoutObj && clearTimeout(self.timeoutObj);
        self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
        self.timeoutObj = setTimeout(function(){
          //这里发送一个心跳，后端收到后，返回一个心跳消息，
        if (self.websocket.readyState == 1) {//如果连接正常
        var userSendMessage = {}
        userSendMessage.messageType = '1';
        userSendMessage.sendContent = "heartBeat";
        self.websocketsend(JSON.stringify(userSendMessage));
        } else { // 否则重连
          self.reconnect();
        }
        self.serverTimeoutObj = setTimeout(() => {
          //超时关闭
          self.closeWebSocket();
        }, self.timeout);

      }, self.timeout)
    },
    setOnmessageMessage (event) {
      
    },
    setErrorMessage () {
      var self = this;
      //重连
      self.reconnect();
      console.log("WebSocket连接发生错误" + '   状态码：' + this.websocket.readyState)
    },
    setOnopenMessage () {
      var self = this;
      //开启心跳
      // this.getNoReadRecords();
      self.start();
      console.log("WebSocket连接成功" + '   状态码：' + this.websocket.readyState)
    },
    setOncloseMessage () {
      var self = this;
      //重连
      self.reconnect();
      console.log( "WebSocket连接关闭" + '   状态码：' + this.websocket.readyState)
    },
    onbeforeunload () {
      this.closeWebSocket();
    },
    //websocket发送消息
    websocketsend(messsage) {
      var self = this;
      self.websocket.send(messsage)
    },
    closeWebSocket() { // 关闭websocket
      var self = this;
      self.websocket.close()
    },
    //与客服建立连接
    toConnect() {
      let user = window.localStorage.getItem("user");
      var users = JSON.parse(user);
      if (users == null) {
        this.toViewLogin = true;
        return;
      }
      this.flag = "1";
      var userSendMessage = {}
      userSendMessage.senderId = users.userId;
      userSendMessage.senderName = users.username;
      userSendMessage.sendContent = "联系人工客服";
      userSendMessage.messageType = '1';
      this.messageList.push(userSendMessage);
      this.websocket.send(JSON.stringify(userSendMessage)) // 调用WebSocket send()发送信息的方法
    },
    //设置滚动条最底
    scrollToBottom() {
      this.$nextTick(() => {
        let div = document.getElementById('messageList');
        div.scrollTop = div.scrollHeight;
      });
    },
    //获取之前的聊天记录
    getOldUserMessage(){

      let user = window.localStorage.getItem('user');
      if (user != null) {
        var users = JSON.parse(user);
        var userId = users.userId;
        getOldMessage(userId).then(result => {
          if (result.data.baseCustomerMessages != null) {
            this.oldMessageList = result.data.baseCustomerMessages;
            this.scrollToBottom()
          } else {
            this.oldMessageList = [];
          }
          
        })
      }
      

    },
    clickUserList:function(e){
      let resData = e.data
      var send = JSON.parse(resData);
      if (send.umsUserOnlineServiceMenus == "null" && send.levelId == "null") {
        this.customerServiceId = send.sendContent.replace(/\[|]/g,'').split(",")[0];
      }
      if (send.sendContent == "心跳机制") {
        if (send.umsUserOnlineServiceMenus != "[]") {
          this.status = "common.Online"
        } else {
          this.status = "common.Offline"
        }
        if (this.flag == "1") {
          let user = window.localStorage.getItem("user");
          var users = JSON.parse(user);
          if (users == null) {
            this.toViewLogin = true;
            return;
          }
          if (this.customerServiceId != null) {
            getAllInformationByCustomer(users.userId,this.customerServiceId).then(result => {
              this.oldMessageList = result.data.allInformationByCustomer;
            })
          }
        }
        console.log(send.sendContent)
        this.reset();
        return
      }
      if (send.umsUserOnlineServiceMenus != "null") {
        send.umsUserOnlineServiceMenus = send.umsUserOnlineServiceMenus.replace(/\[|]/g,'').split(",");
        send.umsUserOnlineServiceMenus[0] = " "+send.umsUserOnlineServiceMenus[0]
        this.messageList.push(send);
      }
      if (send.levelId != "null") {
        this.toView('helpCenter',send.levelId)
      }
      
      if (send.sendContent == "当前没有客服在线！") {
        send.umsUserOnlineServiceMenus = null
        this.messageList.push(send);
        
      }
      if (send.sendContent == "There is no customer service online at present!") {
        send.umsUserOnlineServiceMenus = null
        this.messageList.push(send);
        
      }
      if (send.sendContent == "这个问题我暂时还不会呢，小E还在学习中~如您需要人工服务，请点击上方转人工按钮， 小E帮您转接至客户服务中心提供人工在线客服服务") {
        send.sendContent = "这个问题我暂时还不会呢，小E还在学习中~</br>如您需要人工服务，请点击上方转人工按钮， 小E帮您转接至客户服务中心提供人工在线客服服务"
        send.umsUserOnlineServiceMenus = null
        this.messageList.push(send);
        
      }
      if (send.sendContent == "I don't know about this problem for the time being. Xiao E is still learning ~ if you need manual service, please click the switch to manual button at the top, and small e will help you transfer to the customer service center to provide manual online customer service") {
        send.sendContent = "I don't know about this problem for the time being. Xiao E is still learning ~ </br>if you need manual service, please click the switch to manual button at the top, and small e will help you transfer to the customer service center to provide manual online customer service"
        send.umsUserOnlineServiceMenus = null
        this.messageList.push(send);
        
      }
      this.scrollToBottom();
      this.reset();
    },
    connectOnlineCustomer() {
      // window.open("http://localhost:8080/#/customerOnlineService");
      this.$store.commit('modify', 'customerOnlineService');
      window.localStorage.setItem('router', 'customerOnlineService');
      const { href } = this.$router.resolve({
          name: router,
          
      });
      window.open(href, '_blank');
    },
    // getUserId () {
    //   let time = new Date().getTime()
    //   let user = window.localStorage.getItem('user');
    //   var users = JSON.parse(user);
    //   this.userId = users.userId;
    // },

    // 发送聊天消息
    sendText () {
      var userSendMessage = {}
      let user = window.localStorage.getItem("user");
      let _this = this
      // _this.$refs.sendMsg.focus()
      // if (!_this.contentText) {
      //   return false
      // }
      if (this.flag == "0") {
        if (user == null) {
          userSendMessage.senderId = "0";
          if (this.$i18n.locale.toUpperCase() == "ZH") {
            userSendMessage.senderName = "游客";
          } else {
            userSendMessage.senderName = "Visitor";
          } 
          userSendMessage.sendContent = _this.contentText;
          userSendMessage.messageType = '1';
          userSendMessage.toMessageType = '3';
          this.messageList.push(userSendMessage);
        } else {
        var users = JSON.parse(user);
        userSendMessage.senderId = users.userId;
        userSendMessage.senderName = users.username;
        userSendMessage.sendContent = _this.contentText;
        userSendMessage.messageType = '1';
        userSendMessage.toMessageType = '3';
        this.messageList.push(userSendMessage);
        }
        
      }
      if (this.flag == "1") {
        var users = JSON.parse(user);
        if (user == null) {
        this.toViewLogin = true;
        return;
        }
        userSendMessage.senderId = users.userId;
        userSendMessage.senderName = users.username;
        userSendMessage.sendContent = _this.contentText;
        userSendMessage.messageType = '1';
        userSendMessage.toMessageType = '2';
        this.getOldUserMessage();
      }
      // this.userSendMessage.receiverId = this.management.questionerId;
      // this.userSendMessage.receiverName = this.management.questionerName;
      this.websocket.send(JSON.stringify(userSendMessage)) // 调用WebSocket send()发送信息的方法
      _this.contentText = ''
      this.reset();
      },
      
  },

  watch: {
    '$i18n.locale'(){
          this.toInitData();
          this.closeWebSocket();
          this.initWebsocket();
        },
        "toViewLogin"(){
        if(this.toViewLogin==true){
          this.loginTipsChange()
        }
    }
  }
}
</script>
<style scoped>
.message {
  padding-top: 60px;
  margin-bottom: 60px;
  height: 100%;
  overflow: hidden;
}

.crumbs {
        margin-left: 20px;
        margin-bottom: 20px;
}
.box .service>>>.el-textarea__inner {
  min-height: 130px !important;
  max-height: 130px !important;
  border-color: transparent;
  resize:none
}
.box {
  background: #fff;
  padding: 20px 0 50px 0;
  
}
.service {
  width: 95%;
  box-shadow: 0 5px 15px #ccc8c8;
  border-radius: 5px 5px 0 0;
  margin: auto;
}

.service input {
  flex: 1;
  height: 40px;
  font-display: 18px;
}
.service button {
  border: 1px solid #bfbfbf;
  width: 70px;
  height: 40px;
  background: #fff;
  color: #bfbfbf;
  text-align: center;
  border-radius: 5px;
  margin-left: 10px;
}
.serviceBox{
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #bfbfbf;
  background-image: linear-gradient(to right, #8deade, #0be0c4 ,rgb(12, 184, 201));
  position:relative;
  border-radius: 5px 5px 0 0;
}
.avtive {
  display: inline-block;
  background: blue;
  color: #fff;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  margin-right: 10px;
  flex-wrap: wrap;
  word-break: break-all;
  max-width: 220px;
}
.onlineTile{
  display: inline-block;
  font-size: 16px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  position: relative;
  bottom: 30px;
  left: 30px;
  width: 50%;

}
.management div{
      line-height: 50px;
      /* text-indent: 30px; */
      font-size: 14px;
}
.management div:hover {
    color: #ff0000;
    cursor: pointer;
}
.quickAnswer{
  

  margin-top: 20px;
  width:651px;
 
  
}
.quickAnswer ul li {
  border-bottom: 1px dashed #bfbfbf;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  color: #38b5f1;
}
.send{
  width:57px;
  height:28px;
  border:1px solid #bfbfbf;
  color: #bfbfbf;
  position: absolute;
  top: 30px;
  right: 20px;
  text-align: center;
  line-height: 25px;
  border-radius: 5px;
}

</style>