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

<template>
    <div class="autoBox box">
        <div>
            <div class="sessionArea">
                <!--会话名称-->
                <div class="title">
                    <span style="font-size: 18px;line-height: 49px;">
<!--                        {{sessionAreaTitle}}-->
                        {{$i18n.locale=='zh'?'能联全球':'World of Energy Interconnection'}}
                    </span>
                </div>
                <!--会话窗口-->
                <div class="session">
                    <div id="sessionContent" style="width: 100%;height: 100%;position: relative;overflow: auto;">
                        <!--转人工客服-->
                        <div style="width: calc(100% - 40px);height: 47px;text-align: right;font-size: 14px;margin-bottom: 6px;
                                position: absolute;left: 20px;z-index: 100;padding-top: 10px;box-sizing: border-box;"
                             :style="{top:(sessionContentScrollTop+'px')}">
                            <span style="border-radius: 3px;padding: 9px 19px;box-sizing: border-box;cursor:pointer;display: inline-block;;
                                    background-color: #2c5589;color: white;line-height: 22px;"
                                  @click="changeService">
                                <span v-show="serviceStatus=='ROBERT'">
                                    {{i18n('toCustomerService')}}
                                </span>
                                <span v-show="serviceStatus=='Artificial'">
                                    {{$i18n.locale=='zh'?'转智能客服':'Switch to intelligent customer service'}}
                                </span>
                            </span>
                        </div>
                        <!--会话记录-->
                        <div style="width: calc(100% - 40px);font-size: 12px;position: absolute;top: 0;left: 20px;z-index: 10">
                            <div v-for="(item,index) in messages"
                                 style="width: 100%;font-size: 14px;line-height: 26px;color: black;margin: 20px 0;">
                                <!--客服-->
                                <div v-if="!(item.messageUserType=='USER')">
                                    <!--ROBERT-->
                                    <div v-show="item.messageUserType=='ROBERT'"
                                         style="display: flex;justify-content: flex-start;">
                                        <!--头像-->
                                        <div style="width: 50px;height: 50px">
                                            <div style="width: 38px;height: 38px;margin: 0 6px 6px 6px;">
                                                <img v-if="item.userImage" :src="imageAddPath(item.userImage)" alt=""
                                                     style="width: 100%;height: 100%;border-radius: 50%">
                                                <img v-else src="@/assets/logo11.png" alt=""
                                                     style="width: 100%;height: 100%;border-radius: 50%">
                                            </div>
                                        </div>
                                        <!--内容-->
                                        <div style="max-width: 650px;margin-left: 5px;">
                                            <!--用户名/客服-->
                                            <div>
                                                <p style="margin: 5px 0;font-size: 16px;">{{item.userName}}</p>
                                            </div>
                                            <!-- 文本 -->
                                            <div style="position: relative">
                                                <div>
                                                    <div style="max-width: 650px;padding: 12px 15px 12px 15px;background-color: white;border-radius: 5px;display: inline-block;"
                                                         v-show="item.messageContent.messageContentType != 'HTML'">
                                                        <!-- +FAQ -->
                                                        <p style="margin: 0;">
                                                        {{item.messageContent.content}}<!-- 内容 -->
                                                        </p>
                                                        <div v-show="item.messageContent.messageContentType != 'ML'">
                                                            <p v-for="(ele) in item.messageContent.messageContentList"
                                                               style="margin: 0;cursor: pointer;"
                                                               @click="sessionFAQClick(item,index)">
                                                                {{ele.content}}<!-- 内容 -->
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div style="max-width: 650px;padding: 12px 15px 12px 15px;background-color: white;border-radius: 5px;display: inline-block;"
                                                         v-show="item.messageContent.messageContentType == 'HTML'"
                                                         v-html="item.messageContent.content"></div>
                                                </div>
                                                <!-- 左侧小三角形 ==> -->
                                                <!--                                                <div style="width:0;position: absolute;top:20px;left:-10px;border: 5px solid transparent;border-right: 5px solid white;"></div>-->
                                                <!-- <== 左侧小三角形 -->
                                                <!-- +快捷入口 -->
                                                <div style="margin-top: 7px;display: inline-block;"
                                                     v-show="item.messageContent.messageContentType == 'ML'">
                                                    <!--<div v-for="(ele,indexs) in item.messageContent.messageContentList"
                                                         style="width: 80px;height: 80px;border-radius: 3px;background-color: white;float: left;margin-left: 6px;cursor: pointer;"
                                                         :style="{marginLeft:indexs==0?'0':'6px'}"
                                                        @click="sessionQuickClick(ele,indexs)">
                                                        <div style="text-align: center;margin-top: 15px;width: 100%;height: 30px;">
                                                            <img v-if="ele.imagePath" :src="ele.imagePath" alt="" style="width: 30px;height: 30px;">
                                                            <img v-else src="" alt="" style="width: 30px;height: 30px;">
                                                        </div>
                                                        <div style="text-align: center;">
                                                            <span style="font-size: 14px;color: #959595;">{{ele.content}}</span>
                                                        </div>
                                                    </div>
                                                    <div style="clear: both;"></div>-->
                                                    <div v-for="(ele,indexs) in item.messageContent.messageContentList"
                                                         style="border-radius: 3px;background-color: white;cursor: pointer;margin-top: 6px;"
                                                         @click="sessionQuickClick(ele,indexs)">
                                                        <div style="text-align: center;width: 80px;height: 100%;float: left;">
                                                            <img v-if="ele.imagePath" :src="imageAddPath(ele.imagePath)"
                                                                 alt=""
                                                                 style="width: 30px;height: 30px;margin-top: 15px;">
                                                            <img v-else :src="imageAddPath('helpCenter/shuji.jpg')"
                                                                 alt=""
                                                                 style="width: 30px;height: 30px;margin-top: 15px;">
                                                        </div>
                                                        <div style="float: left;line-height:30px;padding: 0 25px 0 0;max-width: 80%;margin-top: 14px;">
                                                            <span style="font-size: 14px;color: #959595;">{{ele.content}}</span>
                                                        </div>
                                                        <div style="clear: both;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--人工-->
                                    <div v-show="item.messageUserType=='CUSTOMER'"
                                         style="display: flex;justify-content: flex-start;">
                                        <!--头像-->
                                        <div style="width: 50px;height: 50px">
                                            <div style="width: 38px;height: 38px;margin: 0 6px 6px 6px;">
                                                <img v-if="item.userImage" :src="imageAddPath(item.userImage)" alt=""
                                                     style="width: 100%;height: 100%;border-radius: 50%">
                                                <img v-else src="@/assets/logo11.png" alt=""
                                                     style="width: 100%;height: 100%;border-radius: 50%">
                                            </div>
                                        </div>
                                        <!--内容-->
                                        <div style="max-width: 650px;margin-left: 5px;">
                                            <!--用户名/客服-->
                                            <div>
                                                <p style="margin: 5px 0;font-size: 16px;">{{item.userName}}</p>
                                            </div>
                                            <!-- 文本 -->
                                            <div style="position: relative">
                                                <div>
                                                    <div style="max-width: 650px;padding: 12px 15px 12px 15px;background-color: white;border-radius: 5px;display: inline-block;">
                                                        <p style="margin: 0;">
                                                            {{item.messageContent.content}}<!-- 内容 -->
                                                        </p>
                                                    </div>
                                                </div>
                                                <!-- 左侧小三角形 ==> -->
                                                <!--                                                <div style="width:0;position: absolute;top:20px;left:-10px;border: 5px solid transparent;border-right: 5px solid white;"></div>-->
                                                <!-- <== 左侧小三角形 -->
                                            </div>
                                        </div>
                                    </div>
                                    <!--时间-->
                                    <div style="padding-left: 55px;box-sizing: border-box;">
                                        <p style="margin: 5px 0;color:#999a9c;font-size: 12px">{{item.messageTime}}</p>
                                    </div>
                                </div>
                                <!--用户-->
                                <div v-else style="text-align: right;">
                                    <div style="display: inline-block;">
                                        <div style="display: flex;justify-content: flex-end;">
                                            <!--内容-->
                                            <div style="max-width: 650px;margin-right: 5px;">
                                                <!--用户名/用户-->
                                                <div>
                                                    <p style="margin: 5px 0;">{{item.userName}}</p>
                                                </div>
                                                <!-- 文本 -->
                                                <div style="position: relative;">
                                                    <div>
                                                        <div style="max-width: 650px;padding: 12px 15px 12px 15px;background-color: white;border-radius: 5px;display: inline-block;">
                                                            <p style="margin: 0;text-align: left;">
                                                                {{item.messageContent.content}}<!-- 内容 -->
                                                             </p>
                                                        </div>
                                                    </div>
                                                    <!-- 左侧小三角形 ==> -->
                                                    <!--                                                    <div style="width:0;position: absolute;top:20px;right:-5px;border: 5px solid transparent;border-left: 5px solid white;"></div>-->
                                                    <!-- <== 左侧小三角形 -->
                                                </div>
                                            </div>
                                            <!--头像-->
                                            <div style="width: 50px;height: 50px">
                                                <div style="width: 38px;height: 38px;margin: 0 6px 6px 6px;">
                                                    <img v-if="item.userImage" :src="imageAddPath(item.userImage)"
                                                         alt=""
                                                         style="width: 100%;height: 100%;border-radius: 50%">
                                                    <img v-else src="@/assets/img/helpCenter/headPortrait.png" alt=""
                                                         style="width: 100%;height: 100%;border-radius: 50%">
                                                </div>
                                            </div>
                                        </div>
                                        <!--时间-->
                                        <div style="padding-right: 55px;box-sizing: border-box;">
                                            <p style="margin: 5px 0;color:#999a9c;font-size: 12px">
                                                {{item.messageTime}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--类别-->
                <div class="classes">
                    <div v-for="(item,index) in sessionAreaClasses"
                         style="height: 100%;margin-left: 6px;float: left;margin-top: 11px;">
                        <span style="padding: 0 12px;font-size: 14px;line-height: 25px;border: 1px solid #285185;border-radius: 25px;color: #999999;cursor: pointer;"
                              :style="{backgroundColor:sessionAreaClassesFlag.value==item.value?'#71a7ef':'transparent',
                                        color:sessionAreaClassesFlag.value==item.value?'white':'#999999',
                                        border:sessionAreaClassesFlag.value==item.value?'1px solid transparent':'1px solid #285185'}"
                              @click="filtrateClasses(item,index)">
