Customer-Service-Web/pc_chat/src/components/chat.vue

<template>
  <div  v-loading="allLoading" element-loading-text="拼命连接中" >
    <!-- -->
    <el-container class="chatBox">
      <!-- ************************* 头部消息 ************************* -->
      <el-header height='80px'>
        <el-row type="flex" justify='space-between' align = 'middle' style="height:100%;">
          <el-col class="tit nopd" v-if="machineAndAtl == 10"><span>智能客服</span></el-col>
          <el-col class="tit nopd" v-if="machineAndAtl == 100"><span>{{service.kf_name}}</span></el-col>
          <el-col>
            <div class="imgBox">
              <i v-if="selNum > chatNum" @click="ejectEvl(10)" class="sc pointer"  :class="selType?'scActy':''"></i>
              <div style="float: right" class="pointer" @click="leaveMsg()">
                <span style="font-size: 25px; color: #b3c1e7; margin-top: 13px;" @click="back()" class="el-icon-chat-line-round"></span>
              </div>
              <!-- <i class="sy pointer" @click="select(2)" :class="syType?'syActy':''"></i>
              <i class="sq pointer" @click="select(3)" :class="sqType?'sqActy':''"></i>-->
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-conatiner class="cationer">
   
      <!--****************************** 聊天会话框模块 *****************************-->
      <el-main>
        <el-row class="pd informationBox"  id="main">

          <!-- 广告展示隐藏按钮 -->
          <div class="retract pointer" @click="retract()">
            <img src="./../assets/st-img/retract.png" alt="" v-if="retractShow">
            <img src="./../assets/st-img/retract2.png" alt="" v-else>
          </div>

          <!-------------------机器人聊天板块 ----------------------->
          <div v-if="machineAndAtl == 10">

            <!--··············· 欢迎语 ············-->
            <div class="conversationBox" v-if="machine != ''">
              <div class=" row">
                <div class="conversation row">
                  <div class="headImg">
                    <img src="./../assets/st-img/headAdvent.png" alt="">
                  </div>
                  <div class="cont left" >
                    <div>{{machine.content}}</div>
                  </div>
                </div>
                <div style="width:66px;"></div>
              </div>
            </div>

            <!--··········· 快捷问题回答模块 ············-->
            <div class="questionList" v-if="questionShow">
              <section v-for="(item,idx) in problem" :key="item.id">
                <div @click="answers(idx)">
                  <span class="pointer gl">{{item.robot_name}}</span>
                </div>
              </section>
              <section>
                <div>
                  <span class="col6">上面问题都不是</span>
                  <span class="pointer ly" @click="changeService()">转人工客服</span>
                </div>
              </section>
            </div>

            <!--················ 和机器人会话发送消息 ·············-->
            <div v-for="item in chatCont" :key="item.id">   
               <!-- 用户发文本信息 -->
              <div class="conversationBox" v-if="item.type =='user'">
                <div class="timer">{{item.time}}</div>
                <div class="customer row allAlignment">
                  <div style="width:66px;"></div>
                  <div class="row">
                    <!-- 显示内容 -->
                    <div v-if="item.chat"  class="cont right">
                      <div v-html="item.chat"></div>
                    </div>
                    <div v-else class=" right noafter" style="width:200px;margin-right:10px; ">
                      <div slot="file">
                        <img class="el-upload-list__item-thumbnail"  @click="handlePictureCardPreview(url+item.imgUrl)" style="width:100%;height:auto;border-radius: 10px;" :src="url+item.imgUrl" alt="">
                      </div>
                    </div>

                    <!-- 图片放大 -->
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>

                    <!-- 头像 -->
                    <div class="headImg">
                        <img :src="user_info.avatar" alt="">
                    </div>
                  </div>
                </div>
              </div>
            
              <!-- 机器人无法回答转人工 -->
              <div class="conversationBox" v-if="item.type == 1001">
                <div class=" row">
                  <div class="conversation row">
                    <div class="headImg">
                      <img src="./../assets/st-img/headAdvent.png" alt="">
                    </div>
                    <div class="cont left" >
                      <div>您的问题暂时无法处理</div>
                      <div>
                        <span class="col">问题没有解决？</span>
                        <span class="change pointer ly" @click="changeService()">转人工客服</span>
                      </div>
                    </div>
                  </div>
                  <div style="width:66px;"></div>
                </div>
              </div>

              <!-- 机器人回答 -->
              <div class="conversationBox" v-else-if='item.type == "service"'>
                  <div class=" row">
                    <div class="conversation row">
                      <div class="headImg">
                        <img src="./../assets/st-img/headAdvent.png" alt="">
                      </div>
                      <div class="cont left" >
                        <div>{{item.cont}}</div>
                      </div>
                    </div>
                    <div style="width:66px;"></div>
                  </div>
              </div>

              <!-- 快捷问题回答 -->
              <div class="conversationBox" v-else-if="item.type == 'machine'">
                <div class="timer">
                  {{item.robot_addTime}}
                </div>
                <div class=" row">
                  <div class="conversation row">
                    <div class="headImg">
                      <img src="./../assets/st-img/headAdvent.png" alt="">
                    </div>
                    <div class="cont left" >
                      <div>{{item.robot_content}}</div>
                      <div>
                        <span class="col">问题没有解决</span>
                        <span class="change pointer ly" @click="changeService()">转人工客服</span>
                      </div>
                    </div>
                  </div>
                  <div style="width:66px;"></div>
                </div>
              </div>

              <!-- 转接客服列表 -->
              <div class="changeService" v-else-if="item.type == 'artService'">
                <div  v-for="(itemList,idx) in serviceList" :key="idx">
                  <span class="col6">人工客服:</span>
                  <span class="colE5 pointer gl" @click="jumpService(itemList.id)">{{itemList.name}}</span>
                </div>
              </div>
            </div>

            <!--············· 各种消息提示框 ··············-->
            <!-- 转接客服 -->
            <div class="promptBox" v-if="artAndLeave == 10">
              <div class="prompt">
                <span>已转接人工客服</span>
              </div>
            </div>
            <!-- 客服关闭会话 -->
            <div class="promptBox" v-if="closeByServer">
              <div class="prompt" style="width: 50px">
                <span>会话结束</span>
              </div>
            </div>
            <!-- 客服不在线帮助提示框 -->
            <div class="promptBox " v-if="artAndLeave == 100">
              <div class="prompt help">
                <span>当前客服不在线，如需帮助请</span>
                <span class="colE5 ly pointer" @click="leaveMsg()">留言</span>
              </div>
            </div>
          </div>

          <!--············ 和人工会话聊天模块 ··············-->
          <div v-if="machineAndAtl == 100">
            <!-- 人工客服回复消息 -->
            <div  v-for="item in customerSviceChat" :key="item.id">
              <!-- tem.cont != '' -->
              <div class="conversationBox" v-if="item.type == 'service' ">
                <div class="timer"> {{item.time}} </div>
                <div class=" row">
                  <div class="conversation row">
                    <div class="headImg">
                      <img :src="serviceImg?url+serviceImg:require('@/assets/st-img/kf.png')" alt="">
                    </div>
                    <div class="cont left" >
                      <div v-if="item.content != ''" v-html="item.content"></div>
                      <div v-else slot="file">
                        <img class="el-upload-list__item-thumbnail"  @click="handlePictureCardPreview(url+item.imgUrl)" style="width:100%;height:auto;border-radius: 10px;" :src="url+item.imgUrl" alt="">
                      </div>
                    </div>
                  </div>
                  <div style="width:66px;"></div>
                </div>
              </div>

              <!-- 用户发送文本消息 -->
              <div class="conversationBox" v-if="item.type == 'user' ">
                <div>
                  <div class="timer">{{item.time}}</div>
                  <div class="customer row allAlignment">
                    <div style="width:66px;"></div>
                    <div class="row">
                      <div class="cont right">
                        <div v-if="item.content != ''" v-html="item.content"></div>
                        <div v-else slot="file">
                          <img class="el-upload-list__item-thumbnail"  @click="handlePictureCardPreview(url+item.imgUrl)" style="width:100%;height:auto;border-radius: 10px;" :src="url+item.imgUrl" alt="">
                        </div>
                      </div>
                      <div class="headImg">
                        <img :src="user_info.avatar" alt="">
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 点击图片放大 -->
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </div>

            <!-- 评价 -->
            <div class="evaluate" @click="ejectEvl(10)" v-if="consult">
              <span>欢迎你的咨询，请对我们的服务做出评价</span>
              <span  class="btn seek">评价</span>
            </div>
            <div class="promptBox " v-if="comtSuccess">
              <div class="prompt help">
                <span>您对我们的服务评价为： {{comtCount}}。非常感谢！</span>
              </div>
            </div>
            <!-- 系统即将结束会话
            <div class="promptBoxH " v-if="willOverTime">
              <div class="prompt help" style="width: 280px; height: 35px;">
                <span>{{willOverTime}}</span>
              </div>
            </div> -->
            <!-- 客服关闭会话 -->
            <div class="promptBox " v-if="closeByServer">
              <div class="prompt help" style="width: 280px;">
                <span>会话已关闭，如需继续咨询请</span>
                <span class="colE5 ly pointer" @click="goBack()">重新连接</span>
              </div>
            </div>
            <!-- 客服关闭会话 -->
            <div class="promptBox " v-if="serverNotOnlin">
              <div class="prompt help" style="width: 280px;">
                <span>客服掉线</span>
              </div>
            </div>
          </div>
        </el-row>


        <!--·········· 文本编辑框 ···········-->
        <el-row class="chatting">
            <el-col>
              <!-- 发送图和表情按钮 -->
              <div style="height:18px; display:flex;">
                <el-popover placement="top-start" width="200" trigger="hover" style="margin-top: -10px;">
                  <ul>
                    <li class="emoticon" v-for="(item,index) in frceArr" :key="item.id" >
                      <img class="pointer"  :src="require(`@/assets/st-img/${index}.gif`)" @click="memeImg(index)" alt="">
                    </li>
                  </ul>
                  <el-button class="expression" slot="reference"></el-button>
                </el-popover>
                <el-upload class="avatar-uploader" action="/api/index/upload/uploadImg"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :on-error ='handError'
                  list-type ='no' accept="image/jpeg,image/jpg,image/png,image/svg">
                  <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
                  <i slot="default" class=" photo"></i>
                </el-upload>
              </div>

              <div class="row center allAlignment chattingBox">
                <div style="height:44px;width:300px;">
                  <textarea name="" id="" v-model="information" cols="30" rows="1" placeholder="请输入你的问题："></textarea>
                </div>
                <div>
                  <!-- 准备修改 -->
                  <div @click="sendCol?(!closeByServer||artAndLeave==0||artAndLeave==100?sendInfo():''):''" class="sendOut pointer" :class="sendCol?(!closeByServer||artAndLeave==0||artAndLeave==100?'sendCol':'netSendCol'):'netSendCol'">
                    <span class="">发送</span>
                  </div>
                </div>
              </div>
            </el-col>
        </el-row>
      </el-main>
    


      <el-aside width='255px' v-if="retractShow">
        <el-row class="rt">
          <el-col :span='24' class="artificial pd20">
            <div class="infor">
              <div>
                <span>姓名:</span>
                <span>{{service.kf_name ? service.kf_name : '智能客服' }}</span>
              </div>
              <div>
                <span>工号:</span>
                <span>{{service.serverInfo ? service.serverInfo.job_name : '001'}}</span>
              </div>
              <div>
                <span>性别:</span>
                <span>保密</span>
              </div>
              <div>
                <span>职务:</span>
                <span>咨询客服</span>
              </div>
            </div>
            <div class="headPortrait">
              <img :src="service.serverInfo?(url+service.serverInfo.avatar):require('@/assets/st-img/kf.png')" alt="">
            </div>
          </el-col>
       
          <el-col class="autograph pd20" >
            <div>
              <span>个性签名:</span>
              <span>{{service.serverInfo ? service.serverInfo.signature :'' }}</span>
            </div>
          </el-col>
          <el-col class="advent" v-for="imgs in advert" :key="imgs.id">
            <a :href="imgs.advertisement_url" target="_blank" ><img :src="url + imgs.advertisement_img" alt=""></a>
          </el-col>
        </el-row>
      </el-aside>
  
      </el-conatiner>
      <!-- 评价框 -->
      <el-card  class="box-card" v-if="evlShow">
        <!-- <div class="close" @click="closeEvl(10)"> -->
          <!-- <i></i> -->
        <!-- </div> -->
        <div class="tit">
          <span>感谢您的咨询，请对我们的服务做出评价</span>
        </div>
        <div class="selIcon row allAlignment">
          <div @click="chage(1)">
            <i :class="changeIcon == 10? '':'sfd'"></i>
            <span>满意</span>
          </div>
          <div @click="chage(2)">
            <i class="comm" :class="changeIcon == 100?'comm2':''"></i>
            <span>一般</span>
          </div>
          <div @click="chage(3)">
            <i class="notSfd" :class="changeIcon == 1000?'notSfd2':''"></i>
            <span>不满意</span>
          </div>
        </div>
        <div class="levMsg">
          <el-input type="textarea" rows="6" placeholder="评价备注" v-model="textarea">
          </el-input>
        </div>
        <div class="sure" @click="evaluateSure()">
          <span>确定</span>
        </div>
      </el-card>
      <div class="zzBox"  v-if="zzShow"></div>
      <!-- </div> -->
    </el-container>
  </div>
