cnhis-design-vue 0.2.63-beta → 0.3.1-beta

package/packages/multi-chat/chat/index.vue

@@ -1,2341 +0,0 @@
-<template>
-  <div class="online-chat multiChat-chat-index" :class="{ 'chat-style-fold': !isNormalStyle }">
-    <a-spin v-if="loading" class="loading" />
-    <a-layout v-else>
-      <a-layout-sider :width="isNormalStyle ? 300 : 94" class="message-list" :class="{ 'message-list-close': !enable }">
-        <div v-if="enable && !hideSearch && isNormalStyle" class="message-search">
-          <a-input :placeholder="i18nText('1.9.321')" :value="keywords" @change="handleKeywordsChange" @pressEnter="handleKeywordsSearch">
-            <a-icon slot="prefix" type="search" />
-          </a-input>
-          <a-button ghost type="primary" style="margin-left: 10px;" @click="advancedFilterVisible = true">{{ i18nText('1.9.271') }}</a-button>
-        </div>
-        <div :class="{ 'chat-style-set': true, 'show-style': enableTableStyle }">
-          <div v-if="enableTableStyle" class="chat-style-btns">
-            <span :class="{ 'chat-style-btn': true, active: styleType === item.type }" v-for="item in styleBtns" :key="item.type" @click="toggleStyleType(item.type)">
-              <img :src="styleType === item.type ? item.activeIcon : item.icon" />
-            </span>
-          </div>
-          <div>
-            <a-range-picker v-show="isNormalStyle" :value="searchDate" :open="dateOpenStatus" @change="handleSearchDateChange" @openChange="handleDateOpenChange">
-              <i :class="{ 'set-btn-icon': true, active: searchDate.length > 1 }">
-                <svg-icon icon-class="a-xitongtubiaoliaotianriqishaixuan" />
-              </i>
-              <div class="data-picker-clear" slot="renderExtraFooter" @click="clearSearchDate">清空</div>
-            </a-range-picker>
-            <a-tooltip placement="right" title="视图切换">
-              <a-icon class="set-btn-icon" type="swap" @click="toggleStyleFold" />
-            </a-tooltip>
-          </div>
-        </div>
-        <ChatTabsHeader
-          v-if="!isNormalStyle"
-          :activeKey="currentTab"
-          :tabList="tabList"
-          :queueStatistic="queueStatistic"
-          :sessionStatistic="sessionStatistic"
-          :offlineSessionStatistic="offlineSessionStatistic"
-          :classify="classify"
-          :handleOfflineClassifyCount="handleOfflineClassifyCount"
-          :classifyList="classifyList"
-          @change="handleTabChange"
-          @changeClassify="handleClassifyClick"
-        >
-          <template v-if="isConference && enable">
-            <a-tooltip placement="bottom">
-              <template slot="title"> {{ conferenceTitle }} </template>
-              <a-icon class="add-icon" @click="addConference" type="plus-circle" />
-            </a-tooltip>
-          </template>
-        </ChatTabsHeader>
-        <a-tabs v-if="enable" class="message-tabs" :activeKey="currentTab" @change="handleTabChange" :class="{ 'message-conference-tab': isConference, 'message-staff-tab': isStaff }">
-          <template v-for="{ name, type } in tabList">
-            <a-tab-pane :key="type">
-              <a-tooltip v-if="isNormalStyle" placement="top" slot="tab">
-                <template slot="title">
-                  {{ name }}
-                </template>
-                <div class="serverinfo-label" v-if="type === 'queue'">
-                  <span class="ellips" style="max-width: 85%;">{{ name }}</span>
-                  <div>{{ `(${queueStatistic.peopleCount}人)` }}</div>
-                  <span class="msg-count" v-if="queueStatistic && queueStatistic.unreadCount">
-                    <template v-if="+queueStatistic.unreadCount > 99">
-                      <a-tooltip :title="queueStatistic.unreadCount">
-                        99+
-                      </a-tooltip>
-                    </template>
-                    <template v-else>
-                      {{ queueStatistic.unreadCount }}
-                    </template>
-                  </span>
-                </div>
-                <div class="serverinfo-label" v-else-if="type === 'session'">
-                  <span class="ellips" style="max-width: 85%;">{{ name }}</span>
-                  <div>{{ `(${sessionStatistic.peopleCount}人)` }}</div>
-                  <span class="msg-count" v-if="sessionStatistic && sessionStatistic.unreadCount">
-                    <template v-if="+sessionStatistic.unreadCount > 99">
-                      <a-tooltip :title="sessionStatistic.unreadCount">
-                        99+
-                      </a-tooltip>
-                    </template>
-                    <template v-else>
-                      {{ sessionStatistic.unreadCount }}
-                    </template>
-                  </span>
-                </div>
-                <span v-else class="serverinfo-label">
-                  <span class="ellips" style="max-width: 85%;">{{ name }}</span>
-                  <div style="display:none">()</div>
-                  <span class="msg-count" v-if="offlineSessionStatistic && offlineSessionStatistic.unreadCount">
-                    <template v-if="+offlineSessionStatistic.unreadCount > 99">
-                      <a-tooltip :title="offlineSessionStatistic.unreadCount">
-                        99+
-                      </a-tooltip>
-                    </template>
-                    <template v-else>
-                      {{ offlineSessionStatistic.unreadCount }}
-                    </template>
-                  </span>
-                </span>
-              </a-tooltip>
-              <span v-else slot="tab"></span>
-              <template v-if="isNormalStyle && videoRecord.length">
-                <div @click="handleVideoEnter(videoRecord[0])" class="video-record">
-                  <img src="../img/join-video.png" width="16" style="margin-right: 8px;" />
-                  [{{ videoRecord[0].caller.name }}…]正在进行，点击加入
-                </div>
-              </template>
-              <ClassifyTabs v-if="isNormalStyle && isListClassify" :list="classifyList" :value="classify" @input="handleClassifyClick" ref="ClassifyTabs">
-                <template v-slot:default="{ item }">
-                  <svg-icon v-if="item.icon" :icon-class="item.icon"></svg-icon>
-                  <span class="name"> {{ item.name }}{{ item.isStatistic === 'Y' ? (currentTab != 'end' ? `(${item.count})` : `(${handleOfflineClassifyCount(item.classify)})`) : null }} </span>
-                </template>
-              </ClassifyTabs>
-              <div style="flex:1;overflow: hidden;">
-                <scroll-list
-                  v-if="currentTab === type"
-                  :ref="'scrollList-' + type"
-                  :type="type"
-                  :defSessionId="defSessionId"
-                  :theme="isNormalStyle ? (styleType == 'LIST' ? '' : 'table') : 'fold'"
-                  :dateParams="searchDate"
-                ></scroll-list>
-              </div>
-            </a-tab-pane>
-          </template>
-          <template v-if="isConference && enable">
-            <a-tooltip slot="tabBarExtraContent" placement="bottom">
-              <template slot="title"> {{ conferenceTitle }} </template>
-              <a-icon @click="addConference" type="plus-circle" />
-            </a-tooltip>
-          </template>
-        </a-tabs>
-        <div v-if="isNormalStyle" class="footer-operate">
-          <!-- 状态切换 -->
-          <UserStatus v-if="hideHeader" placement="topCenter" />
-          <div class="footer-operate-right">
-            <span v-if="showSetting" class="setting-span">
-              <svg-icon icon-class="a-xitongtubiaoliaotianshezhi" @click="handleSetting" />
-            </span>
-            <span>
-              <a-tooltip placement="bottom">
-                <template slot="title">
-                  <span>声音提醒</span>
-                </template>
-                <svg-icon :icon-class="voiceAlert ? 'a-xitongtubiaoliaotianlaba' : 'a-xitongtubiaoliaotianjingyin'" style="margin-right: 10px" @click="toggleVoiceAlert" />
-              </a-tooltip>
-            </span>
-            <span>
-              <a-tooltip placement="top">
-                <template slot="title">
-                  <span>语音历史</span>
-                </template>
-                <svg-icon @click="toggleVideoVoiceList" icon-class="a-xitongtubiaoliaotiantonghua" />
-              </a-tooltip>
-            </span>
-          </div>
-        </div>
-        <template v-else>
-          <a-popover placement="rightBottom" arrowPointAtCenter>
-            <template slot="content">
-              <div class="chat-operate-group">
-                <div v-if="showSetting" class="chat-operate-item" @click="handleSetting">
-                  <svg-icon icon-class="a-xitongtubiaoliaotianshezhi" />
-                  <span>设置</span>
-                </div>
-                <div class="chat-operate-item" @click="toggleVoiceAlert">
-                  <svg-icon :icon-class="voiceAlert ? 'a-xitongtubiaoliaotianlaba' : 'a-xitongtubiaoliaotianjingyin'" />
-                  <span>静音</span>
-                </div>
-                <div class="chat-operate-item" @click="toggleVideoVoiceList">
-                  <svg-icon icon-class="a-xitongtubiaoliaotiantonghua" />
-                  <span>通话</span>
-                </div>
-              </div>
-            </template>
-            <div class="chat-operate-more">
-              <i class="operate-more-icon"></i>
-            </div>
-          </a-popover>
-          <!-- 状态切换 -->
-          <UserStatus v-if="hideHeader" placement="topCenter" />
-        </template>
-      </a-layout-sider>
-      <a-row style="width: 100%;height: 100%;overflow: hidden;">
-        <a-col :span="mainSpan" style="height: 100%;position: relative">
-          <a-layout>
-            <chat-main :isShowPortraitPanel="isShowPortraitPanel" :hideHeader="hideHeader" v-bind="$attrs">
-              <a-alert v-if="reConnention >= 60" type="warning" message="网络质量不佳，请检查网络后重试！" show-icon>
-                <a-icon type="exclamation-circle" slot="icon" />
-              </a-alert>
-            </chat-main>
-            <chat-footer :addvisible.sync="visible" :validTalkingEnv="validTalkingEnv" :hideQueueBtns="hideQueueBtns"></chat-footer>
-            <Video v-if="showVideo"></Video>
-            <Audio v-if="showAudio" :validTalkingEnv="validTalkingEnv"></Audio>
-            <div v-if="showPanel && clientId" :class="['collapse-icon', foldPanel ? '' : 'fold']" @click="() => (foldPanel = !foldPanel)">
-              <img style="position: absolute;z-index: 30000;top: calc(50% - 6px);right: 10px;" src="../img/left.png" width="9" />
-            </div>
-          </a-layout>
-        </a-col>
-        <a-col :span="panelSpan" style="height: 100%;" class="right-panel">
-          <div v-if="panelSpan > 0" style="margin-left: 5px;box-shadow: -4px 0 4px #e9e9e9;height: 100%;">
-            <div class="tab-operate" v-if="isShowPanel && isShowGroupChat && $slots.userPanel">
-              <span
-                class="tab left"
-                v-if="isShowPanel"
-                :class="{ active: rightPanelTabActive === 0 }"
-                @click="
-                  () => {
-                    this.rightPanelTabActive = 0;
-                  }
-                "
-                >用户信息</span
-              >
-              <span
-                v-if="isShowGroupChat"
-                class="tab right"
-                :class="{ active: rightPanelTabActive === 1 }"
-                @click="
-                  () => {
-                    this.rightPanelTabActive = 1;
-                  }
-                "
-                >成员管理</span
-              >
-            </div>
-            <div
-              v-if="rightPanelTabActive === 0 && isShowPanel"
-              :style="{
-                height: isSupportGroup ? `calc(100% - 50px)` : '100%',
-                padding: '10px 0 10px 10px',
-                background: isSupportGroup ? '#fff' : '#f0f2f5'
-              }"
-            >
-              <slot name="userPanel"></slot>
-            </div>
-            <template v-if="rightPanelTabActive === 1 && isShowGroupChat">
-              <div
-                style="padding: 10px;display: flex;flex-direction: column;"
-                :style="{
-                  height: isSupportGroup ? `calc(100% - 50px)` : '100%'
-                }"
-              >
-                <a-input :value="memberName" placeholder="请输入用户名模糊搜索" class="name-search" @change="handleMemberNameChange">
-                  <a-icon slot="prefix" type="search" />
-                </a-input>
-                <div class="add-member" v-if="showAddMembers">
-                  <span class="add" @click="addMembers('')"> <a-icon type="plus" /> </span>添加成员
-                </div>
-                <div class="member-list">
-                  <div
-                    class="member-item"
-                    v-for="item in sessionMember"
-                    :key="item.userId"
-                    @mouseenter="
-                      () => {
-                        if (item.isOwner === 'Y' || item.userId == clientParams.userId || !isSessionOwner || item.unRemoved === 'Y') return;
-                        $set(item, 'hover', true);
-                      }
-                    "
-                    @mouseleave="
-                      () => {
-                        $set(item, 'hover', false);
-                      }
-                    "
-                  >
-                    <img src="../img/portrait.png" />
-                    <span class="name">{{ item.userName }}</span>
-                    <span class="remove" v-if="item.hover" @click="handleMemberRemoveConfirm(item)">移出</span>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </div>
-        </a-col>
-      </a-row>
-    </a-layout>
-    <div class="overlay" v-if="!enable && !loading">
-      <p class="note">{{ i18nText('1.9.325') }}</p>
-      <p></p>
-    </div>
-
-    <div class="videoHistory-list" v-if="isVideoVoiceList" :class="{ 'show-list': isVideoVoiceList }">
-      <VideoVoiceList @handleVideoEnter="handleVideoEnter" @closeVideoList="closeVideoList"></VideoVoiceList>
-    </div>
-    <Calling v-if="callings.length > 0" :validTalkingEnv="validTalkingEnv" />
-    <div ref="delays" class="delay-wrapper" v-if="delays.length > 0">
-      <Delay v-for="item in delays" :key="item.sessionId" :delay="item" />
-    </div>
-    <AdvancedFilter v-if="advancedFilterVisible" @handleAdvancedFilterClose="handleAdvancedFilterClose" :advancedFilterVisible="advancedFilterVisible" />
-    <audio controls="controls" preload ref="msgTip" style="display: none;">
-      <source src="../img/msgTip.mp3" />
-    </audio>
-    <div v-if="visible">
-      <a-modal title="请选择人员" v-model="visible" :maskClosable="false" :destroyOnClose="true" width="720px" :footer="null" :bodyStyle="{ padding: 0, height: '600px' }">
-        <add-members
-          :visible.sync="visible"
-          :membersType="membersType"
-          :conferenceMemberList="conferenceMemberList"
-          :validTalkingEnv="validTalkingEnv"
-          @updateMemberList="getGroupMembers"
-          @addConferenceMemberList="addConferenceMemberList"
-          @addStaffMemberList="addStaffMemberList"
-        ></add-members>
-      </a-modal>
-    </div>
-    <MultiVideo v-if="multiVideoShow" :addvisible.sync="visible" :validTalkingEnv="validTalkingEnv"></MultiVideo>
-    <template v-if="conferenceVisible">
-      <a-modal :title="conferenceTitle" v-model="conferenceVisible" :maskClosable="false" :destroyOnClose="true" width="720px" @ok="handleConferenceModal" @cancel="closeConferenceModal">
-        <add-conference ref="addConferenceCom" :conferenceMemberList="conferenceMemberList" @addConferenceMember="addMembers" @saveConference="saveConference"></add-conference>
-      </a-modal>
-    </template>
-    <div class="disable-operate" v-if="disableOperate">
-      <a-spin />
-    </div>
-  </div>
-</template>
-
-<script>
-import { Alert, Button, Col, Icon, Input, Layout, Modal, Popover, Row, Spin, Tabs, Tooltip, DatePicker } from 'ant-design-vue';
-import SvgIcon from '@/component/svg/index.vue';
-import ChatSock from '../utils/chatSock';
-import { mapGetters, mapMutations, mapActions } from '../store/helper';
-import fetch, { qs } from '@/utils/chatFetch';
-import baseMix from './mixins/base';
-import ChatFooter from './chatFooter';
-import ChatMain from './chatMain';
-import ScrollList from './scrollList';
-import Video from './video';
-import Audio from './audio';
-import Calling from './calling';
-import Delay from './delay';
-import AdvancedFilter from './advancedFilter';
-import AddMembers from './addMembers';
-import MultiVideo from './multiVideo';
-import VideoVoiceList from './videoVoiceList';
-import addConference from './addConference';
-import ClassifyTabs from '../components/classify-tabs';
-import ChatTabsHeader from '../components/chat-tabs-header';
-import UserStatus from '../components/user-status';
-import { checkTalkingEnv } from '../utils/index';
-import uniRTCAPI from './mixins/uniRTCAPI';
-
-export default {
-  name: 'c-chat-server',
-  mixins: [baseMix, uniRTCAPI],
-  data() {
-    this.stompClient = null;
-    this.videoGroupSubscribe = null;
-    return {
-      styleBtns: Object.freeze([
-        {
-          type: 'LIST',
-          icon: require('../img/icon_list.png'),
-          activeIcon: require('../img/icon_list_active.png')
-        },
-        {
-          type: 'TABLE',
-          icon: require('../img/icon_table.png'),
-          activeIcon: require('../img/icon_table_active.png')
-        }
-      ]),
-      styleType: 'LIST',
-      styleFold: 'N',
-      dateOpenStatus: false,
-      searchDate: [],
-      queueKey: null,
-      status: 'ON-LINE', // 客服状态
-      loading: true,
-      params: {},
-      heartTimer: null,
-      advancedFilterVisible: false,
-      convertShow: false,
-      serviceList: [],
-      converUserId: '',
-      converMark: '',
-      reConnention: 0,
-      rightPanelTabActive: 0,
-      memberName: '',
-      groupMembers: [],
-      visible: false,
-      foldPanel: false,
-      isVideoVoiceList: false,
-      conferenceVisible: false,
-      membersType: '',
-      conferenceMemberList: [],
-      isSaveConference: false,
-      saveConferenceItem: null
-    };
-  },
-  props: {
-    // 隐藏排队状态底部信息
-    hideQueueBtns: {
-      type: Boolean,
-      default: false
-    },
-    // 隐藏高级筛选
-    hideSearch: {
-      type: Boolean,
-      default: false
-    },
-    // 隐藏头部
-    hideHeader: {
-      type: Boolean,
-      default: false
-    },
-    chatURL: {
-      type: String
-    },
-    assembly: {
-      type: String
-    },
-    isServer: {
-      type: Boolean,
-      default: true
-    },
-    // 允许 chatType 类型校验
-    enableTypeValid: {
-      type: Boolean,
-      default: false
-    }
-  },
-  async created() {
-    this.init();
-    this.registerEvent('searchCurrenChatList', ({type = 'change', keyword}) => {
-      this.handleKeywordsChange({ target: { value: keyword } });
-      type == 'pressEnter' && this.handleKeywordsSearch({ target: { value: keyword } });
-    });
-    this.registerEvent('updatePanelTab', this.onlyGroup);
-  },
-  computed: {
-    ...mapGetters([
-      'assemblyId',
-      'sessionId',
-      'classify',
-      'currentTab',
-      'clientId',
-      'serviceId',
-      'keywords',
-      'onChating',
-      'showVideo',
-      'enable',
-      'caller',
-      'callings',
-      'assemblySetting',
-      'statusList',
-      'tabList',
-      'chatMainTitle',
-      'endSessionTitle',
-      'convertButtonTitle',
-      'delays',
-      'panelParams',
-      'clientParams',
-      'sessionEnd',
-      'sessionStatistic',
-      'queueStatistic',
-      'offlineSessionStatistic',
-      'offlineClassifyCount',
-      'voiceAlert',
-      'multiVideoShow',
-      'recordId',
-      'isSessionOwner',
-      'showAudio',
-      'videoRecord',
-      'msgList',
-      'videoData',
-      'scrollQueueId',
-      'lastClassify',
-      'lastCurrentTab',
-      'curScrollItem',
-      'disableOperate',
-      'sdkInfo'
-    ]),
-    isNormalStyle() {
-      return this.styleFold !== 'Y';
-    },
-    enableTableStyle() {
-      const len = this.assemblySetting?.listLayoutSetting?.tableLayout?.length || 0;
-      return len > 0;
-    },
-    defSessionId() {
-      return this.chatParams.sessionId;
-    },
-    isOrgAdmin() {
-      return this.userInfo?.sysParams?.userType === 'orgAdmin';
-    },
-    showSetting() {
-      return this.isOrgAdmin || this.sdkInfo?.vendor == 2;
-    },
-    statusDesc() {
-      return this.statusList.find(item => item.status === this.status)?.title;
-    },
-    showPanel() {
-      return this.assemblySetting.panelSetting?.targetIs;
-    },
-    handleCurrentTab() {
-      let currentTab = this.currentTab;
-      if (this.lastCurrentTab && this.lastCurrentTab != currentTab) {
-        currentTab = this.lastCurrentTab;
-      }
-      return currentTab;
-    },
-    mainSpan() {
-      let currentTab = this.handleCurrentTab;
-      if (
-        !this.showPanel ||
-        (this.isConference && !this.curScrollItem) ||
-        (!this.isConference && !this.clientId) ||
-        this.foldPanel ||
-        (currentTab == 'queue' && !this.isShowPanel) ||
-        (!this.isShowPanel && !this.isShowGroupChat)
-      ) {
-        return 24;
-      }
-      return 24 - (this.assemblySetting.panelSetting?.targetWith || 0);
-    },
-    panelSpan() {
-      let currentTab = this.handleCurrentTab;
-      if (
-        !this.showPanel ||
-        (this.isConference && !this.curScrollItem) ||
-        (!this.isConference && !this.clientId) ||
-        this.foldPanel ||
-        (currentTab == 'queue' && !this.isShowPanel) ||
-        (!this.isShowPanel && !this.isShowGroupChat)
-      ) {
-        return 0;
-      }
-      return this.assemblySetting.panelSetting?.targetWith || 0;
-    },
-    classifyList() {
-      if (this.assemblySetting.isListClassify !== 'Y') {
-        return [];
-      }
-      return this.assemblySetting.listClassify.filter(item => item.enable === undefined || item.enable) || [];
-    },
-    isListClassify() {
-      return this.assemblySetting.isListClassify === 'Y';
-    },
-
-    sessionMember() {
-      let list = this.groupMembers
-        .filter(item => item.isChecked === 'Y' || item.isOwner === 'Y')
-        .filter(item => {
-          return item.userName.includes(this.memberName);
-        });
-      return list;
-    },
-    // 用户头像面板
-    isShowPortraitPanel() {
-      return this.handleShowPanel('PORTRAIT_PANEL');
-    },
-    // 用户信息面板
-    isShowPanel() {
-      return this.handleShowPanel('PANEL');
-    },
-    // 群组
-    isShowGroupChat() {
-      let currentTab = this.handleCurrentTab;
-      return this.handleShowPanel('GROUP_CHAT') && currentTab != 'queue';
-    },
-    isSupportGroup() {
-      // return this.assemblySetting.isSupportGroup === "Y";
-      return this.isShowPanel && this.isShowGroupChat;
-    },
-    isConference() {
-      return ['conference', 'staff'].includes(this.assemblySetting?.type);
-    },
-    isStaff() {
-      return this.assemblySetting?.type === 'staff';
-    },
-    showAddMembers() {
-      if (this.isConference) {
-        return (this.isSessionOwner || this.curScrollItem.allowAdd == 1) && this.handleCurrentTab != 'end';
-      }
-      return this.isSessionOwner && this.handleCurrentTab != 'end';
-    },
-    conferenceTitle() {
-      if (this.isStaff) {
-        return '发起群聊';
-      }
-      let str = '发起';
-      let { serverInfo } = this.assemblySetting?.serverSetting || {};
-      if (!serverInfo) return `${str}会议`;
-      let matchItem = serverInfo.find(item => item.key === 'conferenceTitle');
-      return str + (matchItem?.value || '会议');
-    }
-  },
-  methods: {
-    ...mapMutations([
-      'setMsgRecordCache',
-      'setAssemblyId',
-      'setClassify',
-      'setMessage',
-      'setIsAppendMsg',
-      'setListChangeItem',
-      'setIsScrollListChange',
-      'setCurrentTab',
-      'setServiceId',
-      'setKeywords',
-      'setSearchKeywords',
-      'setOnChating',
-      'setSessionId',
-      'setMsgList',
-      'setEnable',
-      'setShowVideo',
-      'setCaller',
-      'setRoomId',
-      'setUserSig',
-      'setVideoId',
-      'setCallings',
-      'setAssemblySetting',
-      'setDelays',
-      'setIsServer',
-      'setSessionEnd',
-      'setSessionStatistic',
-      'setQueueStatistic',
-      'setOfflineSessionStatistic',
-      'setClientId',
-      'setSdkInfo',
-      'appendList',
-      'setVideoListChange',
-      'setVideoData',
-      'setAddMemberType',
-      'setRecordId',
-      'setCurrentSip',
-      'setMultiVideoShow',
-      'setIsSessionOwner',
-      'setVideoStatus',
-      'setVideoMode',
-      'setShowAudio',
-      'setGroupMembers',
-      'setVideoMembers',
-      'setMuteAudio',
-      'setVideoRecord',
-      'setVoiceAlert',
-      'setLastCurrentTab',
-      'setQueueItem',
-      'setCurScrollItem',
-      'setSessionType',
-    ]),
-    ...mapActions(['setChatTimer', 'getVideoHistoryList', 'initUniRTC']),
-    ...mapActions({
-      getMsgList: 'setMsgList'
-    }),
-    handleDateOpenChange(v) {
-      this.dateOpenStatus = v;
-    },
-    handleSearchDateChange(v) {
-      if (this.currentTab !== 'end' && v.length) {
-        const queryTimeSetting = this.assemblySetting?.queryTimeSetting || [];
-        const time = queryTimeSetting.find(item => item.isChecked === 'Y');
-        const num = time?.num || 0;
-        if (num) {
-          const diff = v[1]
-            .clone()
-            .set({ second: 0, minute: 0, hour: 0 })
-            .diff(v[0].clone().set({ second: 0, minute: 0, hour: 0 }), 'day');
-          if (diff >= num) {
-            this.$message.warning(`时间跨度不能超过${time.title}`);
-            return;
-          }
-        }
-      }
-      this.searchDate = Object.freeze(v);
-      this.dateOpenStatus = false;
-    },
-    clearSearchDate() {
-      this.searchDate = [];
-      this.dateOpenStatus = false;
-    },
-    handleOfflineClassifyCount(classify) {
-      if (!classify) return 0;
-      let res = this.offlineClassifyCount[classify];
-      return res || 0;
-    },
-    async init() {
-      // 校验组件类型
-      if (this.enableTypeValid) {
-        let isChat = this.isChatValidate();
-        if (isChat) return;
-      }
-      this.setIsServer(true);
-      this.setAssemblyId(this.assembly || this.routeQuery.assemblyId);
-      try {
-        // 如果有默认会话id 则查询该会话状态
-        if (this.defSessionId) {
-          await this.getSessionStatus();
-        }
-      } catch (err) {
-        console.log(err);
-      }
-      await this.handleServiceAccess();
-      this.enable && this.initWebSocket();
-      await this.getListStatistic();
-      await this.getSdkAppId();
-      await this.getVideoRecord();
-    },
-    isChatValidate() {
-      let chatType = this.chatType;
-      if (!['serverlet', 'client'].includes(chatType)) {
-        return true;
-      }
-      return false;
-    },
-    onlyGroup() {
-      if (this.currentTab == 'queue' && this.isShowPanel) {
-        this.rightPanelTabActive = 0;
-        return;
-      }
-      if (!this.isShowPanel && this.isShowGroupChat) {
-        this.rightPanelTabActive = 1;
-      } else if (this.isShowGroupChat) {
-        this.rightPanelTabActive = this.$slots.userPanel ? 0 : 1; // 无面板插槽显示群组人员
-      } else {
-        this.rightPanelTabActive = 0;
-      }
-    },
-    handleShowPanel(key) {
-      let { listClassify = [], isListClassify, serverSetting = {} } = this.assemblySetting;
-      let list = [];
-      let classify = this.classify;
-      if (this.lastClassify && this.lastClassify != this.classify) {
-        classify = this.lastClassify;
-      }
-      if (isListClassify != 'Y') {
-        let { functionSetting = [] } = serverSetting;
-        list = functionSetting;
-      } else {
-        let curList = listClassify.find(item => item.classify == classify);
-        if (!curList) return false;
-        list = curList.serverFunctionSetting || [];
-      }
-      if (!list.length) return true;
-      let curItem = list.find(item => item.function == key);
-      if (!curItem) return true;
-      return curItem.isChecked == 'Y';
-    },
-    // 根据 sessionId 查询 tab classify
-    getSessionStatus() {
-      let sessionId = this.defSessionId;
-      if (!sessionId) return;
-      return fetch
-        .get('/chat/service/getSessionStatus', {
-          params: {
-            sessionId,
-            assemblyId: this.assemblyId
-          }
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            // status 0 已结束 1 已接入
-            let { status, classify } = data?.map || {};
-            if (status === undefined) return;
-            this._chatSessionStatus = status; // 标识会话状态
-            status == 1 ? this.setCurrentTab('session') : this.setCurrentTab('end');
-            classify && this.setClassify(classify);
-          }
-        });
-    },
-    /* 客服端接入聊天 */
-    handleServiceAccess() {
-      return fetch
-        .post(
-          '/chat/service/access',
-          qs.stringify({
-            assemblyId: this.assemblyId
-          })
-        )
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            let { isService = true, queueId, username, assembly, status } = data.map;
-            const behaviour = assembly.settingObj?.behaviour || {};
-            this.setAssemblySetting(assembly.settingObj);
-            this.styleType = (this.enableTableStyle && behaviour.style) || this.styleBtns[0].type;
-            this.styleFold = behaviour.fold || 'N';
-            if (isService) {
-              this.queueKey = queueId;
-              this.setServiceId(username);
-              if (this.assemblySetting.isListClassify === 'Y') {
-                if (this.defSessionId && this._chatSessionStatus != -1) {
-                  if (!this.classify) {
-                    this.setClassify(this.classifyList[0]?.classify);
-                  }
-                } else {
-                  this.setClassify(this.classifyList[0]?.classify);
-                }
-              }
-            }
-            this.setEnable(isService);
-            this.loading = false;
-            this.status = status;
-            clearInterval(this.heartTimer);
-            this.heartTimer = setInterval(() => {
-              fetch.post(
-                '/chat/service/sessionHeart',
-                qs.stringify({
-                  assemblyId: this.assemblyId
-                })
-              );
-            }, 10000);
-          } else {
-            this.$message.warning(data.resultMsg);
-          }
-        });
-    },
-
-    /** 初始化Socket连接 */
-    initWebSocket() {
-      const heartFn = () => {
-        try {
-          this.stompClient.send('test');
-        } catch (err) {
-          this.stompClient.disconnect();
-          this.initWebSocket();
-        }
-      };
-      const options = {
-        headers: { username: this.serviceId },
-        heartbeatFn: heartFn,
-        connectCb: () => {
-          if (this.reConnention > 0) {
-            this.setMsgList([]);
-            this.getMsgList();
-            this.reConnention = 0;
-          }
-          this.subscribeMessage();
-          this.subscribeQueue();
-          this.subscribeSession();
-          this.subscribeVideoInvite();
-          this.subscribeVideoConfirm();
-          this.subscribeVideoClose();
-          this.subscribeDelay();
-          this.subscribeSessionClose();
-          this.subscribeRecallMessage();
-          this.subscribeUpdateCountdown();
-          this.subscribeQueueStatistic();
-          this.subscribeSessionStatistic();
-          this.subscribeVideoRecord();
-          this.subscribeOfflineSessionStatistic();
-          this.subscribeMessageRecord();
-        },
-        errorCb: (_err, count) => {
-          this.reConnention = count;
-          this.$message.warning(`断线了,正在重连...`);
-        }
-      };
-      this.stompClient = new ChatSock(`${this.chatURL}/stomp`, options);
-    },
-
-    subscribeGroupVideo(recordId) {
-      this.videoGroupSubscribe = this.stompClient.subscribe(`/topic/videoGroupChat/updateStatus/${recordId}`, response => {
-        this.setVideoListChange(JSON.parse(response.body));
-      });
-    },
-
-    /* 订阅排队列表人数及未读消息数 */
-    subscribeQueueStatistic() {
-      this.stompClient.subscribe(`/topic/queueStatistic/${this.queueKey}`, response => {
-        this.setQueueStatistic(JSON.parse(response.body));
-      });
-    },
-
-    /* 订阅会话列表人数及未读消息数 */
-    subscribeSessionStatistic() {
-      this.stompClient.subscribe(`/user/` + this.serviceId + `/onlineSessionStatistic`, response => {
-        this.setSessionStatistic(JSON.parse(response.body));
-      });
-    },
-    /* 订阅已结束会话列表人数及未读消息数 */
-    subscribeOfflineSessionStatistic() {
-      this.stompClient.subscribe('/user/' + this.serviceId + '/offlineSessionStatistic', response => {
-        this.setOfflineSessionStatistic(JSON.parse(response.body));
-      });
-    },
-    // 订阅消息已读回执
-    subscribeMessageRecord() {
-      this.stompClient.subscribe('/user/' + this.serviceId + '/msgReadStatus', response => {
-        if (!this.sessionId) return;
-        let body = JSON.parse(response.body);
-        if (body?.sessionId !== this.sessionId) return;
-        const readStatus = body?.readStatus || {};
-        const keys = Object.keys(readStatus);
-        if (keys.length < 1) return;
-        const idxs = {};
-        let hasSending = false;
-        const msgList = this.msgList;
-        msgList.forEach((item, i) => {
-          const id = item?.id;
-          if (id) {
-            idxs[id] = i;
-          } else if (item.sending) {
-            hasSending = true; // 存在正在发送的消息
-          }
-        });
-        let notFound = {};
-        keys.forEach(id => {
-          const i = idxs[id];
-          if (typeof i === 'number') {
-            const item = msgList[i];
-            msgList.splice(i, 1, {
-              ...item,
-              readStatus: readStatus[id]
-            });
-          } else {
-            notFound[id] = readStatus[id];
-          }
-        });
-        this.setMsgRecordCache(hasSending ? Object.freeze(notFound) : {});
-      });
-    },
-
-    /* 订阅消息 */
-    subscribeMessage() {
-      this.stompClient.subscribe('/user/' + this.serviceId + '/message', response => {
-        let res = JSON.parse(response.body);
-        let { from, body, fromName, id, to, sessionId, portrait, readStatus } = res;
-        if (this.voiceAlert) {
-          this.$refs.msgTip.play();
-        }
-        // 外部链接发送消息
-        if (from === this.serviceId && this.clientId === to) {
-          this.setIsAppendMsg(true);
-          let message = {
-            readStatus,
-            content: body,
-            fromId: from,
-            fromName,
-            sessionId: this.sessionId,
-            id,
-            portrait
-          };
-          this.setMessage(message);
-          this.appendList([message]);
-        }
-
-        if (this.sessionId !== sessionId || !this.onChating) {
-          return;
-        }
-        this.setIsAppendMsg(true);
-        let message = {
-          senderFlag: from === this.serviceId ? 2 : 1,
-          readStatus,
-          content: body,
-          fromId: from,
-          fromName,
-          sessionId: this.sessionId,
-          id,
-          portrait
-        };
-        this.setMessage(message);
-        this.appendList([message]);
-      });
-    },
-    /* 订阅消息撤回 */
-    subscribeRecallMessage() {
-      this.stompClient.subscribe('/user/' + this.serviceId + '/recallMessage', response => {
-        let res = JSON.parse(response.body);
-        let { id } = res;
-        // 客服撤回
-        let msgList = this.msgList;
-        let msg = msgList.find(msg => msg.id == id);
-        if (msg) {
-          this.$set(msg, 'recallFlag', 1);
-          msg.recallFlag = 1;
-          this.setMsgList(msgList);
-        }
-      });
-    },
-
-    /* 订阅排队列表变化 */
-    subscribeQueue() {
-      this.stompClient.subscribe(`/topic/clientQueue/${this.queueKey}`, response => {
-        if (this.voiceAlert) {
-          this.$refs.msgTip.play();
-        }
-        if (this.currentTab !== 'queue') {
-          return;
-        }
-        this.setIsScrollListChange(true);
-        this.setListChangeItem(JSON.parse(response.body));
-      });
-    },
-
-    /* 订阅会话列表变化 */
-    subscribeSession() {
-      this.stompClient.subscribe('/user/' + this.serviceId + '/sessionList', response => {
-        if (this.currentTab === 'queue') {
-          return;
-        }
-        let body = JSON.parse(response.body);
-        this.$nextTick(() => {
-          this.setIsScrollListChange(true);
-          this.setListChangeItem(body);
-          if (this.isStaff) {
-            let refDom = this.$refs['scrollList-session'][0];
-            refDom?.scrollToItem(body.sessionId);
-          }
-        });
-        this.saveConferenceItem = body;
-        if (this.isSaveConference) {
-          this.setCurScrollItem(this.saveConferenceItem);
-          this.isSaveConference = false;
-          this.saveConferenceItem = null;
-        }
-      });
-    },
-
-    /* 订阅视频邀请 */
-    subscribeVideoInvite() {
-      this.stompClient.subscribe(`/user/${this.serviceId}/videoChat/invite/notice`, response => {
-        let res = JSON.parse(response.body);
-        let { sessionId, type, mode, inviteResult } = res;
-        if (inviteResult == 0) {
-          this.setVideoMembers([]);
-        }
-        this.setVideoData(res);
-        if (this.sessionId == sessionId) {
-          if (type == 2) {
-            this.setMultiVideoShow(true);
-            this.setVideoStatus(1);
-            this.setVideoData(res);
-            this.setVideoMode(mode);
-          } else {
-            this.setShowAudio(true);
-            this.setVideoData(res);
-            this.setVideoMode(mode);
-          }
-        } else {
-          const roomId = res.roomId;
-          const callings = this.callings.filter(item => item.roomId !== roomId);
-          this.setCallings([res, ...callings]);
-        }
-      });
-    },
-
-    /* 订阅视频确认接入 */
-    subscribeVideoConfirm() {
-      this.stompClient.subscribe(`/user/${this.serviceId}/videoChat/inviteEnter/notice`, response => {
-        let res = JSON.parse(response.body);
-        this.setMultiVideoShow(false);
-        let { inviteResult, callee, sessionId, isCaller, mode, recordId, type } = res;
-        let realIndex = this.callings.findIndex(item => item.sessionId === sessionId);
-        if (realIndex !== -1) {
-          this.callings.splice(realIndex, 1);
-        }
-        if (isCaller === 0) {
-          return;
-        }
-        if (inviteResult === 0) {
-          if (callee !== this.serviceId) {
-            this.$message.warning(`${this.i18nText('1.9.329')}!`);
-            this.setShowVideo(false);
-            this.setShowAudio(false);
-            this.setVideoData({});
-            this.setVideoMembers([]);
-          }
-          return;
-        }
-        if (type == 1) {
-          if (mode == 2) {
-            this.setShowVideo(true);
-            this.setShowAudio(false);
-          } else {
-            this.setShowVideo(false);
-            this.setShowAudio(true);
-          }
-        }
-        this.setVideoData(res);
-        this.$nextTick(() => {
-          this.setRecordId(recordId);
-        });
-        // this.setShowVideo(true);
-        // this.setCaller(caller);
-        // this.setRoomId(roomId);
-        // this.setUserSig(userSig);
-        // this.$nextTick().then(() => {
-        //   this.setVideoId(videoId);
-        // });
-      });
-    },
-    /**
-     * 视频通话记录变更
-     */
-    subscribeVideoRecord() {
-      this.stompClient.subscribe(`/user/${this.serviceId}/videoChat/userRecord`, response => {
-        let res = JSON.parse(response.body);
-        let { opt, caller } = res;
-        if (opt == 0) {
-          if (caller.status == 1) {
-            this.setVideoRecord([res].concat(this.videoRecord));
-          } else {
-            this.videoRecord.splice(1, 0, res);
-          }
-        } else {
-          let restList = this.videoRecord.filter(item => item.id != res.id);
-          this.setVideoRecord(restList);
-          this.getVideoHistoryList();
-        }
-      });
-    },
-
-    /* 订阅视频挂断 */
-    subscribeVideoClose() {
-      this.stompClient.subscribe(`/user/${this.serviceId}/videoChat/hangUp/notice`, () => {
-        this.$message.success('通话结束!');
-        this.setShowVideo(false);
-        this.setRoomId(null);
-        this.setRecordId('');
-        this.setMultiVideoShow(false);
-        this.setVideoData({});
-        this.setMuteAudio(false);
-      });
-    },
-
-    /* 订阅延时提醒 */
-    subscribeDelay() {
-      this.stompClient.subscribe(`/user/${this.serviceId}/countdownNotice`, response => {
-        let res = JSON.parse(response.body);
-        let realIndex = this.delays.findIndex(item => item.sessionId === res.sessionId);
-        if (realIndex === -1 && res.countdown > 0) {
-          this.setDelays([res, ...this.delays]);
-        }
-      });
-    },
-
-    /* 订阅延时后的会话时长 */
-    subscribeUpdateCountdown() {
-      this.stompClient.subscribe(`/user/${this.serviceId}/updateCountdown`, response => {
-        let res = JSON.parse(response.body);
-        let { countdown, sessionId, countdownDesc } = res;
-        this.removeDelay(sessionId);
-        if (sessionId === this.sessionId) {
-          this.setChatTimer({ countdown, countdownDesc });
-        }
-      });
-    },
-
-    /* 订阅客服关闭会话 */
-    subscribeSessionClose() {
-      this.stompClient.subscribe(`/user/${this.serviceId}/closeSession`, response => {
-        let res = JSON.parse(response.body);
-        let { sessionId } = res;
-        if (sessionId !== this.sessionId) return;
-        this.$message.success(this.i18nText('1.9.330'));
-        this.removeDelay(sessionId);
-        this.setOnChating(false);
-        this.setSessionId(null);
-        this.setMsgList();
-        this.setChatTimer();
-        this.setSessionEnd(true);
-        this.setClientId(null);
-        this.setCurScrollItem();
-      });
-    },
-
-    handleTabChange(key) {
-      this.setCurrentTab(key);
-      this.getVideoRecord();
-    },
-
-    handleSetting() {
-      if (this.showVideo || this.showAudio || this.multiVideoShow) {
-        this.$message.warning('本机正在音视频中，请结束后再设置');
-        return;
-      }
-      this.dispatchEvent('open_chatSetting', {
-        assemblyId: this.assemblyId
-      });
-    },
-    toggleVoiceAlert() {
-      this.setVoiceAlert(!this.voiceAlert);
-    },
-    toggleVideoVoiceList() {
-      this.isVideoVoiceList = !this.isVideoVoiceList;
-    },
-    closeVideoList(val) {
-      this.isVideoVoiceList = val;
-    },
-    handleKeywordsChange(e) {
-      this.setKeywords(e.target.value);
-    },
-    handleKeywordsSearch(value) {
-      if (this.currentTab != 'end') return;
-      this.setSearchKeywords(value.target.value);
-    },
-    handleMemberNameChange(e) {
-      this.memberName = e.target.value;
-    },
-    getImg(name) {
-      try {
-        return require(`../img/${name}.png`);
-      } catch {
-        return '';
-      }
-    },
-    /**
-     * 剔除延时提醒
-     */
-    removeDelay(sessionId) {
-      let delays = this.delays.filter(item => item.sessionId !== sessionId);
-      this.setDelays(delays);
-    },
-    handleMove(e) {
-      let currentTarget = e.currentTarget;
-      let disX = e.clientX - currentTarget.offsetLeft;
-      let disY = e.clientY - currentTarget.offsetTop;
-      document.onmousemove = e => {
-        let left = e.clientX - disX;
-        let top = e.clientY - disY;
-        this.positionX = top;
-        this.positionY = left;
-        currentTarget.style.left = left + 'px';
-        currentTarget.style.right = 'auto';
-        currentTarget.style.top = top + 'px';
-      };
-      document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-      };
-    },
-    handleClassifyClick(classify) {
-      this.setClassify(classify);
-    },
-    handleAdvancedFilterClose() {
-      this.advancedFilterVisible = false;
-    },
-    isShow(type) {
-      if (this.isListClassify) {
-        let label;
-        if (this.isServer) {
-          label = 'serverFunctionSetting';
-        } else {
-          label = 'clientFunctionSetting';
-        }
-        let classify = '';
-        if (!this.lastClassify) {
-          classify = this.classify;
-        } else {
-          if (this.lastClassify != this.classify) {
-            classify = this.lastClassify;
-          }
-        }
-        let funs = this.assemblySetting.listClassify.filter(item => item.classify === classify)[0][label];
-        return funs.find(item => item.function === type)?.isChecked === 'Y';
-      }
-      let label;
-      if (this.isServer) {
-        label = 'serverSetting';
-      } else {
-        label = 'clientSetting';
-      }
-      let funs = this.assemblySetting[label]?.functionSetting || [];
-      return funs.find(item => item.function === type)?.isChecked === 'Y';
-    },
-    getListStatistic() {
-      fetch
-        .get('/chat/service/getListStatistic', {
-          params: {
-            assemblyId: this.assemblyId
-          }
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            let { sessionStatistic, queueStatistic, offlineSessionStatistic } = data.map;
-            this.setSessionStatistic(sessionStatistic);
-            this.setQueueStatistic(queueStatistic);
-            this.setOfflineSessionStatistic(offlineSessionStatistic);
-            console.log(this.$data.queueStatistic, '....');
-          }
-        });
-    },
-    // 获取视频sdk
-    getSdkAppId() {
-      fetch
-        .get('/chat/access/getMediaAuth', {
-          params: {
-            orgId: this.userInfo?.sysParams?.orgId
-          }
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            const { sdkAppId, host, vendor } = data.obj;
-            this.setSdkInfo({ sdkAppId, host, vendor });
-            // 江苏省
-            if (vendor == 3) {
-              this.initUniRTC({
-                ...data.obj,
-                params: {
-                  assemblyId: this.assemblyId,
-                }
-              });
-            }
-          }
-        });
-    },
-    validTalkingEnv() {
-      return checkTalkingEnv(this.assemblyId, this.sdkInfo).then(res => {
-        if (!res.status) {
-          this.$message.error(res.message);
-        }
-        return res;
-      });
-    },
-    // 获取群组人员
-    getGroupMembers() {
-      this.onlyGroup();
-      fetch
-        .get('/chat/service/getSessionMember', {
-          params: {
-            assemblyId: this.assemblyId,
-            sessionId: this.sessionId,
-            isExist: 'Y'
-          }
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            let item = data.list.find(item => item.isOwner === 'Y');
-            if (item.userId == this.userInfo?.sysParams?.userId) {
-              this.setIsSessionOwner(true);
-            } else {
-              this.setIsSessionOwner(false);
-            }
-            let index = data.list.findIndex(item => item.isOwner === 'Y');
-            data.list.splice(index, 1);
-            const arr = item ? [item] : [];
-            this.groupMembers = arr.concat(data.list);
-            this.setGroupMembers(this.groupMembers);
-          }
-        });
-    },
-    handleMemberRemoveConfirm(item) {
-      this.$confirm({
-        title: `是否移除${item.userName}?`,
-        okText: '确定',
-        cancelText: '取消',
-        onOk: () => {
-          this.handleMemberRemove(item.userId);
-        },
-        onCancel() {}
-      });
-    },
-    handleMemberRemove(userId) {
-      let index = this.groupMembers.findIndex(item => item.userId === userId);
-      this.groupMembers.splice(index, 1);
-      let params = {
-        assemblyId: this.assemblyId,
-        sessionId: this.sessionId,
-        memberIds: `${userId}`
-      };
-      fetch.post(`/chat/service/removeSessionMember`, qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          let { sessionType } = data.map || {};
-          sessionType && this.setSessionType(sessionType);
-          this.$message.success('删除成功!');
-        }
-      });
-    },
-    getVideoRecord() {
-      fetch
-        .get('/chat/service/getVideoRecordList', {
-          params: {
-            assemblyId: this.assemblyId
-          }
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            this.setVideoRecord(data.list);
-          }
-        });
-    },
-    async handleVideoEnter(videoRecord) {
-      if (this.showVideo || this.showAudio || this.multiVideoShow) {
-        if (this.videoData.recordId && videoRecord.id === this.videoData.recordId) {
-          return;
-        } else {
-          return this.$message.warning('你当前有正在进行的通话，请退出当前通话后重试。');
-        }
-      }
-      const valid = await this.validTalkingEnv();
-      if (!valid.status) {
-        return;
-      }
-      const sip = valid.sip;
-      let { isCaller, type, callee, roomId, caller, mode, sessionId, id } = videoRecord;
-      // 单人 未接入情况 audio
-      // 多人进入房间 multiVideo 页面
-      // isCaller=1 时表示为呼叫者,则需要进入视频
-      // type 1:单聊 2:群聊
-      // status 1:待接听 2:未接听 3:已接
-      // mode 1:语音 2:视频
-      if (isCaller == 1 && type == 1 && callee.status == 1) {
-        let { name: callerName, portrait: callerPortrait, expireTime } = caller;
-        let { name: calleeName, portrait: calleePortrait } = callee;
-        this.videoInvited = {
-          roomId,
-          callerName,
-          callerPortrait,
-          calleerSipKey: sip?.username,
-          calleerSipName: sip?.name,
-          calleeName,
-          calleePortrait,
-          calleeSipKey: callee.sipKey,
-          calleeSipName: callee.sipName,
-          mode,
-          type,
-          sessionId,
-          expireTime,
-          recordId: id,
-          isCaller
-        };
-        type == 1 ? this.setShowAudio(true) : this.setMultiVideoShow(true);
-        this.setVideoData(this.videoInvited);
-        return;
-      }
-      // 单人 接入 video/audio
-      // 多人 multiVideo 页面
-      let params = {
-        assemblyId: this.assemblyId,
-        orgId: this.userInfo?.sysParams?.orgId,
-        userId: this.userInfo?.sysParams?.userId,
-        sessionId: videoRecord.sessionId,
-        recordId: videoRecord.id,
-        inviteResult: '1'
-      };
-      if (sip) {
-        params.sipKey = sip.username;
-        params.sipName = sip.name;
-      }
-      fetch
-        .post('/chat/access/videoInviteEnter', qs.stringify(params))
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            let res = data.obj || data.map;
-            if (!res) {
-              this.$message.warning(data.resultMsg);
-              return;
-            }
-            // 江苏省接听
-            console.log('江苏省接听->videoInviteEnter', this.incoming);
-            this.uniRTC && this.acceptCall();
-            let { recordId, mode, type } = res;
-            this.delCalling(id);
-            if (type == 1) {
-              mode == 1 ? this.setShowAudio(true) : this.setShowVideo(true);
-              this.setVideoData(res);
-              this.$nextTick(() => {
-                this.setRecordId(recordId);
-              });
-            } else {
-              this.setCurrentSip(sip ? Object.freeze(sip) : null);
-              this.setMultiVideoShow(true);
-              this.setVideoStatus(2);
-              this.setVideoData(res);
-              this.setVideoMode(mode);
-              this.$nextTick(() => {
-                this.setRecordId(recordId);
-              });
-              return;
-            }
-          } else {
-            this.$message.warning(data.resultMsg);
-          }
-        })
-        .catch(err => {
-          this.$message.warning(err?.resultMsg || '无法加入通话');
-        });
-    },
-    delCalling(curId) {
-      let callings = this.callings;
-      if (!callings.length) return;
-      let curIndex = callings.findIndex(v => v.recordId == curId);
-      if (curIndex > -1) {
-        callings.splice(curIndex, 1);
-      }
-    },
-    addConference(isAddConference) {
-      if (this.assemblySetting?.type === 'conference' || isAddConference === true) {
-        this.conferenceVisible = true;
-      } else if (this.isStaff) {
-        this.addMembers('staff');
-      }
-    },
-    handleConferenceModal() {
-      this.$refs.addConferenceCom?.addConferenceForm();
-    },
-    addMembers(type) {
-      this.visible = true;
-      this.membersType = type;
-      this.setAddMemberType(1);
-    },
-    saveConference(obj) {
-      let { classify, sessionId, opt } = obj || {};
-
-      if (!sessionId) return;
-      // this.setClientParams()
-      // opt: 0:新增 1:更新(pc需要根据sessionId从会话列表中找到数据并选中)
-      if (opt == 1 && this.isStaff) {
-        let scrollListName = 'scrollList-session';
-        let refDom = this.$refs[scrollListName][0];
-        const processedScrollList = refDom?.processedScrollList || [];
-        if (processedScrollList.length) {
-          let matchItem = processedScrollList.find(v => v.id == sessionId || v.sessionId == sessionId);
-          matchItem && this.setCurScrollItem(matchItem);
-          refDom?.getMsgList(matchItem);
-          refDom?.scrollToItem(sessionId);
-        }
-      }
-      classify && this.setClassify(classify);
-      this.isSaveConference = true;
-      this.closeConferenceModal();
-      this.setSessionId(sessionId);
-      this.$nextTick(() => {
-        this.setMsgList();
-        this.getMsgList();
-        this.setCurrentTab('session');
-        this.setLastCurrentTab('session');
-        this.setOnChating(true);
-        this.setSessionEnd(false);
-        this.setQueueItem(null);
-      });
-    },
-    addConferenceMemberList(val) {
-      this.conferenceMemberList = val;
-      this.visible = false;
-      if (!this.isStaff) {
-        this.membersType = '';
-        return;
-      }
-      if (!val || !val.length) {
-        this.membersType = '';
-        return;
-      }
-      // 添加的有多人时，进入发起群聊弹框。
-      if (val.length > 1 || this.membersType == 'conference') {
-        this.addConference(true);
-        this.membersType = '';
-        return;
-      }
-      this.membersType = '';
-      // 添加的只有一个人时，创建单人会话，确定后直接进入对话页面
-      // 已经创建了和他的对话时，直接进入。
-      let listClassify = this.assemblySetting?.listClassify || [];
-      let params = {
-        allowAdd: 1,
-        classify: this.classify || (listClassify && listClassify[0]?.classify),
-        memberList: val,
-        title: ''
-      };
-      this.createConferenceSession(params);
-    },
-    addStaffMemberList(val) {
-      let { userId } = this.userInfo || {};
-      let sessionMember =
-        this.sessionMember
-          .map(item => {
-            if (item.userId != userId) {
-              return {
-                userId: item.userId,
-                userName: item.userName
-              };
-            }
-            return null;
-          })
-          .filter(Boolean) || [];
-      let newVal = val.concat(sessionMember);
-      this.visible = false;
-
-      this.conferenceMemberList = newVal;
-      this.membersType = 'staff';
-      this.conferenceVisible = true;
-    },
-    toggleStyleFold() {
-      this.styleFold = this.isNormalStyle ? 'Y' : 'N';
-      this.saveStyleBehaviour();
-    },
-    toggleStyleType(type) {
-      if (type === this.styleType) return;
-      this.styleType = type;
-      this.saveStyleBehaviour();
-    },
-    saveStyleBehaviour() {
-      fetch.post(
-        `/chat/event/saveBehaviour`,
-        qs.stringify({
-          assemblyId: this.assemblyId,
-          fold: this.styleFold,
-          style: this.styleType
-        })
-      );
-    },
-    createConferenceSession(params) {
-      let url = '/chat/service/createConferenceSession';
-      Object.assign(params, {
-        assemblyId: this.assemblyId,
-        orgId: this.userInfo?.sysParams?.orgId
-      });
-      fetch({
-        method: 'POST',
-        url,
-        headers: { 'Content-Type': 'application/json; charset=utf-8' },
-        data: { ...params }
-      }).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          this.saveConference(data.obj);
-        } else {
-          this.$message.error(data.resultMsg || '保存失败');
-        }
-      });
-    },
-    closeConferenceModal() {
-      this.membersType = '';
-      this.conferenceVisible = false;
-      this.conferenceMemberList = [];
-      this.$refs.addConferenceCom?.resetParams();
-    }
-  },
-  components: {
-    AModal: Modal,
-    [Popover.name]: Popover,
-    [Spin.name]: Spin,
-    [Layout.name]: Layout,
-    [Layout.Sider.name]: Layout.Sider,
-    [Icon.name]: Icon,
-    [Button.name]: Button,
-    [Tabs.name]: Tabs,
-    [Tabs.TabPane.name]: Tabs.TabPane,
-    [Tooltip.name]: Tooltip,
-    [Row.name]: Row,
-    [Col.name]: Col,
-    [Alert.name]: Alert,
-    [Input.name]: Input,
-    [DatePicker.RangePicker.name]: DatePicker.RangePicker,
-    SvgIcon,
-    ChatFooter,
-    ChatMain,
-    ScrollList,
-    Video,
-    Calling,
-    Delay,
-    AdvancedFilter,
-    AddMembers,
-    MultiVideo,
-    Audio,
-    VideoVoiceList,
-    addConference,
-    ChatTabsHeader,
-    ClassifyTabs,
-    UserStatus
-  },
-  beforeDestroy() {
-    if (this.stompClient) {
-      this.stompClient.disconnect();
-    }
-    if (this.heartTimer) {
-      clearInterval(this.heartTimer);
-    }
-    this.$refs.delays?.removeEventListener('mousedown', this.handleMove);
-  },
-  watch: {
-    'delays.length': {
-      immediate: true,
-      handler(val, oldVal) {
-        if (oldVal > 0) return;
-        this.$nextTick().then(() => {
-          this.$refs.delays?.addEventListener('mousedown', this.handleMove);
-        });
-      }
-    },
-    sessionId: {
-      handler(sessionId) {
-        if (sessionId) {
-          if (this.heartTimer) {
-            clearInterval(this.heartTimer);
-          }
-
-          this.heartTimer = setInterval(() => {
-            fetch.post(
-              '/chat/service/sessionHeart',
-              qs.stringify({
-                assemblyId: this.assemblyId,
-                sessionId: this.sessionId
-              })
-            );
-          }, 10000);
-          this.getGroupMembers();
-          if (this.isConference) {
-            this.onlyGroup();
-          }
-          if (this.isSaveConference) {
-            this.saveConferenceItem && this.setCurScrollItem(this.saveConferenceItem);
-            this.isSaveConference = false;
-            this.saveConferenceItem = null;
-          }
-        } else {
-          this.setIsSessionOwner(false);
-        }
-      }
-    },
-    recordId: {
-      handler(val, old) {
-        if (old) {
-          this.videoGroupSubscribe.unsubscribe();
-        }
-        if (val) {
-          this.subscribeGroupVideo(val);
-        }
-      }
-    },
-    scrollQueueId: {
-      immediate: true,
-      handler(val) {
-        if (val) {
-          this.onlyGroup();
-        }
-      }
-    },
-    assemblySetting: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (!val || !Object.keys(val).length) return;
-        let { type } = val;
-        if (!type) return;
-        if (['conference', 'staff'].includes(type) && this.currentTab != 'end') {
-          this.setCurrentTab('session');
-        }
-      }
-    },
-    clientParams(v) {
-      this.dispatchEvent('change_clientParams', {
-        showPanel: this.isShowPanel,
-        assemblySetting: this.assemblySetting,
-        panelParams: this.panelParams,
-        value: JSON.parse(JSON.stringify(v))
-      });
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.online-chat {
-  position: relative;
-  height: 100%;
-
-  /deep/ .ant-layout {
-    height: 100%;
-  }
-  /deep/ .ant-layout-footer {
-    color: rgb(0, 0, 0);
-  }
-  /deep/ .ant-layout-sider-children {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  &.chat-style-fold {
-    .message-tabs /deep/ .ant-tabs-bar {
-      display: none;
-    }
-    .add-icon {
-      padding-top: 12px;
-      font-size: 18px;
-    }
-    /deep/ .message-tabs .ant-tabs-top-content.ant-tabs-content-animated {
-      height: 100%;
-    }
-    .chat-style-set {
-      justify-content: center;
-      padding-bottom: 8px;
-    }
-    .chat-style-btns {
-      display: none;
-    }
-    .videoHistory-list.show-list {
-      height: 100%;
-    }
-  }
-}
-.online-chat .message-tabs {
-  overflow-x: unset;
-  /deep/ .ant-tabs-nav-container,
-  /deep/ .ant-tabs-nav-wrap,
-  /deep/ .ant-tabs-nav-scroll {
-    overflow: unset;
-  }
-  /deep/ .ant-tabs-top-content.ant-tabs-content-animated {
-    height: calc(100% - 75px);
-  }
-  /deep/ .ant-tabs-top-content > .ant-tabs-tabpane {
-    display: flex;
-    flex-direction: column;
-  }
-  /deep/ .ant-tabs-nav-container-scrolling {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  /deep/ .ant-tabs-tab-prev-icon-target,
-  /deep/ .ant-tabs-tab-next-icon-target {
-    display: none;
-    font-size: 16px;
-  }
-}
-.online-chat {
-  .message-list {
-    padding: 0;
-    border-right: 1px solid #e6e6e6;
-    transition: none;
-    &.message-list-close {
-      position: relative;
-      .footer-operate {
-        position: absolute;
-        bottom: 0;
-      }
-    }
-    background: #f6f6f6;
-    .message-search {
-      display: flex;
-      cursor: pointer;
-      padding: 12px;
-      border-bottom: 1px solid #e6e6e6;
-      .ant-btn {
-        height: 40px;
-      }
-      /deep/ .ant-input {
-        height: 100%;
-      }
-    }
-    .message-tabs-wrap {
-      position: relative;
-      // -webkit-box-flex: 1;
-      // -ms-flex: 1;
-      flex: 1;
-      .count {
-        position: absolute;
-        top: 20px;
-        width: 20px;
-        height: 20px;
-        text-align: center;
-        border-radius: 50%;
-        background: #e54949;
-        color: #fff;
-      }
-      .queue-count {
-        left: 120px;
-      }
-      .my-session-count {
-        left: 270px;
-      }
-    }
-    .message-tabs.ant-tabs {
-      width: 100%;
-      flex: 1;
-      overflow: hidden;
-      &.message-conference-tab {
-        /deep/ .ant-tabs-tab {
-          width: 50%;
-        }
-        /deep/ .ant-tabs-nav-container {
-          margin-right: 28px;
-        }
-      }
-      // staff 隐藏 tab
-      &.message-staff-tab {
-        /deep/ .ant-tabs-tab {
-          height: 25px;
-          line-height: 25px;
-        }
-        /deep/ .ant-tabs-top-content.ant-tabs-content-animated {
-          height: calc(100% - 50px);
-        }
-        /deep/ .ant-tabs-bar {
-          .ant-tabs-nav-container {
-            opacity: 0;
-            pointer-events: none;
-          }
-          .ant-tabs-tab-btn-disabled {
-            cursor: default;
-          }
-
-          .ant-tabs-extra-content {
-            top: 12px;
-            line-height: 25px;
-            font-size: 22px;
-          }
-        }
-      }
-      /deep/ .ant-tabs-nav-scroll {
-        .ant-tabs-nav {
-          width: 100%;
-        }
-      }
-      /deep/ .ant-tabs-nav-container {
-        border: 1px solid #d5d5d5;
-        border-left: 0;
-        border-radius: 4px;
-      }
-      /deep/ .ant-tabs-tab {
-        width: 33.33%;
-        height: 50px;
-        line-height: 50px;
-        margin: 0;
-        padding: 0;
-        text-align: center;
-        background: #fff;
-        vertical-align: top;
-        &:first-child {
-          border-top-left-radius: 4px;
-          border-bottom-left-radius: 4px;
-        }
-        &:last-child {
-          border-top-right-radius: 4px;
-          border-bottom-right-radius: 4px;
-        }
-        border-left: 1px solid #d5d5d5;
-      }
-      /deep/ .ant-tabs-tab-active {
-        background: #5585f5;
-        border-radius: 4px;
-        border-color: #5585f5;
-        &:after {
-          content: '';
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          left: 100%;
-          width: 1px;
-          background-color: #fff;
-          z-index: 1;
-        }
-        .serverinfo-label {
-          color: #fff;
-        }
-      }
-      /deep/ .ant-tabs-nav {
-        width: 100%;
-        float: left;
-      }
-      /deep/ .ant-tabs-ink-bar {
-        height: 0;
-      }
-      /deep/ .ant-tabs-bar {
-        border: none;
-        padding: 8px 12px;
-        width: 100%;
-        margin-bottom: 0;
-      }
-      /deep/ .ant-tabs-extra-content {
-        position: absolute;
-        right: 12px;
-        top: 16px;
-        padding-left: 8px;
-        font-size: 18px;
-        color: #707070;
-      }
-    }
-    .footer-operate {
-      display: inline-flex;
-      justify-content: space-around;
-      align-items: center;
-      width: 100%;
-      box-sizing: border-box;
-      padding: 0 0 0 8px;
-      height: 55px;
-      line-height: 55px;
-      border-top: 1px solid #f0f0f5;
-      &-right {
-        flex: 1;
-        display: inline-flex;
-        justify-content: flex-end;
-        height: 100%;
-        line-height: 55px;
-        .setting-span {
-          position: relative;
-          z-index: 2;
-        }
-        span {
-          position: relative;
-          // flex: 1;
-          display: inline-flex;
-          justify-content: center;
-          padding: 0 10px;
-          align-items: center;
-          &::after {
-            content: '';
-            position: absolute;
-            right: 0;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 1px;
-            background: #ccc;
-            height: 22px;
-          }
-          .svg-icon {
-            font-size: 20px;
-            cursor: pointer;
-            outline: none;
-            color: #b5b5b5;
-          }
-        }
-        span:last-child {
-          &::after {
-            width: 0;
-          }
-        }
-      }
-    }
-  }
-  .videoHistory-list {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 300px;
-    height: 0;
-    background: #fff;
-    z-index: -1;
-    box-shadow: 0px -5px 10px #e0e0e0;
-    transition: all 0.5s;
-    &.show-list {
-      height: calc(100% - 55px);
-      z-index: 2;
-    }
-  }
-  /deep/ .ant-layout-footer {
-    height: 190px;
-    padding: 0;
-    background: #fff;
-  }
-  /deep/ .ant-layout-content {
-    background: #fff;
-  }
-  .overlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    cursor: not-allowed;
-    .note {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 60%;
-      font-size: 20px;
-    }
-  }
-  .delay-wrapper {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 200001; // 要比 multiVideo 组件层级高
-    cursor: pointer;
-    &::-webkit-scrollbar {
-      width: 5px;
-    }
-    > div:last-child {
-      margin-bottom: 0 !important;
-    }
-  }
-  .serverinfo-label {
-    position: relative;
-    float: left;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: rgb(0, 0, 0, 0.65);
-    line-height: 1;
-    & + & {
-      border-left: 1px solid #d5d5d5;
-    }
-    .msg-count {
-      position: absolute;
-      right: 0;
-      top: 0;
-      display: inline-block;
-      min-width: 28px;
-      height: 28px;
-      line-height: 28px;
-      text-align: center;
-      border-radius: 14px;
-      background: #e54949;
-      color: #fff;
-      z-index: 1;
-      font-size: 20px;
-      transform: scale(0.5);
-      padding: 0 2px;
-    }
-  }
-  .loading {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .video-record {
-    background: #fff;
-    color: #5585f5;
-    line-height: 22px;
-    padding: 8px 16px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  /deep/ .classify-tabs {
-    margin-bottom: 8px;
-  }
-  .ant-alert {
-    line-height: 18px;
-    border-radius: 0;
-  }
-  /deep/ .ant-alert-icon {
-    margin-top: -3px;
-  }
-  .right-panel {
-    background: #fff;
-    .tab-operate {
-      display: flex;
-      height: 50px;
-      margin: 0 10px;
-      padding: 10px 0 0;
-      border-radius: 4px;
-      cursor: pointer;
-      .tab {
-        flex: 1;
-        line-height: 40px;
-        text-align: center;
-        font-size: 14px;
-        color: #252529;
-        border: 1px solid #e1e4eb;
-        background: #fff;
-        &.active {
-          background: #5585f5;
-          color: #fff;
-        }
-      }
-      .left {
-        border-radius: 4px 0px 0px 4px;
-        border-right: none;
-      }
-      .right {
-        border-radius: 0px 4px 4px 0px;
-        border-left: none;
-      }
-    }
-    .name-search {
-      margin: 0 0 8px;
-    }
-    .add-member {
-      color: #373737;
-      margin-bottom: 15px;
-    }
-    .add {
-      display: inline-block;
-      width: 48px;
-      height: 48px;
-      border: 1px solid #e1e4eb;
-      border-radius: 4px;
-      margin-right: 8px;
-      line-height: 48px;
-      text-align: center;
-    }
-    .member-list {
-      overflow: auto;
-      margin: 0 -10px;
-      &::-webkit-scrollbar {
-        width: 5px;
-      }
-      .member-item {
-        padding: 0 10px;
-        height: 80px;
-        display: flex;
-        align-items: center;
-        img {
-          width: 50px;
-          height: 50px;
-          border-radius: 50%;
-          margin-right: 8px;
-        }
-        .name {
-          font-weight: 600;
-          color: #212121;
-          font-size: 16px;
-        }
-        .remove {
-          margin-left: auto;
-          color: #ff1818;
-        }
-        &:hover {
-          background: #f4f4f4;
-        }
-      }
-    }
-  }
-  .collapse-icon {
-    width: 35px;
-    height: 76px;
-    background: url(../img/left-wrapper.png) no-repeat;
-    background-position: -2px center;
-    background-size: 46px 76px;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translate(6px, -50%);
-    z-index: 1;
-    &.fold img {
-      transform: rotate(180deg) translateX(-5px);
-    }
-  }
-}
-.disable-operate {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 3000000;
-  background-color: rgba(0, 0, 0, 0);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.chat-style-set {
-  padding: 8px 12px 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-  &.show-style {
-    justify-content: space-between;
-  }
-  .set-btn-icon {
-    font-size: 14px;
-    color: #333;
-    padding: 6px;
-    cursor: pointer;
-    display: inline-block;
-    line-height: 0;
-    &:hover {
-      background-color: #e6e6e6;
-      border-radius: 3px;
-    }
-    &.active {
-      color: #5585f5;
-    }
-  }
-  .chat-style-btns {
-    display: flex;
-    background-color: #fff;
-    border-radius: 4px;
-  }
-  .chat-style-btn {
-    width: 40px;
-    height: 32px;
-    cursor: pointer;
-    text-align: center;
-    line-height: 32px;
-    &.active {
-      background-color: #5585f5;
-      border-radius: 4px;
-    }
-  }
-}
-.chat-operate-more {
-  margin: 8px 0 20px;
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-  text-align: center;
-  cursor: pointer;
-  &:hover {
-    border-radius: 3px;
-    background: rgba(213, 213, 213, 0.6);
-  }
-  .operate-more-icon {
-    &,
-    &::after,
-    &::before {
-      width: 4px;
-      height: 4px;
-      background: rgba(0, 0, 0, 0.6);
-      border-radius: 50%;
-    }
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    &::after,
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-    }
-    &::after {
-      left: 100%;
-      margin-left: 2px;
-    }
-    &::before {
-      right: 100%;
-      margin-right: 2px;
-    }
-  }
-}
-.chat-operate-group {
-  margin: 0 -8px -8px 0;
-  overflow: hidden;
-  width: 196px;
-  font-size: 0;
-}
-.chat-operate-item {
-  float: left;
-  width: 90px;
-  height: 84px;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.6);
-  line-height: 20px;
-  margin: 0 8px 8px 0;
-  border: 1px solid #e6e6e6;
-  border-radius: 4px;
-  cursor: pointer;
-  &:hover {
-    background: #f5f5f5;
-  }
-  .svg-icon {
-    font-size: 24px;
-    width: 24px;
-    margin-bottom: 8px;
-    color: #5585f5;
-  }
-}
-.data-picker-clear {
-  color: #5585f5;
-  cursor: pointer;
-}
-</style>