<!--                            {{i18n(item.label)}}-->
                            {{item.value}}
                        </span>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <!--输入区域-->
                <div class="inputText">
                    <!--表情/图片-->
                    <!--<div style="height: 32px;width: 100%;padding-top: 6px;box-sizing: border-box;">
                        <div v-for="(item,index) in sessionAreaFunction"
                             style="width: 20px;height: 20px;display: inline-block;margin-left: 6px;cursor: pointer;">
                            <emoji v-if="item.value=='表情'" style="float:left;">
                                <div slot="icon" style="float:left;">
                                    <i v-if="item.iconName" :class="item.iconName" style="font-size: 20px;color: #5b5f68;"
                                       @click="sendkind(item,index)"></i>
                                    <img v-else :src="item.iconImg" alt="" @click="sendkind(item,index)">
                                </div>
                            </emoji>
                            <div v-else-if="item.value=='图片'" style="float:left;">
                                <i v-if="item.iconName" :class="item.iconName" style="font-size: 20px;color: #5b5f68;"
                                   @click="sendkind(item,index)"></i>
                                <img v-else :src="item.iconImg" alt="" @click="sendkind(item,index)">
                            </div>
                        </div>
                    </div>-->
                    <!--<div style="height: 32px;width: 100%;padding-top: 6px;box-sizing: border-box;">
                        <div v-for="(item,index) in sessionAreaFunction"
                             style="width: 20px;height: 20px;display: inline-block;margin-left: 6px;cursor: pointer;">
                            <emoji v-if="item.value=='表情'" style="float:left;" class="items" ref="qqemoji" @select="qqemoji_selectFace">
                                <div slot="icon" style="float:left;">
                                    <i v-if="item.iconName" :class="item.iconName"
                                       style="font-size: 20px;color: #5b5f68;"
                                       @click="sendkind(item,index)"></i>
                                    <img v-else :src="item.iconImg" alt="" @click="sendkind(item,index)">
                                </div>
                            </emoji>
                            <div v-else-if="item.value=='图片'" style="float:left;">
                                <i v-if="item.iconName" :class="item.iconName" style="font-size: 20px;color: #5b5f68;"
                                   @click="sendkind(item,index)"></i>
                                <img v-else :src="item.iconImg" alt="" @click="sendkind(item,index)">
                            </div>
                        </div>
                    </div>-->
                    <!--输入内容-->
                    <div style="height: 103px;width: 100%;padding-bottom: 6px;box-sizing: border-box;overflow: hidden;">
                        <el-input
                                type="textarea"
                                :rows="4"
                                resize="none"
                                :placeholder="$i18n.locale=='zh'?'请输入内容':'Please enter content'"
                                v-model="senderMessage"
                                maxlength="50"
                                show-word-limit
                                @keyup.alt="onStop(1)"
                                @keydown.alt="onStop(11)"
                                @keyup.alt.enter.native="onStop(3)"
                                @keydown.alt.enter.native="onStop(33)"
                                @keyup.ctrl.enter.native="onStop(4)"
                                @keydown.ctrl.enter.native="onStop(44)"
                                @keyup.enter.native="toSend(senderMessage)">
                        </el-input>
                        <!--<div
                                maxlength="500"
                                class="inputContent common_chat_emoji-wrapper-global"
                                id="common_chat_input"
                                contenteditable="true"
                                @paste.stop="inputContent_paste"
                                @drop="inputContent_drop"
                                @keydown="inputContent_keydown"
                                @mouseup="inputContent_mouseup"
                        ></div>-->
                    </div>
                    <!--发送-->
                    <div style="height: 32px;width: 100%;text-align: right;">
                        <button v-if="senderMessage" type="button" style="width: 87px; height: 32px;border-radius: 4px;color: white;cursor:pointer;
                                font-size: 16px;line-height: 30px;text-align: center;border: none;background-color: #2c5589;outline:none;"
                                @click="toSend(senderMessage)">
                            {{i18n('Send')}}
                        </button>
                        <button v-else type="button" style="width: 87px; height: 32px;border-radius: 4px;color: white;cursor:not-allowed;
                                font-size: 16px;line-height: 30px;text-align: center;border: none;background-color: #71a7ef;outline:none;">
                            {{i18n('Send')}}
                        </button>
                    </div>
                </div>
            </div>
            <div class="functionalArea">
                <!--常见问题-->
                <div class="content">
                    <!--标题-->
                    <div style="width: 100%;height: 50px;border-bottom: 1px solid #e1e1e3;padding:0 15px;box-sizing: border-box;">
                        <span style="float:left;;font-size: 18px;line-height: 50px; color: #1d202f;">
                            {{$i18n.locale=='zh'?'常见问题':'FAQ'}}
                        </span>
                        <span style="float: right;font-size: 16px;line-height: 50px; color: #365282;cursor: pointer;"
                              @click="changeTheBatch()">
                            {{i18n('ChangeTheBatch')}}
                        </span>
                        <div style="clear: both;"></div>
                    </div>
                    <!--正文-->
                    <div style="width: 100%;padding: 6px 20px 6px 36px;box-sizing: border-box">
                        <ul v-for="(item,index) in FAQ">
                            <li style="font-size: 14px;line-height: 26px; color: #365282;" @click="toFAQ(item,index)">
                                <span style="cursor: pointer;">{{item.label}}</span>
                            </li>
                        </ul>
                        <div style="clear: both;"></div>
                    </div>
                </div>
                <!--平台服务-->
                <div class="content">
                    <!--标题-->
                    <div style="width: 100%;height: 50px;border-bottom: 1px solid #e1e1e3;padding:0 15px;box-sizing: border-box;">
                        <span style="float:left;;font-size: 18px;line-height: 50px; color: #1d202f;">
                            {{$i18n.locale=='zh'?'平台服务':'Platform services'}}
                        </span>
                        <div style="clear: both;"></div>
                    </div>
                    <!--正文-->
                    <div style="width: 100%;padding: 0 15px 5px 15px;box-sizing: border-box;">
                        <div v-for="(item,index) in services"
                             style="float: left;width: 25%; height: 92px;">
                            <div style="width: 100%;height: 33px;text-align: center;margin-top: 14px">
                                <img :src="item.icon" alt="" style="width: 33px;height: 33px;cursor: pointer;"
                                     @click="toServices(item,index)">
                            </div>
                            <div style="width: 100%;height: 33px;text-align: center;margin-top: 8px;">
                                <span style="font-size: 12px;cursor: pointer;" @click="toServices(item,index)">