</template>
<script>
import '../css/index.css';
import frce from '../assets/frce.js';
export default {
  data(){
    return{
      textarea : '',//备注
      evlShow : false, // 评价框显示
      zzShow : false, // 遮罩层显示
      vertion:'',//图形验证码
      provShow : true, // 验证框显示
      changeIcon : 10,
      name : '', // 验证框姓名model
      phone:'',// 验证框电话model
      email:'',// 验证框邮箱model
      frceArr: [], //表情包代码
      information:'',//发送的文本信息
      sendCol : false, // 发送按钮切换样式
      selType : false, //图标选中样式 true为选中，false为未选中
      selNum : 0, // 自增当达到某个条件显示图片
      // syType : false,
      // sqType : false,
      error: false,
      emlError:false,
      artAndLeave:0, // 默认为100，转人工为10，人工不在转留言为100
      chatCont :[], // 客户会话数据
      imageUrl:[],//上传图片
      img:'', //上传的单个图片路径
      dialogVisible: false, //图片放大
      dialogImageUrl :'', // 放大的图片
      dialogUrl :false,
      serviceInfor:'', //客服信息
      websock: null, //会话初始值
      currTime :"", //获取系统时间
      apiToken :'',//系统Token
      machine:'', //机器会话信息
      advert:'', // 广告语
      problem:'', //机器智能问题
      macNotPro : false, //机器人问题无法解决显示
      answer:[], //解答问题的答案
      questionShow:true, // 问题显示
      consult : false, //评价模块显示
      type : 1001, //自增
      jumpArtl:false, // 跳转人工客服状态
      group : '' , //客服组
      userConversation : {} , //用户当前会话
      machineAndAtl: 10, //默认为机器人，100为人工
      satisfaction :1 , //评价满意度,1为满意，2为一般，3为不满意
      url :'http://kfadmin.bocai186.com', // 域名地址
      //url :'http://192.168.2.186:8090', // 域名地址
      user_info:'', // 用户信息
      // 人工客服信息
      service:'',
      serviceList: [], //后台推送的人工客服列表
      customerWelCome : '', // 客服欢迎语
      customerSviceChat:[], // 客服会话信息
      serviceImg: '',
      timerVote:'', //存储上一次时间
      curtTimer:'',//当前时间
      returnTimer : '',//返回当前时间
      // isConnection:true,//人工分组列表开关
      chatNum : '', // 会话数量
      comtSuccess : false, // 评论发送成功显示
      comtCount : '', // 评论成功返回的满意度
      retractShow:true, // 展开侧边栏
      sensitive :[], //敏感词1
      senType:false,//敏感词状态
      sensitiveNumber:0,//敏感词次数
      doubSensitive:[],//重复的敏感词
      senInfo:'', //敏感词数据
      // sensitiveWordsNumber:0,
      hourse:'' , //返回时间，小时
      closeByServer:false , //客服关闭会话
      serverNotOnlin:false , //客服掉线
      willOverTime:'' , //超时关闭会话
      allLoading:true , //整个页面加载中
      webTime:'',//网络时间
    }
  },
  methods:{
    /******************文字信息转表情******************/
    turnFace(data){
      let str = data.match(/\#\[.*?\]\//g);
      let arr =Array.from(new Set(str));
      arr.forEach(e=>{
        let imgsrc = '';
        for(let i = 0 ; i < this.frceArr.length ; i++){
          let expText = e.slice(1,e.length-1);
          if(expText == this.frceArr[i]){
            imgsrc = '<img class="hover" src="'+require(`@/assets/st-img/${i}.gif`)+'"/>'
            break;
          }
        }
        data = data.replace(new RegExp(`\\#\\[${e.substring(2,e.length-2)}\\]\\/`,'g'),imgsrc);
      })
      return data;
    },

    // 关闭加载中
    allLoadingClose() {
      this.allLoading = false;
    },

    /****************************** */
    retract(){
      this.retractShow = !this.retractShow;
      console.log('ddsd');
    },
    
    /***************发送图片***************/
    beforeAvatarUpload(file){
      let self = this
      const isJPG = file.type =='image/jpeg'||'image/jpg'||'image/png'||'image/svg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传只能是图片格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      // 压缩图片
      //         this.$public.imgPreview(picavalue, function(imgSrc, config, formData) {
        //   // console.log(imgSrc,config,formData);
      //   self.dialogImageUrl = imgSrc;
      // });
      return isJPG && isLt2M;
    },
    handError(err, file, fileList){
      // 获取当前发送时间
    },
     
    /***************传输成功之后返回图片*************** */
    handleAvatarSuccess(res, file) {
      this.dialogUrl = true;
      this.img = res.data.src;
      this.sendMessage();
    },
    /***************图片放大*************** */
    handlePictureCardPreview(url){
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },

    /***************弹出评价框*************** */
    ejectEvl(type){
      if(this.comtSuccess) return;
      this.changeIcon = 10;
      if(type == 10){
        this.evlShow = true
      }
      this.zzShow = true;
    },
   
    /***************传入父组件进行组件切换*************** */
    leaveMsg(){
      this.$emit('value',100)
    },
    //回到初始页面
    goBack(){
      this.artAndLeave = 0;
      this.machineAndAtl = 10;
      this.macNotPro = false;
      this.jumpArtl = false;
      this.automaticRolling();
      this.initWebSocket();
      //this.questionShow = true;
    },


    /*******发送消息按钮*******/
    sendInfo(){
      this.closeByServer = false;
      this.artAndLeave = 0;
      this.jumpArtl = false;
      this.dialogUrl = false;
      this.sendMessage();
    },
    
    /***************改变评价框的满意度*************** */
    chage(type){
      this.satisfaction = type;
      if(type == 1){
        this.comtCount = '满意'
        this.changeIcon = 10;
      }else if(type == 2){
        this.comtCount = '一般'
        this.changeIcon = 100;
      }else{
        this.comtCount = '不满意'
        this.changeIcon = 1000;
      }
    },
    
    /***************图标样式切换*************** */
    select(type){
      if(type == 1){
        this.selType = !this.selType;
      }else if(type == 2){
        this.syType = !this.syType;
      }else{
        this.sqType = !this.sqType;
      }
    },
    
    /***************评价确认*************** */
    evaluateSure(){
      // 参数
      let params = {
        'evaluateId' : this.satisfaction,
        'conversationId' : this.service.conversationId,
        'evaluateContent' : this.textarea
      }
      this.$axios.get('/api/index/evaluate/putEvaluate',{params,
        headers:{
          'Content-Type' :'application/x-www-form-urlencoded',
          'apiToken' : this.setApiToken('putevaluate','evaluate',this.currTime,'index')
        }
      }).then(res =>{
        if(res.data.code == 1){
          this.evlShow = false;
          this.zzShow = false;
          this.textarea = '';
          this.comtSuccess = true;
          if(this.changeIcon == 10){
            this.comtCount = '满意'
          }
        }
      })
    },

    /***************验证框确认*************** */
    yySure(){
       this.provShow = false;
       this.zzShow = false;
    },
   
    /***************转人工客服列表*************** */
    changeService(){
      // if(!this.isConnection) return
      this.$axios.post('/api/index/groups/index',{},{headers:{
            'Content-Type' :'application/x-www-form-urlencoded',
            'apiToken' : this.setApiToken('index','groups',this.currTime,'index')
        }}).then(res =>{
        if(res.data.code == 1){
          this.serviceList = res.data.data;
          this.chatCont.push({
              'type' :'artService'
          })
          this.automaticRolling();
        }
      })
      // this.isConnection = false;
    },
 
    /***************表情点击*************** */
    memeImg(i) {
       //当表情被点击
      this.information = this.information + "#" + this.frceArr[i] + "/";
    },

    /***************失去焦点做正则验证*************** */
    sureInfor(type){
      if(type == 1){
        if(!/^1[34578]\d{9}$/.test(this.phone)){
          this.error = true;
          this.phone = '';
        }else{
          this.error = false;
        }
      }else if(type == 10){
        if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)){
          this.emlError = true;
          this.email = '';
        }else{
          this.emlError = false;
        }
      }
    },

    /***************获取热点智能问题*************** */
    getProblem(){
      this.$axios.post('/api/index/robot/index',{groups_id:1,robotgroups_id:1},{
        headers:{
          'Content-Type' :'application/x-www-form-urlencoded',
          'apiToken' : this.setApiToken('index','robot',this.currTime,'index')
        }
      }).then(res =>{
        if(res.data.code == 1){
          this.problem = res.data.data
        }
      })
    },

    /*****************获取聊天次数*******************/
    getChatNum(){
      this.$axios.post('/api/index/evaluate/minRound','',{headers:{
        'Content-Type' :'application/x-www-form-urlencoded',
        'apiToken' : this.setApiToken('minround','evaluate',this.currTime,'index')
      }}).then(res =>{
        if(res.data.code == 1){
          this.chatNum = res.data.data.systemconfig_data
        }
      })
    },

    /*****************屏蔽关键字******************/
    shieldingKeyword(data){
      //将敏感词组用|转换字符串
      let snstive =  this.sensitive.join('|');
      //console.log(snstive);
      this.sensitiveNumber  = 0 ;
      //匹配出会话中的敏感词
       return data.replace(eval('/' + snstive + '/g'),(res)=>{
        var str = '';
        for(var i = 0; i < res.length;i++){
          str += '*';
        }
        this.sensitiveNumber ++;
        return str;
      })
      //console.log(this.senInfo);
      // let params = {
      //   'type' : 1,
      //   'conversationId' : this.service.conversationId,
      //   'number' : num
      // }
      // this.$axios.get('/api/index/alarm/sensitiveAlarm',{params,
      //   headers:{
      //     'Content-Type' :'application/x-www-form-urlencoded',
      //     'apiToken' : this.setApiToken('sensitivealarm','alarm',this.currTime,'index')
      //   }
      // }).then(res =>{
      
      // })
    },

    /*---------------------------------------------------------------------------------*/
    /**************初始化WebSocket****************/
    initWebSocket(){
      let _this = this;
      let apiToken = this.$md5.hex_md5('customer-service'+ this.currTime +window.location.origin);
      this.websock = new WebSocket('ws://103.108.43.176:9101?apiToken='+apiToken);
      // 数据接收
      this.websock.onmessage = this.websocketonmessage;
      // 连接建立之后
      this.websock.onopen = this.websocketonopen;
      // 连接建立失败重连
      this.websock.onerror = this.websocketonerror;
      // 关闭会话
      this.websock.onclose = this.websocketonclose;
    },

    /****************连接建立成功***************/
    websocketonopen(){
      console.log('链接成功');
    },
  
    /*************连接建立失败重连***************** */
    websocketonerror(){
      // this.initWebSocket();
    },
 
    /**************数据接收***************** */
    websocketonmessage(e){
      const redata = JSON.parse(e.data);
      console.log(redata)
      // 欢迎语
      if(redata.message_type == 'helloMessage'){
        this.machine = redata.data;
      }
      // 广告语
      if(redata.message_type == 'advertisement'){
        this.advert = redata.data;
      }
      // 评价
      if(redata.message_type == 'getEvaluate'){
        this.consult = true;
      }

      //返回的会话时间
      if(redata.message_type == 'webTime'){
        this.webTime = redata.data.time;
        if(this.machineAndAtl ==100){
          let num = this.customerSviceChat.length-1;
          if(this.customerSviceChat[num].type == "user"){
            this.$set(this.customerSviceChat[num],'time',redata.data.time);
          }
        }else if(this.machineAndAtl ==10){
          let num  = this.chatCont.length-1;
          if(1){
            this.$set(this.chatCont[num],'time',redata.data.time);
          }
          // this.chatCont = 
        }

        console.log(redata.data);
      }

      //会话超时提示
      if(redata.message_type == 'overtime'){
        console.log('接收会话超时');
      }

      // 链接客服信息
      if(redata.message_type == 'connect'){
        this.artAndLeave = 10;
        this.machineAndAtl = 100;
        this.service =  redata.data;
        this.serviceImg = redata.data.serverInfo.avatar;
      }
      // 暂无客服
      if(redata.message_type == 'wait'){
        let content = JSON.parse(redata.data.content)
        this.artAndLeave = 100;
      }
      //接收客服会话
      if(redata.message_type == 'chatMessage'){
      
        //存储会话超时间
        this.webTime = redata.data.time;

        //会话大于两分钟显示
        let timer = ''
        if(this.returnTimer == ''){
          timer = redata.data.time;
          this.returnTimer = redata.data.time
        }else{
          let timeStamp =  this.returnTimer.split(":");
          let rdtime = redata.data.time.split(":");
          if(timeStamp[0] == rdtime[0]){
            if((rdtime[1] - timeStamp[1]) < 2){
              timer = ''
            }else{
              timer = redata.data.time;
            }
          }
        }
        //
        let contType =  this.isJSON(redata.data.content);
        let content = {};
        if(contType == false){
          content.text = redata.data.content
        }else{
          content = JSON.parse(redata.data.content)
        }
        let obj = {
          time:timer,
          content:content.text ? this.turnFace(content.text) :'',
          imgUrl:content.img ? content.img : '',
          type:'service'
        }
        this.customerSviceChat.push(obj);
        // console.log(this.customerSviceChat);
        this.selNum++;
        this.automaticRolling();
      }
      //接收机器会话
      if(redata.message_type == 'robotMessage'){
        if(redata.data.content == 'error'){
          let _this = this;
          this.chatCont.push({type:1001 })
          this.automaticRolling();
        }else{
          this.chatCont.push({
              'robot_content':redata.data.content,
              'type' : 'machine'
          })
          this.automaticRolling();
        }
      }
      // 没有客服上线.
      if(redata.message_type == 'notice'){
        this.artAndLeave = 100;
        this.automaticRolling();
        this.machineAndAtl = 10;
        this.jumpArtl = false;
        this.initWebSocket();
        //this.noServer();
      }
      // 客服关闭会话.
      if(redata.message_type == 'closeBysever'){
        this.closeByServer = true;
        this.automaticRolling();
      }
      // 客服掉线.
      if(redata.message_type == 'serviceoffline'){
        this.serverNotOnlin = true;
        this.closeByServer = true;
        this.automaticRolling();
      }
      // 超时.
      if(redata.message_type == 'overtime'){
        this.willOverTime = redata.data.content;
        this.automaticRolling();
      }
    },


    /************关闭会话****************** */
    websocketonclose(e){
      console.log('断开会话',e);
    },
    

    /******************消息发送数据处理********************/
    sendMessage(){
      // this.doubSensitive = [];

      this.senType = '';

      //发送消息时间获取服务器时间 
      let currentdate = '';
      if(this.timerVote != ''){
        currentdate = this.newTimer();
      }else{
        let date = new Date();
        let curtDate = date.getHours()*60 + date.getMinutes()
        this.timerVote = curtDate;
        currentdate = '';
      }

      // 给机器人发送文本消息
      if(this.machineAndAtl == 10){
        //给机器人发送文本消息-本地储存
        let datas = {
          time : currentdate,
          chat : this.turnFace(this.shieldingKeyword(this.information)),
          imgUrl : this.img,
          type:'user'
        }
        this.chatCont.push(datas)
        //消息发送-机器人
        this.websocketsend(JSON.stringify({
          type:'toRobot',
          data:{
            groups_id :'1',
            robot_name:this.shieldingKeyword(this.information),
            webTime:this.webTime,
            robotgroups_id:'1',
          }
        }))     
      }else if(this.machineAndAtl == 100){ //人工聊天
        //发送给客服消息-本地储存
        this.customerSviceChat.push({
          time : currentdate,
          content : this.turnFace(this.shieldingKeyword(this.information)),
          imgUrl : this.img,
          type:'user',
        });
        console.log(this.customerSviceChat);

        //消息发送-客服
        this.websocketsend(JSON.stringify({
          type:'chatMessage',
          data:{
            from_name : this.user_info.name,
            from_avatar:this.user_info.avatar,
            from_id : this.user_info.id,
            content : JSON.stringify({
              text:this.information,
              img :this.img,
              type:'user'
            }),
            webTime:this.webTime,
            to_id : this.service.kf_id,
            to_name :this.service.kf_name,
            sensitiveNumber:this.sensitiveNumber,
            conversationId : this.service.conversationId
          }
        }))
      }
      // 发送之后清空发送数据
      this.img = '';
      this.information = '';
      //高度自动向上滑动
      this.automaticRolling();
    },

    /**************获取会话间隔是否大于2分钟**************** */
    newTimer(){
      //console.log('house',this.hourse)
      this.timerVote = this.curtTimer;
      let currentdate = this.hourse;
      this.curtTimer = this.hourse;
      if(this.timerVote != ''){
        let timeDiffence =  this.curtTimer - this.timerVote;
        if(timeDiffence < 2 ){
           currentdate = ''
        }
      }
      return currentdate;
    },

    /*************数据发送***************** */
    websocketsend(data){
      this.websock.send(data);
    },



    /*************设置token加密***************** */
    setApiToken(name,controller,time,modules){
      return this.$md5.hex_md5(name +'customer-service' + controller + time + modules)
    },
  
    /*************跳转人工客服***************** */
    jumpService(id){
      this.jumpArtl = true;
      this.closeByServer = false;
      this.group = id;
      //人工会话登陆
      let data = {
        'type' : 'userInit',
        data:{
          'uid':this.user_info.id,
          'name':this.user_info.name,
          'avatar':this.user_info.avatar,
          'group':this.group
        }
      }
      this.websock.send(JSON.stringify(data));
    },
  
    /*************机器智能回答问题***************** */
    answers(idx){
      let obj = {
        'robot_addTime':this.problem[idx].robot_addTime,
        'robot_content':this.problem[idx].robot_content,
        'type' : 'machine'
      }
      this.information = this.problem[idx].robot_name
      this.sendMessage();
      this.automaticRolling();
    },

    /**************匿名注册**************** */
    registered(){
      let token = localStorage.getItem('token');
      let data={
          token:token != null ? token :'',//
          appid: this.$public.getQueryString('appid') ,//
          appuid:this.$public.getQueryString('appuid'),//
        }
      let obj = {
        headers: {
          "apiToken":this.setApiToken('autoreg','register',this.currTime,'index')
        }
      }
      this.$axios.post('/api/index/register/autoReg',data,obj).then(res=>{
        if(res.data.code ==1){
          this.user_info = res.data.data;
          localStorage.setItem("token", res.data.data.token);
        }
      })
    },

    /***********聊天滑动的时候滑动滚动条到底部******************* */
    automaticRolling(){
      this.$nextTick(() => {
        let msg = document.getElementById('main') // 获取对象
        msg.scrollTop = msg.scrollHeight // 滚动高度
      })
    },

    /**************获取敏感词**************** */
    getSensitive(){
      let obj = {
        headers: {
          'Content-Type' :'application/x-www-form-urlencoded',
          "apiToken":this.setApiToken('sensitivewords','index',this.currTime,'index')
        }
      };
      let data = {
        userToken :''
      }
      this.$axios.post('/api/index/index/sensitiveWords','',obj).then(res =>{
        if(res.data.code == 1){
          console.log(res.data.data);
          res.data.data.userSensitive.forEach(res =>{
            this.sensitive.push(res.sensitivewords_word)
          })
        }
      })
    },

    /**********判定是否是JSON格式*********** */
    isJSON(str) {
      if (typeof str == 'string') {
          try {
              JSON.parse(str);
              return true;
          } catch(e) {
              //console.log(e);
              return false;
          }
      }
    },

  },

  /**************页面加载中挂载**************** */
  mounted(){
    let self = this;
    this.frceArr = frce.frce;
    this.$axios.get('api/index/index/systime?t='+new Date()).then(res =>{
      if(res.data.code == 1){
        // 获取系统时间
        let date = res.data.data.time.split(" ");
        date[0] = (new Date( date[0].replace(/-/g,'/')).getTime()) /1000;;
        this.currTime = date[0];
        this.hourse = date[1];
        // 获取机器智能问题
        this.getProblem();
        // 匿名注册
        this.registered();
        setTimeout(() => {
          //关闭加载条
          this.allLoadingClose();
          // 初始化websocket
          this.initWebSocket();
        }, 2000);
        // 获取聊天次数
        this.getChatNum();
        // 获取敏感词
        this.getSensitive();
      }
    })
  },
    // 组件挂载阶段

  destroyed() {
  this.websock.close() //离开路由之后断开websocket连接
  },
  computed:{
    inforLeng(){
      return this.information.length;
    }
  },
  watch:{
    inforLeng(val){
      if(val > 0){
        this.sendCol = true;
      }else{
        this.sendCol = false;
      }
    }
  }

}
</script>
<style scoped>
  .chatBox{
    width: 700px;
    position: relative;
  }

  .el-header{
    background:linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);
    box-shadow:0px 3px 3px rgba(0,0,0,0.2);
  }
    .tit{
      height: 100%;
      line-height: 80px;
      text-align: left;
      padding-left: 20px;
    }
  .el-col span{
    font-size: 18px;
    color: #FFFFFF;
  }
  .imgBox{
    text-align: right;
  }
  .imgBox img{
    margin-right: 20px;
  }
  .imgBox img:nth-last-child(1){
    margin-right: 0
  }
  .el-main{
    background: #fff;
    width: 63%;
    padding: 0;
  }
  .el-aside{
    background: #F5F5F5;
    width: 37%;
  }
  .cationer,.artificial{
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
  }
  .rt{
    width: 100%;
    box-sizing:inherit;
  }
  .artificial{
    /* width: 150px; */
    /* padding:0 20px; */
    margin-top: 23px;
    margin-bottom: 9px;
    vertical-align: middle;
        /* flex-direction: column;*/

  }
  .infor div{
    margin-bottom: 3px;
  }
  .infor div span,.autograph span{
    color: #999999;
    font-size: 14px;
    font-weight:400;
  }
  .infor div span:nth-child(2),.autograph span:nth-child(2){
    color: #666666;
    margin-left: 4px;
  }
  .headPortrait{
    width: 46%;
    height: 100px;
  }
  .headPortrait img{
    width: 100%;
    height: 100%;
  }
  .autograph{
    margin-bottom: 11px;
  }
  .advent{
    border-top: 1px solid #DDDDDD;
    padding: 20px;
  }
  .advent img{
    width: 100%;
    height: 350px;
  }
  .pd{
    padding: 20px;
  }
  .pd20{
    padding: 0 20px;
  }
  /* 会话 */
  .conversationBox{
    margin-top: 13px;
    margin-bottom: 13px;
  }
  .timer{
    text-align: center;
    margin: 10px 0;
    color: #999999;
    font-size: 12px;
  }
  .headImg{
    width: 40px;
    height: 40px;
    margin-right: 13px;
  }
  .headImg img{
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  .conversation .cont,.customer .cont{
    background: #ffffff;
    padding: 9px 8px 12px 10px;
    display: inline-block;
    border: 1px solid rgba(223, 223, 223, 1);
    border-radius: 5px;
    position: relative;
    max-width: 270px;
  }
  .left::after{
    position: absolute;
    content: "";
    display: inline-block;
    left: -4px;
    top: 5px;
    width: 5px;
    height: 9px;
    background: #fff;
    -webkit-transform: skewX(30deg);
    transform: skewX(30deg);
    /* z-index: -1; */
    border-left: 1px solid #dfdfdf;
    border-top: 1px solid #dfdfdf;
  }
  div.noafter::after{
    content: '';
    width: 0;
    height: 0;;
    display: inline;
    position: relative;
    border: 0;
  }
  .conversation .cont div,.customer .cont div{
    color: #666666;
    font-size: 16px;
  }
  .customer{
    justify-content: space-between;
  }
  .customer .cont{
    margin-right: 13px;
    border: 0;
    background: #5EA0F7;
    max-width: 260px;
    word-wrap: break-word;
    word-break: normal;
  }
  .customer .cont div{
    color: #FFFFFF;
  }
  .right::after{
    position: absolute;
    content: "";
    display: inline-block;
    right: -3px;
    top: 6px;
    width: 5px;
    height: 9px;
    background: #5ea0f7;
    -webkit-transform: skewX(-30deg);
    transform: skewX(-30deg);
    border-left: 1px solid #5ea0f7;
    border-top: 1px solid #5ea0f7;
  }
  .col{
    color: #999999;
  }
  .change{
    color: #5ea0f7;
  }
  .questionList,.changeService{
    margin: 10px;
    border:1px solid rgba(223,223,223,1);
    border-radius: 5px;
  }
  .questionList div,.changeService div{
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
  }
  .questionList div span{
    color: #5EA0F7;
    font-size:14px;
  }
  .questionList section:nth-child(odd),.changeService div:nth-child(odd){
    background: #F6F6F6;
  }
  .changeService div span{
    font-size: 14px;
  }
  .changeService div span:nth-child(1){
    margin-right: 5px;
  }
  .col6{
    color: #666666!important;
  }
  .colE5{
    color: #5EA0F7;
  }
  .promptBox{
    display: flex;
    justify-content: center;
    height: 26px;
    margin: 10px 0 10px;
    /* line-height: 26px; */
  }
  .promptBoxH{
    display: flex;
    justify-content: center;
    height: 50px;
    margin: 10px 0 10px;
    /* line-height: 26px; */
  }
  .prompt{
    text-align: center;
    padding: 5px 28px 4px;
    background: #DDDDDD;
    border-radius:30px;
    width: 140px;
    color: #FFFFFF;
    font-size: 12px;
  }
  .help{
    width: 260px;
  }
  .help .prompt{
    width: 100%;
  }
  /* 评论 */
  .evaluate{
    height: 101px;
    padding: 19px 0 16px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(223,223,223,1);
    border-radius:10px;
    margin-top: 15px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
  }
  .evaluate span{
    font-size: 14px;
    color: #666666;
  }
  .nopd{
    padding: 0;
  }
  .evaluate .btn{
    display: block;
    background: #F04992;
    border-radius:10px;
    margin-top: 10px;
    color: #FFFFFF;
    height: 36px;
    line-height: 36px;
    width: 100px;
    position: absolute;
    bottom: 16px;
    left: 35%;
    cursor: pointer;
  }
  /* 聊天框 */
  .chatting{
    width: 100%;
    background:rgba(255,255,255,1);
    box-shadow:0px -5px 5px rgba(0,0,0,0.05);
    height: 100px;
    padding: 10px 20px;
  }
  .informationBox{
    height: 500px;
    overflow: auto;
  }
  .expression,.photo{
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("./../assets/st-img/expression.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    margin-right: 18px;
  }
  .expression:hover{
    background: url("./../assets/st-img/expressionHover.png") no-repeat;
    background-size: 100% 100%;
  }
  .photo{
    background: url("./../assets/st-img/photo.png") no-repeat;
    background-size: 100% 100%;
  }
  .photo:hover{
    background: url("./../assets/st-img/photoHover.png") no-repeat;
    background-size: 100% 100%;
  }
  textarea{
    height: 30px;
    width: 300px;
    border: 0;
    -webkit-user-select:auto;
    user-select:auto;-o-user-select:auto;
    -ms-user-select:auto;
    resize: none;
    outline: none;
    padding-top: 10px;
  }
  .sendOut{
    width: 80px;
    height: 44px;
    line-height: 40px;
    border:1px solid rgba(221,221,221,1);
    border-radius:5px;
    text-align: center;
    margin-left: 20px;
  }
  .sendOut span{
    color: #CCCCCC;
    font-size: 16px;
  }
  .chattingBox{
    margin-top: 12px;
  }
  /* 评论弹框 */
  .zzBox{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3)
  }
  .box-card,.proving{
    width: 494px;
    height: 429px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index : 999;
    border-radius:10px;
    padding: 20px 20px 30px 50px;
    box-sizing: border-box;
  }
  .proving{
    padding:20px 20px 30px 47px;
  }
  /* .close{
    text-align: right;
    cursor: pointer;
  } */

  /* .close i{
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("./../assets/st-img/close.png") no-repeat;
    background-size: 100% 100%;
  } */
  .box-card .tit{
  text-align: center;
  padding-right: 65px;
  margin-bottom: 40px;
  }
  .box-card .tit span{
    font-size:18px;
    color: #666666;
  }
  .selIcon{
    padding-right: 30px;
    margin-bottom: 30px;
  }
  .selIcon div {
     text-align: center;
     cursor: pointer;
   }
  .selIcon div i{
    display: block;
    width: 44px;
    height: 44px;
    background: url("./../assets/st-img/satisfied.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 10px;
  }
  .selIcon div span{
    /* display: block; */
  }
  .selIcon div  .comm{
    background: url("./../assets/st-img/comm2.png") no-repeat;
  }
  .selIcon div .sfd{
    background: url("./../assets/st-img/Satisfied2.png") no-repeat;
  }
  .selIcon div .comm2{
    background: url("./../assets/st-img/comm.png")no-repeat;
  }
  .selIcon div  .notSfd{
    background: url("./../assets/st-img/notSatisfied2.png")
  }
  .selIcon div .notSfd2{
     background: url("./../assets/st-img/notSatisfied.png")
  }
  .levMsg{
    padding-right: 30px;
    margin-bottom: 20px;
  }
  .sure{
    text-align: center;
    background:linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);
    box-shadow:0px 3px 3px rgba(0,0,0,0.2);
    border-radius:10px;
    width: 100px;
    height: 48px;
    line-height: 48px;
    color: #fff;
    position: absolute;
    bottom:30px;
    left: 37%;
    cursor: pointer;
  }
  /* 验证框 */
  .logo{
    text-align: center;
    margin-bottom: 20px;
  }
  .logo span{
    font-size: 38px;
    font-weight:bold;
    color: #5EA0F7;
    font-family:Microsoft YaHei;
  }
  .logo span:nth-child(1){
    color: #F04992;
  }
  .formBox{
    padding:0 27px 0 0;
  }
  .formBox .el-input{
    margin-bottom: 21px;
  }
  .formBox .phone .el-input,.formBox .email .el-input{
      margin-bottom: 0;
  }
  .formBox .phone,.formBox .email{
    margin-bottom: 10px;
  }
  .vertion {
    vertical-align: middle;
    /* margin-bottom: 28px; */
   }
  .vertion .el-input{
    width: 250px;
    margin-right: 15px;
    display: inline-block;
  }
  .vertion span{
    display: inline-block;
    width: 128px;
    height: 40px;;
    vertical-align: middle;
    background:rgba(241,225,224,1);
  }
  .formBox .sure{
    bottom: 21px;
  }
  .el-card__body .tit{
    line-height: 25px;
  }
  .chatting .el-button{
    border: none;
    padding: 0;
    border-radius: 0
  }
  .emoticon{
    width: 30px;
    height: 30px;
    display: inline-block;
  }
  .pointer{
    cursor: pointer;
  }
  .ly:hover{
    border-bottom: 1px solid #5EA0F7;
    /* 高亮效果 */
    filter: brightness(0.9);
  }
  .gl:hover{
    filter: brightness(0.9);
  }
  .seek:hover{
    background: #860c60
  }
  .sendCol{
        background: linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);
  }
  .netSendCol{
        cursor: not-allowed;
  }
  /* 修改滚动条 */
  ::-webkit-scrollbar-button{
    background: transparent;
    border: 0;
  }
  /* 顶部三个图标 */
  .imgBox i{
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 20px;
    background: url("./../assets/st-img/pj.png") no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
  }
  .imgBox .sy{
    background: url("./../assets/st-img/sy.png") no-repeat;
  }
  .imgBox .sq{
    background: url("./../assets/st-img/sq.png") no-repeat;
  }
  /* .sc:hover{
    background: url("./../assets/st-img/pjhover.png") no-repeat;
  }
  .sy:hover{
    background: url("./../assets/st-img/sy2.png")no-repeat;
  }
  .sq:hover{
    background: url("./../assets/st-img/sq2.png") no-repeat;
  } */
  i.scActy{
     background: #1654D1 url("./../assets/st-img/pjhover.png") no-repeat;
    width: 33px;
    height: 33px;
    background-position: 5px;
  }
  /* .imgBox .syActy{
    background:#1654D1 url("./../assets/st-img/jzsy.png") no-repeat;
    width: 33px;
    height: 33px;
    background-position: 5px;
  }
  .imgBox  .sqActy{
    background: #1654D1 url("./../assets/st-img/sq2.png") no-repeat;
    width: 33px;
    height: 33px;
    transform: rotate(180deg);
    background-position: 5px;
  } */
  .tips{
    font-size: 12px;
    color: #F04992;
  }
#main{
  position: relative;
}
.retract{
  position: absolute;
  right: 0;
  top: 225px;
}
</style>