<template>
  <div
    ref="container"
    class="call-container"
    :class="[
      allMembers && allMembers.length > 0 && rightPanelVisible ? 'call-container-show-right-panel' : '',
      yardmanType === '2' && memberList.length < 2 ? 'call-container-remote-only' : '',
      isFullscreen ? 'call-container-full' : '',
    ]"
    v-show="dialling || calling || isDialled"
  >
    <!-- 头部 -->
    <div class="header" @mousedown="onmousedown($event)" @mouseup="onmouseup" @dblclick="handleScreen">
      <div class="timeTik">调度时长 {{ timeTikFormat }}</div>
      <div class="item time">{{ currentDatetime }}</div>
      <i class="item icon" :class="isFullscreen ? 'narrow' : 'fullscreen'" @click="handleScreen"></i>
      <i class="item icon close" @click.prevent="handleLeave()"></i>
    </div>
    <!-- 音视频区域 最多参与人数9人 -->
    <div
      v-if="memberList.length > 0 && memberList.length < 9"
      class="container"
      :class="[
        'container-' + (memberList.length >= 2 ? layout : ''),
        memberList.length < 2 && yardmanType === '2' ? 'container-remote-only' : '',
        memberList.length < 2 && yardmanType === '1' ? 'container-C2C' : '',
      ]"
    >
      <!-- 本地流播放区域 -->
      <div v-show="yardmanType === '1'" id="localStream" class="stream-content">
        <el-avatar v-show="type === 'audio' || isMutedVideo" :size="60">
          <div class="avatar">{{ currentUserProfile.nick }}</div>
        </el-avatar>
        <div class="info">
          <span class="name">{{ currentUserProfile.nick }}</span>
          <i class="micro-status" :class="'micro-status-' + (isMutedAudio ? 'off' : 'on')"></i>
        </div>
      </div>
      <!-- 远端流区域 -->
      <div
        v-for="item in memberListSort"
        :key="item.id"
        :id="item.tencentUserId"
        class="stream-content"
        :class="[
          type === 'audio' ? 'stream-content-audio' : '',
          item.state ? 'stream-content-' + item.state : 'stream-content-CONNECTING',
        ]"
      >
        <el-avatar v-if="type === 'audio'" v-show="item.state === 'CONNECTED'" :size="60">
          <div class="avatar">{{ item.name }}</div>
        </el-avatar>
        <div class="info">
          <span class="name">{{ item.name }}</span>
          <i
            class="micro-status"
            :class="
              'micro-status-' + (remoteStreamList.find((x) => x.getUserId() === item.tencentUserId)?.hasAudio() ? 'on' : 'off')
            "
          ></i>
          <i v-if="item.action === 'handUp' || item.action === 'cheese'" class="icon-hand-up"></i>
        </div>
      </div>
    </div>
    <!-- 音视频区域：可翻页 参与人数9人以上 -->
    <div v-else class="container container-pagination">
      <i class="container-pagination-arrow container-pagination-arrow-left" @click="pagePre"></i>
      <i class="container-pagination-arrow container-pagination-arrow-right" @click="pageNext"></i>
      <!-- 按每页9个窗口分割 -->
      <div
        v-for="num in Math.ceil((memberList.length + 1) / 9)"
        :key="num"
        :class="'container-pagination-' + num"
        :style="containerTranslate"
      >
        <div class="container-pagination-item" v-if="num === 1">
          <!-- 本地流播放区域 -->
          <div id="localStream" class="stream-content">
            <el-avatar v-show="type === 'audio' || isMutedVideo" :size="60">
              <div class="avatar">{{ currentUserProfile.nick }}</div>
            </el-avatar>
            <div class="info">
              <span class="name">{{ currentUserProfile.nick }}</span>
              <i class="micro-status" :class="'micro-status-' + (isMutedAudio ? 'off' : 'on')"></i>
            </div>
          </div>
          <div
            v-for="(item, index) in memberListMoreSort(num)"
            :key="index"
            :id="item.tencentUserId"
            class="stream-content"
            :class="[
              type === 'audio' ? 'stream-content-audio' : '',
              item.state ? 'stream-content-' + item.state : 'stream-content-CONNECTING',
            ]"
          >
            <!-- 远端流区域 -->
            <el-avatar v-if="type === 'audio'" v-show="item.state === 'CONNECTED'" :size="60">
              <div class="avatar">{{ item.name }}</div>
            </el-avatar>
            <div class="info">
              <span class="name">{{ item.name }}</span>
              <i
                class="micro-status"
                :class="
                  'micro-status-' +
                  (remoteStreamList.find((x) => x.getUserId() === item.tencentUserId)?.hasAudio() ? 'on' : 'off')
                "
              ></i>
              <i v-if="item.action === 'handUp' || item.action === 'cheese'" class="icon-hand-up"></i>
            </div>
          </div>
        </div>
        <div class="container-pagination-item" v-else>
          <div
            v-for="(item, index) in memberListMoreSort(num)"
            :key="index"
            :id="item.tencentUserId"
            class="stream-content"
            :class="[
              type === 'audio' ? 'stream-content-audio' : '',
              item.state ? 'stream-content-' + item.state : 'stream-content-CONNECTING',
            ]"
          >
            <!-- 远端流区域 -->
            <el-avatar v-if="type === 'audio'" v-show="item.state === 'CONNECTED'" :size="60">
              <div class="avatar">{{ item.name }}</div>
            </el-avatar>
            <div class="info">
              <span class="name">{{ item.name }}</span>
              <i
                class="micro-status"
                :class="
                  'micro-status-' +
                  (remoteStreamList.find((x) => x.getUserId() === item.tencentUserId)?.hasAudio() ? 'on' : 'off')
                "
              ></i>
              <i v-if="item.action === 'handUp' || item.action === 'cheese'" class="icon-hand-up"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 参与人列表 allMembers.length>0时显示 -->
    <div class="right-panel" v-if="allMembers && allMembers.length > 0" v-show="rightPanelVisible">
      <div class="right-panel-title">
        <span>参会人</span>
        <i class="icon icon-close" @click="setRightPanelVisible"></i>
      </div>
      <el-tabs v-model="rightPanelActiveName" @tab-click="handleRightPanelTabClick">
        <el-tab-pane :label="tabsLabelConnecting" name="1">
          <div class="room-member-list">
            <!-- 调度员 -->
            <div class="room-member-list-item">
              <div class="info">
                <el-avatar :size="40">
                  <div class="avatar">{{ currentUserProfile.nick }}</div>
                </el-avatar>
                <div class="name">
                  <span class="value">{{ currentUserProfile.nick }}（我）</span>
                  <span class="tag">调度员</span>
                </div>
              </div>
              <div class="stream-controller">
                <!-- 禁用音频轨道 -->
                <i title="取消静音" v-if="isMutedAudio" class="btn btn-mute" @click="handleDebounce(handleMuteAudio, 500)"></i>
                <!-- 启用音频轨道 -->
                <i title="静音" v-if="!isMutedAudio" class="btn btn-unmute" @click="handleDebounce(handleMuteAudio, 500)"></i>
                <!-- 禁用视频轨道 -->
                <i
                  title="开启视频"
                  v-if="type === 'video' && yardmanType === '1' && isMutedVideo"
                  class="btn btn-videoOn"
                  @click="handleDebounce(handleMuteVideo, 500)"
                ></i>
                <!-- 启用视频轨道 -->
                <i
                  title="关闭视频"
                  v-if="type === 'video' && yardmanType === '1' && !isMutedVideo"
                  class="btn btn-videoOff"
                  @click="handleDebounce(handleMuteVideo, 500)"
                ></i>
              </div>
            </div>
            <!-- 被调度人 -->
            <div
              class="room-member-list-item"
              v-for="(item, index) in memberList.filter((x) => x.state !== 'DISCONNECTED')"
              :key="index"
            >
              <div class="info">
                <el-avatar :size="40">
                  <div class="avatar">{{ item.nameSlice }}</div>
                </el-avatar>
                <div class="name">
                  <span class="value">{{ item.name }}</span>
                </div>
              </div>
              <div class="stream-controller">
                <span
                  v-if="item.isSpeaking && remoteStreamList.find((x) => x.getUserId() === item.tencentUserId)?.hasAudio()"
                  style="color: #ffffff; font-size: 10px"
                  >正在讲话...</span
                >
                <!-- 举手 -->
                <i class="btn btn-handup" v-if="item.action === 'handUp' || item.action === 'cheese'"></i>
                <!-- 禁用音频轨道 -->
                <i
                  title="静音"
                  v-if="remoteStreamList.find((x) => x.getUserId() === item.tencentUserId)?.hasAudio()"
                  class="btn btn-unmute"
                  @click="memberMute(item)"
                ></i>
                <!-- 启用音频轨道 -->
                <i
                  title="取消静音"
                  v-if="!remoteStreamList.find((x) => x.getUserId() === item.tencentUserId)?.hasAudio()"
                  class="btn btn-mute"
                  @click="memberUnmute(item)"
                ></i>
                <!-- 禁用视频轨道 -->
                <i
                  title="关闭视频"
                  v-if="
                    type === 'video' &&
                    yardmanType === '1' &&
                    remoteStreamList.find((x) => x.getUserId() === item.tencentUserId)?.hasVideo()
                  "
                  class="btn btn-videoOff"
                  @click="memberVideoOff(item)"
                ></i>
                <!-- 启用视频轨道 -->
                <i
                  title="开启视频"
                  v-if="
                    type === 'video' &&
                    yardmanType === '1' &&
                    !remoteStreamList.find((x) => x.getUserId() === item.tencentUserId)?.hasVideo()
                  "
                  class="btn btn-videoOn"
                  @click="memberVideoOn(item)"
                ></i>
                <!-- 移除成员 -->
                <i title="移除" class="btn btn-kick-out" @click="kickOut(item.tencentUserId)"></i>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="tabsLabelDisconnecting" name="2">
          <div class="room-member-list">
            <div
              class="room-member-list-item"
              v-for="(item, index) in memberList.filter((x) => x.state === 'DISCONNECTED')"
              :key="index"
            >
              <div class="info">
                <el-avatar :size="40">
                  <div class="avatar">{{ item.nameSlice }}</div>
                </el-avatar>
                <div class="name">
                  <span class="value">{{ item.name }}</span>
                </div>
              </div>
              <div class="stream-controller">
                <span v-if="item.timeout" class="state-disconnected" style="color: #e2594e; font-size: 14px">未连上</span>
                <span v-if="item.beKickOut" class="state-disconnected" style="color: #e2594e; font-size: 14px">移除</span>
                <span v-if="!item.beKickOut && item.hangup" class="state-disconnected" style="color: #e2594e; font-size: 14px"
                  >已挂断</span
                >
                <!-- 重拨 -->
                <i class="btn btn-recall" @click="recall(item)"></i>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="right-panel-bottom">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="right-panel-bottom-btn" @click="muteAll">全员静音</div>
          </el-col>
          <el-col :span="12">
            <div class="right-panel-bottom-btn" @click="unMuteAll">解除全员静音</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button
              :disabled="memberList.length >= 5"
              class="right-panel-bottom-btn-full"
              type="primary"
              @click="pickupVisible = true"
              >添加成员</el-button
            >
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div :class="!isMutedAudio ? 'micOn' : 'micOff'" @click="handleDebounce(handleMuteAudio, 500)">
        <i class="icon"></i>
        <span class="name">麦克风</span>
      </div>
      <div
        v-if="type === 'video' && yardmanType === '1'"
        :class="!isMutedVideo ? 'videoOn' : 'videoOff'"
        @click="handleDebounce(handleMuteVideo, 500)"
      >
        <i class="icon"></i>
        <span class="name">摄像头</span>
      </div>
      <div class="refuse" @click="handleDebounce(handleLeave, 500)">
        <i class="icon"></i>
        <span class="name">结束</span>
      </div>
      <div v-if="memberList.length <= 9" class="layout" @click="handleDebounce(switchLayout, 500)">
        <i class="icon"></i>
        <span class="name">切换布局</span>
        <div v-show="showSwitchLayout" class="layout-picker">
          <div class="layout-type">
            <div class="layout-type-img layout-type-img-3"></div>
            <el-radio v-model="layout" :label="3" :disabled="memberList.length >= 3">三宫格</el-radio>
          </div>
          <div class="layout-type">
            <div class="layout-type-img layout-type-img-6"></div>
            <el-radio v-model="layout" :label="6" :disabled="memberList.length >= 6">六宫格</el-radio>
          </div>
          <div class="layout-type">
            <div class="layout-type-img layout-type-img-9"></div>
            <el-radio v-model="layout" :label="9">九宫格</el-radio>
          </div>
        </div>
      </div>
      <div
        v-if="memberList.length >= 2"
        class="members"
        :class="rightPanelVisible ? 'members-active' : ''"
        @click="handleDebounce(setRightPanelVisible, 500)"
      >
        <i class="icon"></i>
        <span class="name">成员</span>
      </div>
    </div>
    <el-dialog
      :visible.sync="pickupVisible"
      title="添加成员"
      width="586px"
      custom-class="dialog-pick-up"
      :close-on-press-escape="false"
      :modal="false"
      @open="onOpen"
    >
      <div class="transfer">
        <!-- 候选 -->
        <div class="transfer-left">
          <el-input class="transfer-left-query" placeholder="搜索" v-model="pickupName" @input="queryPickup"></el-input>
          <div class="transfer-left-list">
            <div class="transfer-left-list-item" v-for="(item, index) in pickupMemberList" :key="index">
              <el-checkbox v-model="item.checked">
                <div class="info">
                  <el-avatar :size="30">
                    <div class="avatar">{{ item.nameSlice }}</div>
                  </el-avatar>
                  <span class="name">{{ item.name }}</span>
                </div>
              </el-checkbox>
            </div>
          </div>
        </div>
        <div class="transfer-right">
          <div class="transfer-right-header">
            <span class="count">已选：{{ allMembers.filter((x) => !x.active && x.checked).length }}人</span>
            <span class="clear" @click="clearPickup">清空</span>
          </div>
          <div class="transfer-right-list">
            <div
              class="transfer-right-list-item"
              v-for="(item, index) in allMembers.filter((x) => !x.active && x.checked)"
              :key="index"
            >
              <div class="info">
                <el-avatar :size="30">
                  <div class="avatar">{{ item.nameSlice }}</div>
                </el-avatar>
                <span class="name">{{ item.name }}</span>
              </div>
              <i class="icon-remove" @click="item.checked = false"></i>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pickupVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMembers">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { formatDuration } from "@/utils/formatDuration";