<!--                                    {{i18n(item.label)}}-->
                                    {{item.label}}
                                </span>
                            </div>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
                <!--快捷入口-->
                <div class="content">
                    <!--标题-->
                    <div style="width: 100%;height: 50px;border-bottom: 1px solid #e1e1e3;padding:0 15px;box-sizing: border-box;">
                        <span style="float:left;;font-size: 18px;line-height: 50px; color: #1d202f;">
                            {{$i18n.locale=='zh'?'快捷入口':'Quick entry'}}
                        </span>
                        <div style="clear: both;"></div>
                    </div>
                    <!--正文-->
                    <div style="width: 100%;box-sizing: border-box;">
                        <div v-for="(item,index) in quick"
                             style="float: left;width: 155px; height: 66px;margin: 15px 0 0 15px;background-size:100% 100%;padding-left: 14px;box-sizing: border-box;cursor: pointer;
                                    display: flex;align-items:center;"
                             :style="{backgroundImage:'url('+ item.backImg +')'}"
                             @click="toQuick(item,index)">
                            <span style="display: inline-block;width:100%;float:left;;font-size: 14px;color: #1d202f;">
<!--                                {{i18n(item.label)}}-->
                                {{item.label}}
                            </span>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
            </div>
            <div style="clear: both;"></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="toViewLocal('login')">
                  {{$t('common.ReminderFifth')}}
                </span>
                   <span style="margin-left: 10px;" class="cursor" @click="toViewLocal('Register')">
                  {{$t('common.ReminderSixth')}}
                </span>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getDicts} from "@/api/dict";
    import Base from "@/views/base/Base";
    import {getToken, resetToken} from "@/utils/auth";
    import {robertClientMessages, getOperationListByOperationType} from "@/api/customer/customerServiceRobert"
    import {artificialClientMessages} from "@/api/customer/customerServiceStaff"
    import {getHelpCenterLanguages} from "@/api/operation/help/helpCenterLanguage"
    import {getHelpColumnContent} from '@/api/operation/help/helpCenterEntity'
    import emoji from "./emoji.vue";

    export default {
        extends: Base,
        components: {
            emoji: emoji
        },
        data() {
            return {
                num:5,
                timer:'',
                toViewLogin:false,
                isEnterStop: false,
                initWeb: false,
                //socket连接
                socket: null,
                //本地重连状态
                lockReconnect: false,
                tt: {},
                //socket连接地址
                socketUrl: '',
                artificial: {
                    userId: '',
                    userName: '',
                    userImage: '',
                },
                user: {
                    userId: '',
                    userName: '',
                    userImage: '',
                },
                //FAQ分页页码
                FAQPageNo: 1,
                // 当前客服状态
                serviceStatus: 'ROBERT', //  ROBERT/Artificial
                staffService: 'off-line', //  on-line/off-line
                //转人工客服(悬浮块)
                sessionContentScrollTop: Number,
                /*** 会话区数据 ***/
                //会话title
                sessionAreaTitle: '能联全球',
                //类别
                sessionAreaClassesFlag: '', //已选择类别
                sessionAreaClasses: [
                    // {
                    //     label: 'MemberApply',
                    //     value: '入会申请',
                    // },
                    // {
                    //     label: 'ActivityRegistration',
                    //     value: '活动报名',
                    // },
                    // {
                    //     label: 'ForgetPassword',
                    //     value: '忘记密码',
                    // },
                    // {
                    //     label: 'AllianceApply',
                    //     value: '入盟申请',
                    // },
                ],
                //表情、图片
                sessionAreaFunction: [
                    {
                        value: '表情',
                        index: 0,
                        iconName: 'el-icon-stopwatch',
                        iconImg: '',
                    },
                    {
                        value: '图片',
                        index: 1,
                        iconName: 'el-icon-picture-outline-round',
                        iconImg: '',
                        // iconImg:require(''),
                    },
                ],
                //输入内容
                senderMessage: '',
                messageCount: 'FIRST',
                sendRequestMessageContent: {
                    messageContentType: 'STR',
                    content: "",
                    language: this.$i18n.locale.toUpperCase(),
                },
                sendRequestMessage: {
                    "userId": "0",
                    "userName": "游客",
                    "userImage": "helpCenter/logo11.png",
                    "messageTime": 1223123412341,
                    "messageType": "USER",
                    "messageUserType": "USER",
                    "messageTypeExtend": "",
                    "language": this.$i18n.locale.toUpperCase(),
                    "messageContent": "",
                },
                //心跳检测
                heartCheck: {},
                messages: [],
                /*** 功能区数据     语言包在user_zh/user_en  ***/
                FAQ: [
                    // {label: '如何开通平台账号'},
                    // {label: '自动生成的账号可以修改吗'},
                    // {label: '如何修改实名认证手机'},
                    // {label: '如何开通平台账号'},
                    // {label: '如何开通平台账号'},
                    // {label: '如何开通平台账号'},
                    // {label: '如何开通平台账号'},
                ],
                services: [
                    // {
                    //     icon:require('@/assets/img/home/discussion3.png'),
                    //     label:'ConferenceService',
                    //     value:'会议服务',
                    // },
                    // {
                    //     icon:require('@/assets/img/helpCenter/zuanshi.jpg'),
                    //     label:'vipService',
                    //     value:'会员服务',
                    // },
                    // {
                    //     icon:require('@/assets/img/home/finance3.png'),
                    //     label:'FinancialServices',
                    //     value:'金融服务',
                    // },
                    // {
                    //     icon:require('@/assets/img/home/share3.png'),
                    //     label:'ResourceSharing',
                    //     value:'资源共享服务',
                    // },
                    // {
                    //     icon:require('@/assets/img/home/Exhibition3.png'),
                    //     label:'ExhibitionService',
                    //     value:'会展服务',
                    // },

                ],
                quick: [
                    // {
                    //     backImg:require('@/assets/img/helpCenter/quickBackImg1.jpg'),
                    //     label:'applyMembership1',
                    //     value:'申请入会',
                    // },
                    // {
                    //     backImg:require('@/assets/img/helpCenter/quickBackImg2.jpg'),
                    //     label:'applyMembership2',
                    //     value:'申请入盟',
                    // },
                    // {
                    //     backImg:require('@/assets/img/helpCenter/quickBackImg3.jpg'),
                    //     label:'Donation',
                    //     value:'资助洽商',
                    // },
                    // {
                    //     backImg:require('@/assets/img/helpCenter/quickBackImg4.jpg'),
                    //     label:'applyCustomizedServices',
                    //     value:'申请定制服务',
                    // },
                    // {
                    //     backImg:require('@/assets/img/helpCenter/quickBackImg5.png'),
                    //     label:'resourceApplicationResearch',
                    //     value:'申请调研',
                    // },
                ],
            }
        },
        mounted() {
            // console.log('mounted')
            // this.initWeb = true
            // this.enterKeyup();
            this.sendRequestMessage.language = this.$i18n.locale.toUpperCase();
            this.sendRequestMessageContent.language = this.$i18n.locale.toUpperCase();
            // this.initdata();
            this.$nextTick(() => {
                const el = document.getElementById('sessionContent');
                el.onscroll = () => {
                    let scrollTop = el.scrollTop;
                    this.sessionContentScrollTop = scrollTop;
                };
                if (el.scrollHeight > el.clientHeight) {
                    el.scrollTop = el.scrollHeight;
                }
            });
            // if(this.$i18n.locale.toUpperCase() == 'EN'){
            this.messages = [];
            this.messageCount = 'FIRST';
            this.initdata();
            // this.initWeb = false;
            // }
        },
        watch: {
            /*'$i18n.locale'(val, oldval) {
                console.log('watch')
                console.log(val)

                if (val == 'zh') {
                    if (this.mountedEnd == true) {
                        this.mountedEnd = false;
                    } else {
                        // this.slideShowImgFlag=0;
                        this.sendRequestMessage.language = this.$i18n.locale.toUpperCase();
                        this.sendRequestMessageContent.language = this.$i18n.locale.toUpperCase();
                        this.messages = [];
                        this.messageCount = 'FIRST'
                        this.initdata();
                    }
                } else {
                    this.sendRequestMessage.language = this.$i18n.locale.toUpperCase();
                    this.sendRequestMessageContent.language = this.$i18n.locale.toUpperCase();
                    this.messages = [];
                    this.messageCount = 'FIRST'
                    this.initdata();
                }
            },*/
            '$i18n.locale': {
                handler(val, oldval) {
                    // console.log('$i18n')
                    this.sendRequestMessage.language = this.$i18n.locale.toUpperCase();
                    this.sendRequestMessageContent.language = this.$i18n.locale.toUpperCase();
                    this.messages = [];
                    this.messageCount = 'FIRST';
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.user.userName = '游客';
                        this.sendRequestMessage.userName = '游客';
                    } else {
                        this.user.userName = 'Tourist';
                        this.sendRequestMessage.userName = 'Tourist';
                    }
                    this.initdata();
                },
            },
            'messages.length'() {
                this.$nextTick(() => {
                    const el = document.getElementById('sessionContent');
                    if (el.scrollHeight > el.clientHeight) {
                        el.scrollTop = el.scrollHeight;
                    }
                })
            },
            "toViewLogin"(){
                if(this.toViewLogin==true){
                    this.loginTipsChange();
                }
            }
        },
        methods: {
            //拦截alt+enter\ctrl+enter事件
            onStop(ele) {
                console.log(ele)
                this.senderMessage = ''
                this.isEnterStop = true;
            },
            //连接地址补全
            linkAddPath(path) {
                var str = new RegExp("http");
                const origin = document.location.origin
                if (!str.test(path)) {
                    return origin + "/#/" + path;
                } else {
                    return path
                }
            },
            //图片地址补全
            imageAddPath(path) {
                const origin = document.location.origin
                // console.log(origin + "/common/opt/file/pub/" + path)
                return origin + "/api/file/pub/" + path;
            },
            //通用跳转方法
            toView(href) {
                window.open(href, '_blank');
            },
            toViewLocal(router, json) {
                // let rpath = { name: router, query: {key:JSON.stringify(json)}};
                clearInterval(this.timer);
                let rpath = { name: 'customerService'};
                sessionStorage.setItem('pathReminder', JSON.stringify(rpath));
                this.$router.push({ name: router, params: {key:json} });
            },
            //初始化方法
            initdata() {
                // this.initWeb = true;
                this.checkUser();
                //第一次请求
                this.toSend("");
                //获取常见问题
                this.getFAQ();
                //获取快捷点击栏
                this.getSessionAreaClasses();
                //获取平台服务数据
                this.getServices();
                //获取快捷入口数据
                this.getQuicks();
                // this.initWeb = false;
            },
            checkUser() {
                let that = this;
                let user = window.localStorage.getItem("user");
                var users = JSON.parse(user);

                if (users != null) {
                    this.user.userId = users.userId;
                    this.user.userName = users.username;
                    this.sendRequestMessage.userId = this.user.userId;
                    // if(users.umsUser.userNickName){
                    //     this.sendRequestMessage.userName = users.umsUser.userNickName;
                    // }else{
                        this.sendRequestMessage.userName = this.user.userName;
                    // }
                    if (users.umsUser.userPic) {
                        this.user.userImage = users.umsUser.userPic;
                        this.sendRequestMessage.userImage = this.user.userImage;
                    }
                } else if (that.user.userId == '') {
                    this.user.userId = new Date().getTime();
                    this.sendRequestMessage.userId = this.user.userId;
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.user.userName = '游客';
                        this.sendRequestMessage.userName = '游客';
                    } else {
                        this.user.userName = 'Tourist';
                        this.sendRequestMessage.userName = 'Tourist';
                    }
                    this.user.userImage = '';
                    this.sendRequestMessage.userImage = this.user.userImage;
                }
            },
            //换一页功能
            changeTheBatch() {
                if (this.FAQPageNo < 3) {
                    this.FAQPageNo++
                } else {
                    this.FAQPageNo = 1;
                }
                this.getFAQ(this.FAQPageNo);
            },
            //获取常见问题
            async getFAQ(pageNo) {
                let that = this;
                let param={
                    pageSize:5,
                    pageNo: this.FAQPageNo ? this.FAQPageNo : 1,
                    businessType:'help_center',
                    language:'',
                    approveStatusDict:3,
                }
                param.language =this.$i18n.locale.toUpperCase();
                getHelpColumnContent(param).then((res) =>{
                    this.FAQ = []
                    res.data.cmsInformationViews.forEach(item => {
                        this.FAQ.push({label: item.title, id: item.businessId});
                    })
                    if (that.FAQPageNo >= res.data.page.totalPage) {
                        that.FAQPageNo = 0
                    }
                })
            },
            //快捷点击栏
            async getQuicks() {
                let that = this;
                var operationType = "QUICKACCESS"
                var language = this.$i18n.locale.toUpperCase();
                getOperationListByOperationType(operationType, language).then((res) => {
                    if ('200' == res.status) {
                        this.quick = [];
                        res.data.customerOperations.forEach(item => {
                            this.quick.push({
                                label: item.modelContent,
                                value: item.modelContent,
                                backImg: that.imageAddPath(item.imagePath),
                                link: that.linkAddPath(item.linkPath),
                            })
                        })
                    }
                });
            },
            //获取服务列表
            async getServices() {
                let that = this;
                var operationType = "PLATFORMSERVICES"
                var language = this.$i18n.locale.toUpperCase();
                getOperationListByOperationType(operationType, language).then((res) => {
                    if ('200' == res.status) {
                        this.services = [];
                        res.data.customerOperations.forEach(item => {
                            this.services.push({
                                label: item.modelContent,
                                value: item.modelContent,
                                icon: that.imageAddPath(item.imagePath),
                                link: that.linkAddPath(item.linkPath),
                            })
                        })
                    }
                });
            },
            //获取类别列表
            async getSessionAreaClasses() {
                var operationType = "QUICKLIST"
                var language = this.$i18n.locale.toUpperCase();
                getOperationListByOperationType(operationType, language).then((res) => {
                    if ('200' == res.status) {
                        this.sessionAreaClasses = [];
                        res.data.customerOperations.forEach(item => {
                            this.sessionAreaClasses.push({
                                label: item.modelContent,
                                value: item.modelContent,
                                link: item.linkPath,
                            })
                        })
                    }
                });
            },
            /*** 会话区事件 ***/
            //转人工客服/转智能客服
            changeService() {
                if (this.serviceStatus == 'ROBERT') {
                    this.serviceStatus = 'Artificial'
                    this.openSocket();
                } else if (this.serviceStatus == 'Artificial') {
                    this.serviceStatus = 'ROBERT'
                    this.socket.close()
                    this.heartCheck.stop();
                }
            },
            //类别
            async filtrateClasses(ele, index) {
                this.sessionAreaClassesFlag = ele;
                this.toSend(ele.value)
            },
            //表情、图片
            async sendkind(ele, index) {
                if (index == 0) {
                    // 表情事件
                    console.log(ele)
                    console.log(index)
                }
                if (index == 1) {
                    // 图片事件
                    console.log(ele)
                    console.log(index)
                }
            },
            // 发送内容
            async toSend(senderMessage) {
                if (this.isEnterStop) {
                    this.isEnterStop = false;
                } else {
                    let that = this;
                    if (senderMessage) {
                        if (senderMessage.match(/^\s+$/)) {
                            return this.senderMessage = '';
                        }
                        if (senderMessage.match(/^[ ]+$/)) {
                            return this.senderMessage = '';
                        }
                        if (senderMessage.match(/^[ ]*$/)) {
                            return this.senderMessage = '';
                        }
                        if (senderMessage.match(/^\s*$/)) {
                            return this.senderMessage = '';
                        }
                    }
                    if (this.serviceStatus == 'ROBERT') {
                        // this.messageCount= 'CHAT';
                        this.sendRequestMessageContent.content = senderMessage;
                        this.sendRequestMessage.messageContent = this.sendRequestMessageContent;
                        this.sendRequestMessage.messageTime = this.dateFormat("YYYY-mm-dd HH:MM:SS", new Date());
                        let messageCount = JSON.parse(JSON.stringify(this.messageCount));
                        if (this.messageCount != 'FIRST') {
                            let sendRequestMessageget = JSON.parse(JSON.stringify(this.sendRequestMessage));
                            that.messages.push(sendRequestMessageget)
                        }
                        robertClientMessages(messageCount, JSON.stringify(this.sendRequestMessage)).then((res) => {

                            if (res.status == '200') {
                                if (messageCount == 'FIRST') {
                                    that.messages = []
                                }
                                that.messages.push(res.data.messages)
                                this.messageCount = 'CHAT'
                            }
                        });
                    } else if (this.serviceStatus == 'Artificial') {
                        this.sendRequestMessageContent.content = senderMessage;
                        this.sendRequestMessage.messageContent = this.sendRequestMessageContent;
                        this.sendRequestMessage.messageTime = this.dateFormat("YYYY-mm-dd HH:MM:SS", new Date());
                        var message = {
                            userId: "",
                            message: "",
                            messageType: "ARTM",
                        }
                        message.message = this.sendRequestMessage
                        message.userId = this.artificial.userId
                        this.socket.send(JSON.stringify(message));
                        let sendRequestMessageget = JSON.parse(JSON.stringify(this.sendRequestMessage));
                        that.messages.push(sendRequestMessageget)
                        this.messageCount = 'CHAT'
                        // artificialClientMessages(this.artificial.userId,JSON.stringify(this.sendRequestMessage)).then((res) => {
                        //     if (res.status == '200') {
                        //         let sendRequestMessageget = JSON.parse(JSON.stringify(this.sendRequestMessage));;
                        //         that.messages.push(sendRequestMessageget)
                        //         this.messageCount = 'CHAT'
                        //     }
                        // });

                        console.log(this.artificial)
                    }
                    this.senderMessage = ''; //清空输入框
                }
            },
            async toSendMessage(data) {
                // 发送请求
            },
            async toPushSession(data) {
                this.message.push(data)
            },
            //智能客服
            sessionFAQClick(ele, index) {
                alert("sessionFAQClick")
            },
            sessionQuickClick(ele, index) {
                // alert("sessionQuickClick")
                // 快捷点击
                console.log('ele,index')
                console.log(ele,index)
                this.toSend(ele.content);
            },
            /*** 功能区事件 ***/
            // 常见问题事件
            async toFAQ(ele, index) {
                this.$store.commit('modify', 'helpCenter');
                window.localStorage.setItem('router', 'helpCenter');
                const {href} = this.$router.resolve({
                    name: 'helpCenter',
                    query: {
                        key: ele.id
                    }
                });
                window.open(href, '_blank');
            },
            // 平台服务事件
            async toServices(ele, index) {
                this.toView(ele.link);
            },
            // 快捷入口事件
            async toQuick(ele, index) {
                if (!this.$Cookies.get('token')){
                    this.toViewLogin = true;
                }else{
                    this.toView(ele.link);
                }
                // this.$router.push({ name: 'IntroductionMemberProfile', query: { data: row, key: 'custom', disable: true, index: this.taberIndex } })
            },
            // 国际化
            i18n(data) {
                return this.$t('common.' + data);
            },
            dateFormat(fmt, date) {
                let ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    }
                    ;
                }
                ;
                return fmt;
            },

            //socket
            openSocket() {
                let that = this;
                if (typeof WebSocket == "undefined") {
                    console.log("您的浏览器不支持WebSocket");
                } else {
                    console.log("您的浏览器支持WebSocket");
                    //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
                    this.createSocket();
                }
            },
            //创建Socket连接
            createSocket() {
                let that = this;
                let user = window.localStorage.getItem("user");
                var users = JSON.parse(user);
                if (users != null) {
                    that.user = users;
                } else if (that.user.userId == '') {
                    that.user.userId = new Date().getTime();
                }
                var islocalhost = 'localhost' == document.location.hostname ? true : false;
                if (islocalhost) {
                    this.socketUrl =
                        "http://localhost:7028/userConn/" + this.$i18n.locale.toUpperCase() + "/" + that.user.userId;
                } else {
                    const origin = document.location.origin
                    this.socketUrl =
                        origin + "/userConn/" + this.$i18n.locale.toUpperCase() + "/" + that.user.userId;

                }
                this.socketUrl = this.socketUrl.replace("https", "wss").replace("http", "ws");
                console.log(this.socketUrl);
                if (this.socket != null) {
                    this.socket.close();
                    this.socket = null;
                }
                this.socket = new WebSocket(this.socketUrl);
                this.initSocketFunction()
            },
            initHeartCheck() {
                let that = this;
                this.heartCheck = {
                    timeout: 30000,
                    timeoutObj: null,
                    serverTimeoutObj: null,
                    socket: this.socket,
                    start: function () {
                        console.log('start');
                        var self = this;
                        this.timeoutObj && clearTimeout(this.timeoutObj);
                        this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
                        this.timeoutObj = setTimeout(function () {
                            //这里发送一个心跳，后端收到后，返回一个心跳消息，
                            var message = {
                                userId: "",
                                message: "",
                                messageType: "PING",
                            }
                            var a = JSON.stringify(message);
                            that.socket.send(a);
                            self.serverTimeoutObj = setTimeout(function () {
                                console.log(that.socket);
                                that.socket.close();
                            }, self.timeout);
                        }, this.timeout)
                    },
                    stop: function () {
                        window.clearTimeout(this.timeoutObj);
                        window.clearTimeout(this.serverTimeoutObj);
                        return this;
                    },
                }
            },
            //初始化socket对应操作方法
            initSocketFunction() {
                let that = this
                //初始化心跳
                this.initHeartCheck()
                //打开事件
                this.socket.onopen = function () {
                    console.log("websocket已打开");
                    that.heartCheck.start();
                    //socket.send("这是来自客户端的消息" + location.href + new Date());
                };
                //获得消息事件
                this.socket.onmessage = function (msg) {
                    that.heartCheck.start();
                    console.log(msg);
                    var message = JSON.parse(msg.data);
                    if (message.messageType == 'PONG') {
                        console.log(message)
                    } else {
                        console.log(message)
                        that.artificial.userId = message.userId;
                        that.artificial.userName = message.userName;
                        that.messages.push(message)
                    }

                    //发现消息进入    开始处理前端触发逻辑

                };
                //关闭事件
                this.socket.onclose = function () {
                    console.log("websocket已关闭");
                };
                //发生了错误事件
                this.socket.onerror = function () {
                    console.log("websocket发生了错误");
                    that.reconnect(this.socketUrl);
                };
            },
            //重连方法
            reconnect() {
                let that = this;
                if (this.lockReconnect) {
                    return;
                }
                ;
                this.lockReconnect = true;
                //没连接上会一直重连，设置延迟避免请求过多
                this.tt && window.clearTimeout(this.tt);
                this.tt = window.setTimeout(function () {
                    that.createSocket();
                    that.lockReconnect = false;
                }, 4000);
            },
            // enterKey(event) {
            //         const code = event.keyCode
            //             ? event.keyCode
            //             : event.which
            //                 ? event.which
            //                 : event.charCode;
            //         if (code == 13) {
            //             console.log("asdfasdfasdfadsf")
            //         }
            // },
            // enterKeyup() {
            //     document.addEventListener("keyup", this.enterKey);
            // },
            //人工消息发布
            sendMessage() {
                if (typeof WebSocket == "undefined") {
                    console.log("您的浏览器不支持WebSocket");
                } else {
                    console.log("您的浏览器支持WebSocket");
                    console.log(
                        '{"toUserId":"' +
                        this.toUserId +
                        '","contentText":"' +
                        this.content +
                        '"}'
                    );
                    this.socket.send(
                        '{"toUserId":"' +
                        this.toUserId +
                        '","contentText":"' +
                        this.content +
                        '"}'
                    );

                }
            },

            // 判断未登录跳转是否关闭
            toViewLoginChange(done){
                this.toViewLogin=false;
                this.num=5;
                clearInterval(this.timer);
            },
            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.toViewLocal('login');
                        }else {
                            clearInterval(that.timer);
                        }
                    }
                }, 1000)
            },
        },
    }
</script>
<style scoped>
    .oneLine {
        /* 隐藏溢出元素 */
        overflow: hidden;
        /* 单行显示 */
        white-space: nowrap;
        /* 溢出显示省略号 */
        text-overflow: ellipsis;
    }

    .box {
        background: #fff;
        padding: 10px 0 109px 0;
    }

    .sessionArea {
        width: 833px;
        height: 792px;
        border: 1px solid #e1e1e3;
        float: left;
    }

    .sessionArea .title {
        width: 100%;
        height: 50px;
        background-color: #e6e7eb;
        border-bottom: 1px solid #e1e1e3;
        padding-left: 19px;
        box-sizing: border-box;
    }

    .sessionArea .session {
        width: 100%;
        height: 519px;
        background-color: #eef3f7;
    }

    .sessionArea .classes {
        width: 100%;
        height: 44px;
        border-bottom: 1px solid #e1e1e3;
        padding-left: 13px;
        box-sizing: border-box;
    }

    .sessionArea .inputText {
        width: 100%;
        height: 179px;
        padding: 6px 13px;
        box-sizing: border-box;
    }

    .sessionArea .inputText .items {
        clear: both;
        overflow: hidden;
    }

    .functionalArea {
        width: 357px;
        height: 792px;
        border: 1px solid #e1e1e3;
        float: right;
    }

    .functionalArea .content {
        width: 100%;
    }

    .functionalArea .content ul {
        list-style-type: disc;
    }
</style>
<style>
    .inputText .el-textarea {
        /*overflow:hidden*/
    }

    .inputText .el-textarea .el-textarea__inner {
        border: none;
        /*overflow-y: auto;*/
    }
</style>