import { sendVideoRoomMsg } from "@/api/bcxin/identify";
import { getRooms, leave, roomActions, inviteUsers, kickOutUser } from "@/api/room-controller";
import rtc from "@/components/mixins/rtc";
import screenfull from "screenfull";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import weekday from "dayjs/plugin/weekday";
dayjs.locale("zh-cn"); // 本地化
dayjs.extend(weekday); // 第一天为周一

export default {
  name: "CallLayer",
  mixins: [rtc],
  props: {
    memberList: {
      type: Array,
      default() {
        return [];
      },
    },
    allMembers: {
      // 除调度人外所有可选的参与者
      type: Array,
      default() {
        return [];
      },
    },
    type: {
      type: String,
      validate: (value) => {
        return ["video", "audio"].includes(value);
      },
    },
    audio: {
      type: Boolean,
      default: true,
    },
    video: {
      type: Boolean,
      default: true,
    },
    yardmanType: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      conferenceLimit: 3600, // 会议时长上限 单位秒 默认一小时（3600秒）
      connectingLimit: 60, // 拨号时长上限 单位秒 默认 1分钟（60秒）
      showFooter: false,
      layout: 3,
      timeout: null,
      callType: 1, //1:audio，2:video
      Trtc: undefined,
      isCamOn: true,
      isMicOn: true,
      isInvitedMicOn: true,
      maskShow: false,
      isLocalMain: true, // 本地视频是否是主屏幕显示
      start: 0,
      end: 0,
      duration: 0,
      hangUpTimer: 0, // 通话计时id
      ready: false,
      dialling: false, // 是否拨打电话中
      calling: false, // 是否通话中
      isDialled: false, // 是否被呼叫
      inviteID: "",
      inviteData: {},
      sponsor: "", //发起者
      invitedUserID: [], //被邀请者
      invitedNick: "",
      invitedUserInfo: [],
      defaultAvatar: "https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-3.png",
      viewLocalDomID: "",
      callingUserList: [], // 参加通话的人 ,不包括自己
      callingType: "C2C", //区分多人和C2C通话的UI样式
      isStartLocalView: false, //本地是否开启
      callingTips: {
        callEnd: 1, //通话结束
        callTimeout: 5,
      },
      roomId: "",
      disX: 0,
      disY: 0,
      down: false,
      currentDatetime: dayjs().format("YYYY-MM-DD dddd HH:mm:ss"),
      timeTik: 0,
      timeTikFormat: "",
      timer: null,
      timingTimer: null,
      currentDay: dayjs().day(),
      isFullscreen: false,
      showSwitchLayout: false,
      diallingTime: 0,
      diallingTimer: null,
      currentPage: 0,
      rightPanelVisible: true,
      rightPanelActiveName: "1",
      pickupVisible: false,
      pickupName: "",
      openTime: null,
      pickupMemberList: [],
      allMembersTimer: null,
    };
  },
  computed: {
    ...mapGetters(["toAccount", "currentConversationType"]),
    ...mapState({
      currentConversation: (state) => state.conversation.currentConversation,
      callingInfo: (state) => state.conversation.callingInfo,
      videoRoom: (state) => state.video.videoRoom,
      currentUserProfile: (state) => state.user.currentUserProfile,
      userID: (state) => state.user.userID,
      userSig: (state) => state.user.userSig,
      sdkAppID: (state) => state.user.sdkAppID,
    }),
    memberListSort() {
      return [...this.memberList].sort((a, b) => {
        return a?.state?.localeCompare(b?.state);
      });
    },
    memberListMoreSort() {
      return function (num) {
        return [...this.memberList]
          .slice((num - 1) * (num <= 2 ? 8 : 9), (num <= 2 ? 8 : 9) * num)
          .filter((x) => x !== null && x !== undefined)
          .sort((a, b) => a?.state?.localeCompare(b?.state));
      };
    },
    containerTranslate() {
      return {
        transform: `translate(${-this.currentPage * 100}%,0)`,
      };
    },
    tabsLabelConnecting() {
      return `调度中（${this.memberList.filter((x) => x.state !== "DISCONNECTED").length}）`;
    },
    tabsLabelDisconnecting() {
      return `断联（${this.memberList.filter((x) => x.state === "DISCONNECTED").length}）`;
    },
    formatDurationStr() {
      return formatDuration(this.duration);
    },
    myAvatar() {
      return this.currentUserProfile.avatar || this.defaultAvatar;
    },
    myNick() {
      return this.currentUserProfile.nick || this.userID;
    },
    remoteUserName() {
      return function (id) {
        console.log("remoteUserId", id);
        console.log(this.memberList.find((x) => x.tencentUserId === id));
        return this.memberList.find((x) => x.tencentUserId === id)?.name || "";
      };
    },
  },
  created() {
    this.initListener();
    this.setTimer();
  },
  watch: {
    memberList: {
      handler(value) {
        const offlineMembers = [...value].filter((x) => x.state === "DISCONNECTED").length;
        // console.log("offline members", offlineMembers, value.length);
        if (offlineMembers >= value.length /* && process.env.VUE_APP_ENV !== "development"*/ && (this.calling || this.dialling)) {
          this.handleLeave();
        }
      },
      deep: true,
      immediate: true,
    },
    /**
     * * 一对一被调度方没有接的话1分钟后调度方直接结束
     * @param value
     */
    diallingTime(value) {
      if (value && value >= 60 /*&& process.env.VUE_APP_ENV !== "development"*/) {
        this.handleLeave(true);
      }
    },
    /**
     * * 监听已调度时长，超过限度conferenceLimit（一小时）就自动挂断
     * @param val
     */
    timeTik(val) {
      if (val && val > this.conferenceLimit * 1000) {
        this.handleLeave();
      }
    },
  },
  destroyed() {
    this.removeListener();
    window.addEventListener("beforeunload", () => {
      this.videoCallLogOut();
    });
    window.addEventListener("leave", () => {
      this.videoCallLogOut();
    });
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
    if (this.timingTimer) {
      clearTimeout(this.timingTimer);
      this.timingTimer = null;
    }
    this.endDialingTimeCounting();
  },
  mounted() {
    this.$bus.$on("video-call", this.videoCalling); // 发起通话
    this.$bus.$on("audio-call", this.audioCalling); // 发起通话
  },
  beforeDestroy() {
    this.$bus.$off("video-call", this.videoCalling);
    this.$bus.$off("audio-call", this.audioCalling); // 发起通话
  },
  methods: {
    onOpen() {
      this.pickupMemberList = this.allMembers.filter((x) => !x.active);
    },
    queryPickup(val) {
      if (val) {
        this.pickupMemberList = this.allMembers.filter((x) => {
          return x.name.indexOf(val) >= 0 && !x.active;
        });
      } else {
        this.pickupMemberList = this.allMembers.filter((x) => !x.active);
      }
    },
    /**
     * @后台拨号接口
     * @param roomId
     * @param MemberList
     * @param UseList
     */
    sendRoomMessage(roomId, MemberList, UseList) {
      const userInfo = localStorage.getItem("userInfo");
      if (userInfo) {
        const user = JSON.parse(userInfo);
        const params = {
          RoomNo: roomId, //房间
          type: this.type, //video or audio
          MemberList,
          name: user.name, //调度者名称
          Yardman_Name: user.tencentUserId, //调度者名称
          Yardman_Task_Name: "个人调度", //调度任务名称
          Yardman_Type: this.yardmanType, //调度类型：1视频调度 2 视频上拉：除了视频上拉传2，其他音频调度与视频调度都传1
          yardmanType: this.yardmanType, //调度类型：1视频调度 2 视频上拉：除了视频上拉传2，其他音频调度与视频调度都传1
          Yardman_Task_Explain: "任务说明", //调度任务说明，非必填
          // Transcriber: "", //录制人员cid,多个逗号隔开，非必填
          Originator: user.tencentUserId + ";" + user.tencentUserId, //发起人cid;useid
          //被调度视频人员,跟MemberList一一对应uid;employeeid;organizationId;name;type,...
          UseList,
          ComId: user.organizationId, //调度者公司id
        };
        // 后端去给被调度者的app拨号
        sendVideoRoomMsg(params)
          .then((res) => {
            console.log(res);
            if (this.memberList.length >= 3) {
              this.layout = 6;
              if (this.memberList.length >= 6) {
                this.layout = 9;
              }
            }
          })
          .catch(({ response: { data } }) => {
            console.log(data);
            const { message } = data;
            this.addFailedLog(message);
          });
      }
    },
    /**
     * @添加人员
     */
    addMembers() {
      const members = this.allMembers.filter((x) => !x.active && x.checked);
      console.log("addMembers", members);
      if (!members || members.length === 0) {
        return;
      }
      console.log(
        "%c add member memberList",
        "background: #00cc00; color: #fff; border-radius: 3px;padding:2px 5px",
        this.memberList
      );
      console.log("%c add member members", "background: #00cc00; color: #fff; border-radius: 3px;padding:2px 5px", members);
      if (members.length + this.memberList.length <= 5) {
        inviteUsers(this.roomId, {
          roomUsers: members.map((x) => {
            return {
              employeeId: x.id,
              organizationId: x.organizationId,
              tencentUserId: x.tencentUserId,
              securityStationId: x.securityStationId,
              superviseDepartId: x.superviseDepartId,
            };
          }),
        })
          .then(async (res) => {
            const { roomId, roomUsers } = res;
            // this.memberList.push(...members);
            roomUsers.forEach((user) => {
              const member = this.allMembers.find((x) => x.id === user.employeeId);
              if (member) this.memberList.push({ ...member, state: "CONNECTING" });
              this.allMembers.forEach((member) => {
                member.checked = false;
                if (member.id === user.employeeId) {
                  member.active = true;
                }
              });
            });
            this.$emit("update:memberList", [...this.memberList]);
            const allMembers = [...this.allMembers];
            this.$emit("update:allMembers", allMembers);
            // 重新触发服务端拨号
            const memberList = roomUsers
              .map((x) => {
                return x.cid;
              })
              .join(",");
            const UseList = members
              .map((x) => {
                const { id, organizationId, tencentUserId, name } = x;
                return `${tencentUserId};${id};${organizationId};${name};${this.type}`;
              })
              .join(",");
            this.sendRoomMessage(roomId, memberList, UseList);
          })
          .catch(({ response: { data } }) => {
            console.log(data);
            const { message } = data;
            this.addFailedLog(message);
          });
        this.pickupVisible = false;
      } else {
        this.$store.commit("showMessage", { message: "最多选择5名被调度人" });
      }
    },
    clearPickup() {
      this.allMembers.forEach((member) => {
        if (!member.active) {
          member.checked = false;
        }
      });
    },
    /**
     * @移除人员
     */
    kickOut(tencentUserId) {
      kickOutUser(this.roomId, tencentUserId)
        .then((res) => {
          console.log(res);
          // memberList移除踢出的成员
          const memberList = [...this.memberList];
          memberList.forEach((item) => {
            if (item.tencentUserId === tencentUserId) {
              item.state = "DISCONNECTED";
              item.beKickOut = true;
            }
          });
          // memberList.splice(
          //   memberList.findIndex((item) => item.tencentUserId === tencentUserId),
          //   1
          // );
          // if (this.memberList.length >= 3) {
          //   this.layout = 6;
          //   if (this.memberList.length >= 6) {
          //     this.layout = 9;
          //   }
          // }
          this.$emit("update:memberList", memberList);
          this.$emit("kickOut", tencentUserId);

          // const allMembers = [...this.allMembers];
          // allMembers.forEach((member) => {
          //   if ((member.tencentUserId = tencentUserId)) {
          //     member.active = false;
          //   }
          // });
          // this.$emit("update:allMembers", allMembers);
        })
        .catch(({ response: { data } }) => {
          console.log(data);
          const { message } = data;
          this.addFailedLog(message);
        });
    },
    recall(member) {
      inviteUsers(this.roomId, {
        roomUsers: [member].map((x) => {
          return {
            employeeId: x.id,
            organizationId: x.organizationId,
            tencentUserId: x.tencentUserId,
            securityStationId: x.securityStationId,
            superviseDepartId: x.superviseDepartId,
          };
        }),
      })
        .then(async (res) => {
          const { roomId, roomUsers } = res;
          console.log(roomUsers);
          console.log(roomId);
          // this.memberList.push(...members);
          roomUsers.forEach((user) => {
            this.allMembers.forEach((member) => {
              member.checked = false;
              if (member.id === user.employeeId) {
                member.active = true;
              }
            });
            this.memberList.forEach((member) => {
              if (member.id === user.employeeId) {
                member.state = "CONNECTING";
                member.beKickOut = false;
                member.hangup = false;
              }
            });
            this.$emit("update:memberList", JSON.parse(JSON.stringify(this.memberList)));
          });
          // 重新触发服务端拨号
          const memberList = roomUsers
            .map((x) => {
              return x.cid;
            })
            .join(",");
          const UseList = [member]
            .map((x) => {
              const { id, organizationId, tencentUserId, name } = x;
              // const item_cid = cid || tencentUserId
              // uidList.push(`${tencentUserId};${id};${organizationId};${name};${type}`)
              return `${tencentUserId};${id};${organizationId};${name};${this.type}`;
            })
            .join(",");
          this.sendRoomMessage(roomId, memberList, UseList);
        })
        .catch(({ response: { data } }) => {
          console.log(data);
          const { message } = data;
          this.addFailedLog(message);
        });
    },
    /**
     * @全员禁音
     */
    muteAll() {
      // console.log("remoteStreamList",this.remoteStreamList);
      // this.remoteStreamList.forEach((remoteStream) => remoteStream.muteAudio());
      let tencentUserIds = [];
      roomActions(this.roomId, {
        action: "stopWord", //全员静音
        tencentUserIds: tencentUserIds.concat(
          this.memberList.map((x) => {
            return x.tencentUserId;
          })
        ),
      })
        .then(async () => {})
        .catch(() => {});
    },
    /**
     * @解除全员禁音
     */
    unMuteAll() {
      // this.remoteStreamList.forEach((remoteStream) => remoteStream.unmuteAudio());
      let tencentUserIds = [];
      roomActions(this.roomId, {
        action: "openWord", //全员解除静音
        tencentUserIds: tencentUserIds.concat(
          this.memberList.map((x) => {
            return x.tencentUserId;
          })
        ),
      })
        .then(async () => {})
        .catch(() => {});
    },
    setRightPanelVisible() {
      this.rightPanelVisible = !this.rightPanelVisible;
    },
    handleRightPanelTabClick() {},
    pagePre() {
      this.currentPage--;
      if (this.currentPage < 0) {
        this.currentPage = Math.ceil(this.memberList.length / 9) - 1;
      }
    },
    pageNext() {
      this.currentPage++;
      if (this.currentPage > Math.ceil((this.memberList.length + 1) / 9) - 1) {
        this.currentPage = 0;
      }
    },
    setTimer() {
      this.timer = setTimeout(() => {
        this.currentDatetime = dayjs().format("YYYY-MM-DD dddd HH:mm:ss");
        this.setTimer();
      }, 1000);
    },
    setTimingTimer() {
      this.timingTimer = setTimeout(() => {
        if (this.calling || this.dialling) {
          this.timeTik = dayjs().diff(this.openTime) || 0;
          console.log("timeTik", this.timeTik);
          this.timeTikFormat = dayjs(this.timeTik).format("mm:ss");
        }
        this.setTimingTimer();
      }, 1000);
    },
    /**
     * 监听鼠标移动事件
     * @param evt
     */
    onmousedown(evt) {
      // event的兼容性
      const ev = evt || event;

      // 获取鼠标按下的坐标
      const x1 = ev.clientX;
      const y1 = ev.clientY;

      // 获取元素的left，top值
      const l = this.$refs.container.offsetLeft;
      const t = this.$refs.container.offsetTop;

      // 给可视区域添加鼠标的移动事件
      document.onmousemove = (eve) => {
        // event的兼容性
        const evn = eve || event;

        // 获取鼠标移动时的坐标
        const x2 = evn.clientX;
        const y2 = evn.clientY;

        // 计算出鼠标的移动距离
        const x = x2 - x1;
        const y = y2 - y1;

        // 移动的数值与元素的left，top相加，得出元素的移动的距离
        const lt = y + t;
        const ls = x + l;

        // 更改元素的left，top值
        this.$refs.container.style.top = lt + "px";
        this.$refs.container.style.left = ls + "px";

        this.$emit("move", [ls, lt]);
      };
    },
    onmouseup(evt) {
      const evn = evt || event;
      this.down = false;
      document.removeEventListener("mousemove", this.onResize);
      document.onmousemove = null;
      document.onmousedown = null;
      document.onmouseup = null;
      const x2 = evn.clientX;
      const y2 = evn.clientY;
      this.$emit("moveEnd", [x2, y2]);
    },
    handleMousedown(e) {
      this.down = true;
      this.disX = e.clientX - this.$refs.resize.offsetLeft;
      this.disY = e.clientY - this.$refs.resize.offsetTop;
      document.addEventListener("mousemove", this.onResize);
      document.onmouseup = () => {
        this.down = false;
        document.removeEventListener("mousemove", this.onResize);
      };
    },
    // 显示失败的 Log
    addFailedLog(message) {
      this.$store.commit("showMessage", {
        message,
        type: "error",
      });
    },
    // 远端用户进房事件
    handlePeerJoin(userID) {
      // if (this.callingUserList.indexOf(userID) === -1) {
      //   this.callingUserList.push(userID);
      // }
      this.memberList.forEach((member) => {
        if (member.tencentUserId === userID) {
          member.state = "CONNECTED";
        }
        // list.push(member);
      });
    },
    // 远端用户退房事件
    handlePeerLeave(userID) {
      this.memberList.forEach((member) => {
        if (member.tencentUserId === userID) {
          member.state = "DISCONNECTED";
        }
      });
      console.log(this.memberList);
    },
    addSuccessLog(message) {
      this.$store.commit("showMessage", {
        message,
      });
    },
    async videoCalling() {
      this.openTime = dayjs();
      this.setTimingTimer();
      // res.data.message.nick = this.currentUserProfile.nick;
      // this.$store.commit("pushCurrentMessageList", res.data.message);
      // this.changeState("dialling", true);
      this.layout = 3;
      if (this.memberList.length >= 3) {
        this.layout = 6;
        if (this.memberList.length >= 6) {
          this.layout = 9;
        }
      }
      console.log(this.allMembers.filter((x) => !x.active));
      console.log(this.type);
      const userInfo = localStorage.getItem("userInfo");
      let roomUsers = [];
      if (userInfo) {
        const user = JSON.parse(userInfo);
        console.log(user);
        // console.log(this.memberList);
        roomUsers.push({
          employeeId: user.employeeId,
          organizationId: user.organizationId,
          tencentUserId: user.tencentUserId,
          securityStationId: "",
          superviseDepartId: "",
          sponsor: true,
        });
        console.log(
          "%c videoCalling memberList",
          "background: #00cc00; color: #fff; border-radius: 3px;padding:2px 5px",
          this.memberList
        );
        getRooms({
          roomUsers: roomUsers.concat(
            this.memberList.map((x) => {
              return {
                employeeId: x.id,
                organizationId: x.organizationId,
                tencentUserId: x.tencentUserId,
                securityStationId: x.securityStationId,
                superviseDepartId: x.superviseDepartId,
                sponsor: false,
              };
            })
          ),
          communicatedType: this.type === "video" ? "Video" : "Audio", //新增传参
          yardmanType: this.yardmanType, //调度类型：1视频调度 2 视频上拉：除了视频上拉传2，其他音频调度与视频调度都传1
        })
          .then(async (res) => {
            const { id, roomUsers } = res;
            console.log(id);
            if (id <= 0) {
              this.addFailedLog(`被调度人所在企业联动值不足, 无法进行调度。`);
              return false;
            } else {
              this.dialling = true; // 拨号中
              this.$store.commit("TOGGLE_DISPATCHING", true);
              // 1v1或者视频上拉时，计算拨号时长
              this.startDialingTimeCounting();
              // 分别对所有参会人计时
              this.setAllMembersTimer();
              // 初始化客户端
              await this.initClient();
              this.roomId = id;
              this.$store.commit("SET_ROOM_ID", this.roomId);
              // 加入房间
              await this.join();
              try {
                await this.initLocalStream({
                  audio: this.audio,
                  video: this.video,
                }); // 初始话本地流
                await this.playLocalStream(); // 播放本地流
                await this.publish(); // 发布本地流
              } catch (error) {
                throw new Error(error);
              }
              const memberList = roomUsers
                .filter((item) => item.cid && item.sponsor === false)
                .map((x) => {
                  return x.cid;
                })
                .join(",");
              const UseList = this.memberList
                .map((x) => {
                  const { id, organizationId, tencentUserId, name } = x;
                  return `${tencentUserId};${id};${organizationId};${name};${this.type}`;
                })
                .join(",");
              this.sendRoomMessage(this.roomId, memberList, UseList);
            }
          })
          .catch(({ response }) => {
            console.log(response);
            this.addFailedLog(`${response.data.message}`);
          });
      }
    },
    /**
     * @1v1或者视频上拉时，计算拨号时长
     */
    startDialingTimeCounting() {
      if (this.yardmanType === "2" || this.memberList.length < 2) {
        this.diallingTimer = setInterval(() => {
          this.diallingTime += 1;
        }, 1000);
      }
    },
    /**
     * @结束拨号计时
     */
    endDialingTimeCounting() {
      if (this.diallingTimer) {
        clearInterval(this.diallingTimer);
        this.diallingTimer = null;
        this.diallingTime = 0;
        // this.$message.warning("对方未接听，已离开房间")
      }
    },
    audioCalling() {},
    videoCallLogOut() {},
    initListener() {
      console.log("init trtc listener");
    },
    removeListener() {},
    handleDebounce(func, wait) {
      let context = this;
      let args = arguments;
      if (this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        func.apply(context, args);
      }, wait);
    },
    handleLeave() {
      this.endDialingTimeCounting();
      if (this.allMembersTimer) {
        clearInterval(this.allMembersTimer);
        this.allMembersTimer = null;
      }
      // timingTimer
      if (this.timingTimer) {
        clearInterval(this.timingTimer);
        this.timingTimer = null;
      }
      this.pickupVisible = false;
      this.timeTikFormat = "";
      this.leave().then(() => {
        this.dialling = false;
        this.isMutedVideo = false;
        this.isMutedAudio = false;
        this.rightPanelVisible = true;
        this.rightPanelActiveName = "1";
        const memberList = this.memberList.map((x) => {
          return {
            ...x,
            state: "CONNECTING",
            action: "",
            timer: 0,
            timeout: false,
            beKickOut: false,
            hangup: false,
            isSpeaking: false,
          };
        });
        this.$emit("update:memberList", memberList);
        this.$store.commit("TOGGLE_DISPATCHING", false);
        this.$store.commit("SET_ROOM_ID", null);
        leave(this.roomId).then((res) => {
          console.log(res);
        });
      });
    },
    handleMuteAudio() {
      if (this.isMutedAudio) {
        this.unmuteAudio();
      } else {
        this.muteAudio();
      }
    },
    handleMuteVideo() {
      if (this.isMutedVideo) {
        this.unmuteVideo();
      } else {
        this.muteVideo();
      }
    },
    handleScreen() {
      if (screenfull.isEnabled) {
        // console.log("screen",this.$refs.container)
        screenfull.toggle(this.$refs.container);
        this.isFullscreen = !this.isFullscreen;
        if (!this.isFullscreen) {
          this.$refs.container.style.top = "0";
          this.$refs.container.style.left = "50%";
          this.$refs.container.style.transform = "translate(-50%, 0)";
        }
      }
    },
    switchLayout() {
      this.showSwitchLayout = !this.showSwitchLayout;
    },
    /**
     * @参会人举手
     * @param member
     */
    memberHandUp(member) {
      const { action, tencentUserId } = member;
      this.memberAction(action, [tencentUserId]);
    },
    /**
     * @参会人静音
     * @param member
     */
    memberMute({ tencentUserId }) {
      this.memberAction("stopWord", [tencentUserId]);
    },
    /**
     * @参会人解除静音
     * @param member
     */
    memberUnmute({ tencentUserId }) {
      this.memberAction("openWord", [tencentUserId]);
    },
    /**
     * @参会人禁用视频
     * @param member
     */
    memberVideoOff({ tencentUserId }) {
      this.memberAction("camOff", [tencentUserId]);
    },
    /**
     * @参会人启用视频
     * @param member
     */
    memberVideoOn({ tencentUserId }) {
      this.memberAction("camOn", [tencentUserId]);
    },
    /**
     * @处理事件
     * @param action
     * @param tencentUserIds
     */
    memberAction(action, tencentUserIds) {
      roomActions(this.roomId, {
        action,
        tencentUserIds,
      })
        .then((res) => {
          console.log(res);
          // 如果发起动作为启、禁音视频。返回成功后去掉举手图标
          const memberList = [...this.memberList];
          tencentUserIds.forEach((id) => {
            memberList.forEach((member) => {
              if (member.tencentUserId === id) {
                member.action = "";
              }
            });
          });
          this.$emit("update:memberList", memberList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * @显示用户名的提示
     * @param id
     * @param message
     * @param err
     */
    userLog(id, message, err = false) {
      const user = this.memberList.find((member) => member.tencentUserId === id);
      if (user) {
        console.log(user);
        if (err) {
          this.addFailedLog(`[${user.name}] ${message}`);
        } else {
          this.addSuccessLog(`[${user.name}] ${message}`);
        }
      }
    },
    /**
     * * 每秒对每个参会成员的
     */
    setAllMembersTimer() {
      this.allMembersTimer = setInterval(() => {
        this.memberList.forEach((member) => {
          const hasKey = Object.prototype.hasOwnProperty.call(member, "timer");
          const beKickOut = member.beKickOut;
          if (!hasKey || beKickOut || member.state === "CONNECTED") {
            member.timer = 0;
          } else {
            // console.log("现在的人员状态是。。", member.state);
            if (member.timer < this.connectingLimit && member.state === "CONNECTING") {
              member.timer++;
              member.timeout = false;
            } else {
              // console.log("进入了超时判断", member.state);
              if (member.state !== "DISCONNECTED") {
                member.timer = 0;
                member.timeout = true;
                member.state = "DISCONNECTED";
              }
            }
          }
        });
        this.$emit("update:memberList", JSON.parse(JSON.stringify(this.memberList)));
        console.log("%c memberList", "background: #00cc00; color: #fff; border-radius: 3px;padding:2px 5px", this.memberList);
      }, 1000);
    },
    memberSpeaking(id) {
      this.memberList.forEach((member) => {
        member.isSpeaking = member.tencentUserId === id;
      });
      this.$emit("update:memberList", JSON.parse(JSON.string(this.memberList)));
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  /* 设置滚动条的样式 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  /* 滚动槽 */
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    width: 6px;
    //background: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.3);
    //opacity: 0.15;
    border-radius: 3px;
  }
}
.call-container {
  width: 1366px;
  height: 872px;
  background: black;
  background-size: cover;
  position: absolute;
  z-index: 999;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  .header {
    width: 100%;
    height: 41px;
    background: #0e70ff;
    border-radius: 4px 4px 0px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
    position: relative;
    .item {
      margin-left: 16px;
    }
    .time {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
    }
    .timeTik {
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translate(0, -50%);
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
    }
    .icon {
      display: block;
      width: 16px;
      height: 16px;
      cursor: pointer;
      &.fullscreen {
        background: url("~@/assets/images/conversation/全屏.png") no-repeat;
        background-size: 100% 100%;
      }
      &.narrow {
        background: url("~@/assets/images/conversation/全屏.png") no-repeat;
        background-size: 100% 100%;
      }
      &.close {
        background: url("~@/assets/images/conversation/关闭.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .container {
    width: 100%;
    height: calc(100% - 41px - 56px);
    padding: 0 35px;
    display: grid;
    grid-auto-rows: 100%;
    grid-gap: 10px;
    &-3 {
      //划容器为三个1fr的列
      grid-template-columns: 1fr 1fr 1fr;
    }
    &-6 {
      grid-template-columns: repeat(3, 1fr);
      //grid-template-rows: repeat(2, 1fr);
      grid-auto-rows: 50%;
    }
    &-9 {
      grid-template-columns: repeat(3, 1fr);
      //grid-template-rows: repeat(3, 1fr);
      grid-auto-rows: 33.3%;
    }
    &-remote-only {
      grid-template-columns: 1fr;
    }
    &-C2C {
      grid-template-columns: 1fr 1fr;
    }
    &-pagination {
      padding: 0;
      grid-template-columns: repeat(2, 100%);
      grid-auto-rows: 100%;
      grid-gap: 0;
      overflow: hidden;
      position: relative;
      &-item {
        width: 100%;
        height: 100%;
        padding: 0 12px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 33.3%;
        z-index: 1;
      }
      &-arrow {
        display: block;
        position: absolute;
        width: 20px;
        height: 48px;
        cursor: pointer;
        z-index: 2;
        transform: translate(0, -50%);
        &-left {
          top: 50%;
          left: 12px;
          background: url("~@/assets/images/conversation/Arrow - Left Circle.png");
          background-size: 100% 100%;
        }
        &-right {
          top: 50%;
          right: 12px;
          background: url("~@/assets/images/conversation/Arrow - Right Circle.png");
          background-size: 100% 100%;
        }
      }
    }
    .stream-content {
      background: #2b2b2b;
      position: relative;
      width: 100%;
      border-radius: 8px 8px 8px 8px;
      overflow: hidden;
      &-audio {
        &-CONNECTED {
          &::before {
            display: none;
          }
        }
      }
      &-CONNECTING {
        &::before {
          content: " ";
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 80px;
          height: 80px;
          background: url("~@/assets/images/conversation/呼叫中、未接听、已挂断图标/呼叫中.png") no-repeat;
          background-size: 100% 100%;
          transform: translate(-50%, -50%);
        }
      }
      &-DISCONNECTED {
        &::before {
          content: " ";
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 80px;
          height: 80px;
          background: url("~@/assets/images/conversation/呼叫中、未接听、已挂断图标/已挂断.png") no-repeat;
          background-size: 100% 100%;
          transform: translate(-50%, -50%);
        }
      }
      //height: 691px;
      .info {
        //width: 58px;
        height: 28px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.6);
        padding: 0 6px;
        .name {
          font-size: 14px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.85);
        }
        .icon-hand-up {
          display: block;
          width: 16px;
          height: 16px;
          margin-left: 4px;
          background: url("~@/assets/images/conversation/举手.png") no-repeat;
          background-size: 100% 100%;
        }
        .micro-status {
          display: block;
          width: 16px;
          height: 16px;
          margin-left: 4px;
          &-on {
            background: url("~@/assets/images/conversation/语音开启.png") no-repeat;
            background-size: 100% 100%;
          }
          &-off {
            background: url("~@/assets/images/conversation/语音关闭.png") no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .el-avatar {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        .avatar {
          width: 100%;
          height: 100%;
          //border-radius: 50%;
          overflow: hidden;
          margin-right: 16px;
          background: #0e71ff;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
  &-show-right-panel {
    width: 1678px;
    .container {
      width: calc(100% - 340px);
    }
  }
  .right-panel {
    width: 340px;
    height: calc(100% - 41px);
    background: #1e1e1e;
    position: absolute;
    right: 0;
    top: 41px;
    z-index: 2;
    ::v-deep .el-tabs__header {
      margin-bottom: 0;
    }
    &-title {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      span {
        font-size: 20px;
        font-family: PingFang SC-Regular, PingFang SC, serif;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
      }
      .icon {
        display: block;
        width: 16px;
        height: 16px;
        cursor: pointer;
        &-close {
          background: url("~@/assets/images/conversation/关闭 1.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    &-bottom {
      width: 100%;
      height: 148px;
      background: #1e1e1e;
      border-top: 1px solid #2f2f2f;
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &-btn {
        width: 100%;
        height: 38px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #666666;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC, serif;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
        &:hover,
        &-active {
          background: rgba(255, 255, 255, 0.08);
        }
        &-full {
          width: 100%;
          height: 38px;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .buttons {
    position: absolute;
    z-index: 20;
    width: 70%;
    //top: 75%;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    margin: 0 15% 0 15%;
  }
  &-remote-only {
    width: 717px;
  }
  //&-full {
  //  .container {
  //    height: calc(100vh - 41px - 56px);
  //    .stream-content {
  //      height: calc(100vh - 41px - 56px);
  //    }
  //  }
  //}
}

.layout,
.accept,
.refuse,
.members,
.videoOn,
.videoOff,
.micOn,
.micOff {
  width: 70px;
  height: 47px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  //border-radius: 50%;
  cursor: pointer;
  text-align: center;
  margin-left: 5px;
  position: relative;
  &:hover,
  &-active {
    background: rgba(255, 255, 255, 0.1993);
    border-radius: 8px;
  }
  .icon {
    width: 18px;
    height: 18px;
  }
  .name {
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    line-height: 14px;
    width: 70px;
  }
  .layout-picker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 340px;
    height: 125px;
    background: #333438;
    border-radius: 4px 4px 4px 4px;
    padding: 0 24px;
    position: absolute;
    bottom: 50px;
    //left: -10px;
    .layout-type {
      width: 76px;
      height: 74px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      .layout-type-img {
        width: 76px;
        height: 52px;
        margin-bottom: 8px;
        &-3 {
          background: url("~@/assets/images/conversation/三宫格.png") no-repeat;
          background-size: 100% 100%;
        }
        &-6 {
          background: url("~@/assets/images/conversation/六宫格.png") no-repeat;
          background-size: 100% 100%;
        }
        &-9 {
          background: url("~@/assets/images/conversation/9宫格.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}

.accept {
  background-size: 60%;
  background: #0ac160 url("~@/assets/images/conversation/call.png") no-repeat;
}

.layout {
  .icon {
    background: url("~@/assets/images/conversation/switch.png") no-repeat;
    background-size: 100% 100%;
  }
}

.refuse {
  .icon {
    background: url("~@/assets/images/conversation/close.png") no-repeat;
    background-size: 100% 100%;
  }
}

.members {
  .icon {
    background: url("~@/assets/images/conversation/成员.png") no-repeat;
    background-size: 100% 100%;
  }
}

.videoOn {
  .icon {
    background: url("~@/assets/images/conversation/视频.png") no-repeat;
    background-size: 100% 100%;
  }
}

.videoOff {
  .icon {
    background: url("~@/assets/images/conversation/开启视频.png") no-repeat;
    background-size: 100% 100%;
  }
}

.micOn {
  .icon {
    background: url("~@/assets/images/conversation/静音.png") no-repeat;
    background-size: 100% 100%;
  }
}

.micOff {
  .icon {
    background: url("~@/assets/images/conversation/解除静音.png") no-repeat;
    background-size: 100% 100%;
  }
}

.audio-box {
  position: absolute;
  z-index: 20;
  width: 70%;
  top: 200px;
  display: flex;
  justify-content: center;
  margin: 0 15% 0 15%;
}
.aduio-call {
  box-sizing: border-box;
  width: 140px;
  height: 100px;
}
.audio-img {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 13px;
}
.micr-icon {
  cursor: pointer;
  font-size: 28px;
  /*display block*/
  /*text-align center*/
}
.nick-text {
  color: #dddddd;
  font-size: 12px;
  margin-right: 5px;
  vertical-align: super;
}

.duration {
  color: #fff;
  position: absolute;
  z-index: 20;
  width: 100%;
  top: 70%;
  display: flex;
  justify-content: center;
}

.mask {
  position: absolute;
  z-index: 10;
  background: #d8d8d8;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .space {
    .image {
      margin-left: 15%;
    }

    .notice {
      color: #888888;
    }
  }
}
.choose,
.call {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  width: 100%;
}
.title {
  margin: 25% 0 0 0;
  text-align: center;
  width: 100%;
  position: absolute;
  z-index: 10;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
}
.big {
  position: absolute;
  height: 100%;
  width: 100%;
}
.small {
  position: absolute;
  margin-left: 74.8%;
  z-index: 999;
  border-style: solid;
  border-width: 1px;
  border-color: #808080;
  height: 44.8%;
  width: 25.2%;
}
.big-group {
  height: 60vh;
  width: 100%;
}
.small-group {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  /*z-index 999*/
  /*border-style solid*/
  /*border-width 1px*/
  /*border-color #808080*/
  /*height 30%*/
  width: 100%;
  /*height 100%*/
}
.small-group_box {
  height: 100%;
}
.video-box {
  width: 33.3%;
  height: 25vh;
}
.room-member-list {
  width: 100%;
  height: 580px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 8px;
  &-item {
    width: 100%;
    height: 66px;
    border-radius: 8px 8px 8px 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    &:hover {
      background: #2b2b2b;
    }
    .info {
      display: flex;
      .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        //margin-right: 16px;
        background: #0e71ff;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        //margin-right: 8px;
        img {
          width: 100%;
          height: auto;
        }
      }
      .name {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 8px;
        .value {
          font-size: 12px;
          line-height: 20px;
          font-family: PingFang SC-Regular, PingFang SC, serif;
          font-weight: 400;
          color: #ffffff;
        }
        .tag {
          height: 20px;
          padding: 0 2px;
          background: #4c4c4c;
          border-radius: 4px 4px 4px 4px;
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC, serif;
          font-weight: 400;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .stream-controller {
      display: flex;
      align-items: center;
      .btn {
        width: 24px;
        height: 24px;
        cursor: pointer;
        margin-left: 16px;
        &-handup {
          background: url("~@/assets/images/conversation/举手.png") no-repeat;
          background-size: 100% 100%;
        }
        &-mute {
          background: url("~@/assets/images/conversation/静音1.png") no-repeat;
          background-size: 100% 100%;
        }
        &-unmute {
          background: url("~@/assets/images/conversation/开麦.png") no-repeat;
          background-size: 100% 100%;
        }
        &-videoOn {
          background: url("~@/assets/images/conversation/关闭摄像.png") no-repeat;
          background-size: 100% 100%;
        }
        &-videoOff {
          background: url("~@/assets/images/conversation/打开摄像.png") no-repeat;
          background-size: 100% 100%;
        }
        &-kick-out {
          background: url("~@/assets/images/conversation/移除.png") no-repeat;
          background-size: 100% 100%;
        }
        &-recall {
          background: url("~@/assets/images/conversation/拨通.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
::v-deep .el-tabs {
  .el-tabs__nav {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    width: 100%;
    .el-tabs__item {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      &.is-active {
        color: #0f71ff;
      }
    }
    .el-tabs__active-bar {
      background-color: #0f71ff;
    }
  }
  .el-tabs__nav-wrap::after {
    background-color: #2f2f2f;
  }
}
::v-deep .dialog-pick-up {
  background: transparent;
  border-radius: 8px;
  .el-dialog__header {
    height: 46px;
    background: #0f71ff;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #2f2f2f;
    padding: 0 16px;
    display: flex;
    align-items: center;
    .el-dialog__title {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC, serif;
      font-weight: 400;
      color: #ffffff;
    }
    .el-dialog__headerbtn {
      top: 15px;
      right: 16px;
      .el-dialog__close {
        color: #ffffff;
      }
    }
  }
  .el-dialog__body {
    background: #1e1e1e;
    padding: 16px;
    .transfer {
      width: 100%;
      height: 499px;
      display: grid;
      grid-template-columns: repeat(2, 50%);
      grid-auto-rows: 100%;
      background: #1e1e1e;
      border: 1px solid #333333;
      border-radius: 8px;
      &-left,
      &-right {
        height: 100%;
      }
      &-left {
        padding: 12px;
        &-query {
          margin-bottom: 12px;
          .el-input__inner {
            width: 100%;
            height: 38px;
            background: #000000;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #2b2b2b;
            color: #ffffff;
            &::placeholder {
              font-size: 14px;
              font-family: PingFang SC-Regular, PingFang SC, serif;
              font-weight: 400;
              color: #999999;
            }
          }
        }
        &-list {
          width: 100%;
          height: calc(100% - 50px);
          overflow-x: hidden;
          overflow-y: auto;
          &-item {
            width: 100%;
            height: 46px;
            border-radius: 8px 8px 8px 8px;
            //cursor: pointer;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            &:hover,
            &-active {
              width: 100%;
              background: #2b2b2b;
            }
            .info {
              display: flex;
              align-items: center;
              .avatar {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                overflow: hidden;
                //margin-right: 16px;
                background: #0e71ff;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                //margin-right: 8px;
                img {
                  width: 100%;
                  height: auto;
                }
              }
              .name {
                font-size: 12px;
                line-height: 20px;
                font-family: PingFang SC-Regular, PingFang SC, serif;
                font-weight: 400;
                color: #ffffff;
                margin-left: 12px;
              }
            }
          }
        }
      }
      &-right {
        border-left: 1px solid #333333;
        padding: 0 12px;
        &-header {
          width: 100%;
          height: 62px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .count {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC, serif;
            font-weight: 400;
            color: #ffffff;
          }
          .clear {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC, serif;
            font-weight: 400;
            color: #0f71ff;
            cursor: pointer;
          }
        }
        &-list {
          width: 100%;
          height: calc(100% - 62px);
          overflow-x: hidden;
          overflow-y: auto;
          &-item {
            width: 100%;
            height: 46px;
            border-radius: 8px 8px 8px 8px;
            //cursor: pointer;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            &:hover,
            &-active {
              width: 100%;
              background: #2b2b2b;
            }
            .info {
              display: flex;
              align-items: center;
              .avatar {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                overflow: hidden;
                //margin-right: 16px;
                background: #0e71ff;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                //margin-right: 8px;
                img {
                  width: 100%;
                  height: auto;
                }
              }
              .name {
                font-size: 12px;
                line-height: 20px;
                font-family: PingFang SC-Regular, PingFang SC, serif;
                font-weight: 400;
                color: #ffffff;
                margin-left: 12px;
              }
            }
            .icon-remove {
              width: 12px;
              height: 12px;
              display: block;
              cursor: pointer;
              background: url("~@/assets/images/conversation/关闭 2.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }
  .el-dialog__footer {
    background: #1e1e1e;
    height: 70px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .el-button {
      width: 120px;
      height: 38px;
      font-size: 14px;
      &--default {
        color: #ffffff;
        background: transparent;
        border: 1px solid #666666;
      }
    }
  }
}
</style>
