(() => {
  class UMPSDK {
    constructor(config) {
      this.appId = config.appId || "";
      this.appSecret = config.appSecret || "";
      this.url = config.url || ""; // 用于跨域代理
      this.style = config.style || ""; // 来电卡片的style
      this.callback = config.callback; // 非必填
      this.logCallback = config.logCallback; // 非必填
      this.accessToken = "";
      this.mdcIP = config.mdcIP || "";
      this.isdn = config.isdn || "";
      this.isdnPwd = config.isdnPwd || "";
      this.disAccount = config.disAccount || "";
      // 卡片样式集合
      this.cardStyle = {
        voiceStyle: "",
        videoStyle: "",
        monitorStyle: "",
      };
      // 计时器集合，数组对象{cid: cid, timer: timer}
      this.timer = {
        voiceTimer: [],
        videoTimer: [],
        monitorTimer: [],
        isCalling: false,
      };
      // yuv的player实例集合
      this.player = {};
      // 订阅群组isdn集合，对象数组{cid: cid, groupId: groupId}
      this.subscribGroupIsdn = [];
      // 分发对象的集合对象
      // 结示例{cid-xxx: [{isdn: isdn, isGroup: isGroup}]}
      this.dispatchArr = {};
      this.voice = {
        style: "",
      }; // 点呼业务
      this.video = {}; // 视频呼叫
      this.windowShare = {}; // 共享桌面
      this.monitor = {}; // 视频监控
      this.group = {
        style: "",
      }; // 群组业务
      this.msg = {
        fileName: "",
        authorizationHeader: "",
        //
        msgid: "",
      }; // 短彩信业务
      this.metting = {
        // 会议业务
        Attendees: "", // 主动入会的会议成员信息list数组
        isJoin: false, // 主动结束和被动入会离开状态锚点
        audience: false, // 会议静音状态锚点
        unJoinMetting: [], // 呼叫失败人员集合
        userInfoList: [], // 查询用户设备能力
        layoutStatus: false, // 分屏弹窗状态锚点
        macStatus: false,
        layoutType: [
          {
            id: 0,
            icon: "ump-screen-layout-1",
            name: "1屏",
            type: "CP_1_1",
            number: 1,
            pic: 1,
          },
          {
            id: 1,
            icon: "ump-screen-layout-2",
            name: "2屏",
            type: "CP_2_1",
            number: 2,
            pic: 2,
          },
          {
            id: 2,
            icon: "ump-screen-layout-3",
            name: "3屏",
            type: "CP_3_4",
            number: 3,
            pic: 16,
          },
          {
            id: 3,
            icon: "ump-screen-layout-4",
            name: "4屏",
            type: "CP_4_1",
            number: 4,
            pic: 4,
          },
          {
            id: 4,
            icon: "ump-screen-layout-5",
            name: "5屏",
            type: "CP_5_1",
            number: 5,
            pic: 5,
          },
          {
            id: 5,
            icon: "ump-screen-layout-6",
            name: "6屏",
            type: "CP_6_1",
            number: 6,
            pic: 9,
          },
          {
            id: 6,
            icon: "ump-screen-layout-7-1",
            name: "7屏",
            type: "CP_7_1",
            number: 7,
            pic: 16,
          },
          {
            id: 7,
            icon: "ump-screen-layout-7-2",
            name: "7屏",
            type: "CP_7_2",
            number: 7,
            pic: 16,
          },
          {
            id: 8,
            icon: "ump-screen-layout-8",
            name: "8屏",
            type: "CP_8_1",
            number: 8,
            pic: 16,
          },
          {
            id: 9,
            icon: "ump-screen-layout-9",
            name: "9屏",
            type: "CP_9_1",
            number: 9,
            pic: 9,
          },
          {
            id: 10,
            icon: "ump-screen-layout-10-1",
            name: "10屏",
            type: "CP_10_1",
            number: 10,
            pic: 16,
          },
          {
            id: 11,
            icon: "ump-screen-layout-10-2",
            name: "10屏",
            type: "CP_10_5",
            number: 10,
            pic: 16,
          },
          {
            id: 12,
            icon: "ump-screen-layout-13",
            name: "13屏",
            type: "CP_13_5",
            number: 13,
            pic: 16,
          },
          {
            id: 13,
            icon: "ump-screen-layout-16",
            name: "16屏",
            type: "CP_16_1",
            number: 16,
            pic: 16,
          },
        ], // 分屏模式
        choseLayoutType: "CP_4_1", // 存储用户选择的画面多屏布局模式，默认四屏
        memberList: [], // 多画面广播成员列表,
        girdNum: [1, 2, 3, 4], // 会场布局网格数量,
        gridClassName: ["grid0", "grid1", "grid2", "grid3"], // 布局的网格类名集合,
        setGridPerson: [], // 页面渲染的选中布局的入会人员
        setPageGridPerson: [], // 存储点击保存的选中布局的入会人员
        style: "",
        cid: "", // 会议计时器cid
      }; // 会议业务
      this.gis = {}; // gis订阅
      this.subscribe = {}; // 订阅用户
      this.department = {}; // 部门
      this.icp = {}; // 返回上层实例对象
      this.getTokenIntervalTimer = null; // 获取token计时器
      this.getTokenTime = 0; // 获取token的时间
      this.isUMPUserOut = false; // 用户是否被踢出
      this.wedcSDK = "";
      this.Emergency = []; //紧急组呼
      this.isUMPUserOutTimer = null; // 用户是否被踢出计时器
      this.downloadUrl =
        "http://171.221.254.50:8009/mspversion/";
      this.init();
    }
    // 初始化
    async init() {
      // 显示版本号
var sdkVersion = "022.650.191";
      // document.getElementById("ump-demo-version").innerHTML ="版本号：" + sdkVersion;
      if (!this.logCallback) {
        this.logCallback = (info) => {
          console.log(info);
        };
      }
      console.log(909090);
      this.initEnum();
      this.initICPSDK();
      // 本地缓存通话记录
      let phoneHistory = JSON.parse(localStorage.getItem("phoneHistory")) || [];
      localStorage.setItem("phoneHistory", JSON.stringify(phoneHistory));
      // 本地缓存会议记录
      let meetingHistory =
        JSON.parse(localStorage.getItem("meetingHistory")) || [];
      localStorage.setItem("meetingHistory", JSON.stringify(meetingHistory));
    }
    // 初始化icpsdk
    initICPSDK() {
      window.onfocus = () => {
        clearTimeout(this.isUMPUserOutTimer);
        this.isUMPUserOutTimer = setTimeout(() => {
          console.log("页面聚焦", this.isUMPUserOut, this);
          if (this.isUMPUserOut) {
            this.isUMPUserOut = false;
            this.initICPSDK();
          }
        }, 500);
      };
      let config = {
        serverWSPort: "8002",
        serverAddress: "171.221.254.50",
        serverHttpPort: "8002",
        debugMode: "false",
        mode: "wssflow",
        mediaType: "2",
        ringFlag: "0",
        ssl_enable: true,
        videoConfLocalWindow: false,
      };
      config["sdkStatusNotify"] = (data) => {
        console.log(data, "+++++++++++++++++++++++++++++");
        if (data.status === "0") {
          this.modifyMdcIp();
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "🚀等待udc登录，初始化icpsdk成功：" + JSON.stringify(data)
              )
            );
          }
        } else if (data.status === "1") {
          // if (this.callback) {
          //   this.callback('❗初始化icpsdk异常')
          // }
          this.showMessage(
            "❗通信插件异常，请点击【下载】后，进行【解压安装】，确认右下角MSP🌱点亮",
            "error",
            "showHrefID",
            "targetID"
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "❗初始化icpsdk异常：" + JSON.stringify(data)
              )
            );
          }
        } else if (data.status === "2") {
          // if (this.callback) {
          //   this.callback('❗初始化icpsdk异常')
          // }
          this.showMessage(
            "❗通信插件异常，请点击【下载】后，进行【解压安装】，确认右下角MSP🌱点亮",
            "error",
            "showHrefID",
            "targetID"
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "❗初始化icpsdk异常：" + JSON.stringify(data)
              )
            );
          }
        } else if (data.status === "3") {
          // if (this.callback) {
          //   this.callback('❗初始化icpsdk异常')
          // }
          this.showMessage(
            "❗通信插件异常，请点击【下载】后，进行【解压安装】，确认右下角MSP🌱点亮",
            "error",
            "showHrefID",
            "targetID"
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "❗初始化icpsdk异常：" + JSON.stringify(data)
              )
            );
          }
        } else {
          // if (this.callback) {
          //   this.callback('❗初始化icpsdk异常')
          // }
          this.showMessage(
            "❗通信插件异常，请点击【下载】后，进行【解压安装】，确认右下角MSP🌱点亮",
            "error",
            "showHrefID",
            "targetID"
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "❗初始化icpsdk异常：" + JSON.stringify(data)
              )
            );
          }
        }
      };
      this.wedcSDK = new ICPSDK(config);
      window.ICPSDK = this.wedcSDK;
      this.initSDKEvent();
    }
    // 修改mdcip
    modifyMdcIp() {
      cloudICP.dispatch.webSocket.getLocalIp({
        callback: (data) => {
          let currentIp = data.mdcip;
          console.log(
            this.wedcSDK.config.mspVersion,
            data.mspVersion,
            "*****************"
          );
          if (this.wedcSDK.config.mspVersion == data.mspVersion) {
            this.removeMsgDom();
          } else {
            this.downloadUrl =
              this.downloadUrl + data.mspVersion + "/eSDK_ICP_MSP.zip";
            this.showMessage(
              "❗通信插件异常，请点击【下载】后，进行【解压安装】，确认右下角MSP🌱点亮",
              "error",
              "showHrefID",
              "targetID"
            );
          }
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "当前地址：" + currentIp + "服务器地址：" + this.mdcIP
              )
            );
          }
          if (this.mdcIP && this.mdcIP !== currentIp) {
            cloudICP.dispatch.webSocket.ModifyMdcIp({
              mdcip: this.mdcIP,
              callback: (data) => {
                if (data.mdc_result === 0) {
                  if (this.logCallback) {
                    this.logCallback(
                      UMPSDK.logInfoFormat("🚀修改mdcip成功，初始化成功！")
                    );
                  }
                } else {
                  // if (this.callback) {
                  //   this.callback('❗修改mdcip失败')
                  // }
                  this.showMessage(
                    "修改mdcip失败，请重新安装插件，或联系管理员!!!",
                    "error",
                    "showHrefID"
                  );
                  if (this.logCallback) {
                    this.logCallback(
                      UMPSDK.logInfoFormat("❗修改mdcip失败，初始化失败！")
                    );
                  }
                }
              },
            });
          } else {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("🚀mdcip无需修改，初始化成功！")
              );
            }
          }
          // 根据传入disAccount指定参数，判断是否调用迪艾斯查询账户密码接口
          if (this.disAccount && this.disAccount.length > 0) {
            fetch("/oauth/v2/getUserInfoByDs", {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
                Accept: "application/json, text/plain, */*",
              },
              body: JSON.stringify({
                dsAccount: this.disAccount,
              }),
            })
              .then((response) => response.json())
              .then((data) => {
                if (data.data) {
                  this.showMessage("账号密码查询成功！", "success");
                  console.log("迪艾斯账号密码查询成功:", data);
                  this.isdn = data.data.isdn;
                  this.isdnPwd = data.data.password;
                  this.loginUdc();
                }
              })
              .catch((error) => {
                console.error("迪艾斯账号密码查询失败:", error);
                this.showMessage("账号密码查询失败！", "error");
              });
          } else {
            this.loginUdc();
          }
        },
      });
    }
    // 登录udc
    loginUdc() {
      console.log(
        this.isdn,
        this.isdnPwd,
        "查看迪艾斯账户密码是否赋值成功-unifiedLogin()"
      );
      cloudICP.dispatch.auth.unifiedLogin({
        user: this.isdn,
        password: this.isdnPwd,
        force: "true",
        callback: (rsp) => {
          if (rsp.rsp === "0") {
            this.initVoiceHandler();
            this.initVideoHandler();
            this.initWindowShare();
            this.initMonitorHandler();
            this.initGroupHandler();
            this.initMessageHandler();
            this.initMetingHandler();
            this.initGis();
            this.initSubscribeUserStatus();
            this.initQueryGroup();
            this.initDepartment();
            this.initIcp();
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("🚀登录udc成功" + JSON.stringify(rsp))
              );
              this.queryingTheConferenceStatus();
              // this.getUserInfo()
            }
            if (this.callback) {
              this.callback(rsp);
            }
          } else {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("❗登录udc失败" + JSON.stringify(rsp))
              );
            }
            if (this.callback) {
              this.callback(rsp);
            }
          }
        },
      });
    }
    //登出
    logout() {
      cloudICP.dispatch.auth.unifiedLogout({
        callback: (data) => {
          if (data.rsp == 0) {
            if (this.logCallback) {
              this.wedcSDK = null;
              window.ICPSDK = null;
              loadICPSDKScript();
              this.logCallback(
                UMPSDK.logInfoFormat("🚀退出udc成功" + JSON.stringify(data))
              );
              this.showMessage("🚀退出udc成功", "success");
            }
          } else {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("🚀退出登录udc失败" + JSON.stringify(data))
              );
              this.showMessage("🚀退出udc失败", "error");
            }
          }
        },
      });
    }
    // ==================================工具函数==================================
    /**
     * 执行注册事件
     * @param {Object} obj {eventType: string, eventName: string, callback: function}
     */
    static sdkRegister(obj) {
      const findIndex = UMPSDK.eventList.findIndex(
        (ite) =>
          ite.eventType === obj.eventType && ite.eventName === obj.eventName
      );
      if (findIndex !== -1) {
        UMPSDK.splice(findIndex, 1, obj);
      } else {
        UMPSDK.eventList.push(obj);
      }
    }
    sdkRegisterHandler(eventType, eventName, data) {
      const findItem = UMPSDK.eventList.find(
        (ite) => ite.eventType === eventType && ite.eventName === eventName
      );
      if (findItem && typeof findItem.callback === "function") {
        findItem.callback(data);
      }
    }

    // 处理时间格式 00:00:00
    static timeHandler(time) {
      if (time || time === 0) {
        const hours = Math.floor(time / (60 * 60));
        const minutes = Math.floor((time % (60 * 60)) / 60);
        const remainingSeconds = time % 60;
        return (
          (hours < 10 ? "0" + hours : hours) +
          ":" +
          (minutes < 10 ? "0" + minutes : minutes) +
          ":" +
          (remainingSeconds < 10 ? "0" + remainingSeconds : remainingSeconds)
        );
      } else {
        return "";
      }
    }
    // 格式化时间 YYYY=年2019 YY=年19 MM=月 DD=天 hh:时 mm:分 ss:秒
    static dateFormat(type, val) {
      const date = val
        ? new Date(/^[0-9]*$/g.test(val) ? Number(val) : val)
        : new Date();
      const YYYY = String(date.getFullYear());
      const YY = String(date.getFullYear()).substring(2);
      const m = date.getMonth() + 1;
      const MM = m > 9 ? String(m) : "0" + m;
      const d = date.getDate();
      const DD = d > 9 ? String(d) : "0" + d;
      const h = date.getHours();
      const hh = h > 9 ? String(h) : "0" + h;
      const $m = date.getMinutes();
      const mm = $m > 9 ? String($m) : "0" + $m;
      const s = date.getSeconds();
      const ss = s > 9 ? String(s) : "0" + s;
      const obj = { YYYY, YY, MM, DD, hh, mm, ss };
      return type.replace(
        /(YYYY)|(MM)|(DD)|(hh)|(mm)|(ss)/g,
        (key) => obj[key]
      );
    }
    // 格式化日志信息
    static logInfoFormat(text) {
      return `[${UMPSDK.dateFormat("YYYY-MM-DD hh:mm:ss")}]：${text}`;
    }
    //查询用户信息
    getUserInfo() {
      let param = {
        limit: "5000",
        callback: (data) => {
          if (data.rsp === "0") {
            this.metting.userInfoList = [...data.list];
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("查询用户信息" + JSON.stringify(data))
              );
            }
          } else {
            this.logCallback(
              UMPSDK.logInfoFormat("查询用户信息" + JSON.stringify(data))
            );
          }
        },
      };
      cloudICP.dispatch.query.queryUserListV1(param);
    }
    // ==================================工具函数==================================
    // ===================================枚举=====================================
    initEnum() {
      this.CommunicateStatusEnum = {
        "OnDialOutProceeding-2005": "连接中",
        "OnDialOutProceeding-3004": "连接中",
        "OnDialOutRinging-2006": "振铃中",
        "OnDialOutRinging-3005": "振铃中",
        "OnCallConnect-2003": "通话中",
        "OnCallConnect-2007": "通话中",
        "OnDialOutFailure-2013": "被叫忙",
        "OnDialOutFailure-2016": "没有权限外呼",
        "OnDialOutFailure-2017": "被叫没有应答，超时",
        "OnDialOutFailure-2018": "被叫号码不存在",
        "OnDialOutFailure-2024": "被叫号码未在线或被叫号码挂断呼叫",
        "OnDialOutFailure-2049": "对端不支持该操作",
        "OnDialOutFailure-2052": "被叫号码没有呼入权限",
        "OnDialOutFailure-2023": "对端不支持所需的音频格式",
        "OnDialOutFailure-2033": "远程断电",
        "OnDialOutFailure-2048": "本端不支持该操作",
        "OnDialOutFailure-3013": "对端忙",
        "OnDialOutFailure-3014": "没有视频点呼权限",
        "OnDialOutFailure-3015": "对端超时",
        "OnDialOutFailure-3016": "对端号码不存在",
        "OnDialOutFailure-3021": "对端未在线或被对端挂断呼叫",
        "OnDialOutFailure-3044": "本端不支持该操作",
        "OnDialOutFailure-3045":
          "对端不支持该操作，可能是没有权限，或者是不支持该分辨率",
        "OnDialOutFailure-3048": "对端没有权限",
        "OnDialInRinging-2002": "语音呼叫",
        "OnDialInRinging-3002": "视频呼叫",
        "OnConfDialInRinging-3002": "视频会议",
        "OnDialInRinging-3011": "视频分发",
        "OnSendDispSMSResult-1": "业务不支持，如对方不支持加密短信或无权限等",
        "OnSendDispSMSResult-2": "VPN权限非法",
        "OnSendDispSMSResult-3": "对方号码不存在",
        "OnSendDispSMSResult-5": "号码被锁定",
        "OnSendDispMMSResult-1": "业务不支持，如对方不支持加密短信或无权限等",
        "OnSendDispMMSResult-2": "VPN权限非法",
        "OnSendDispMMSResult-3": "对方号码不存在",
        "OnSendDispMMSResult-5": "号码被锁定",
        "OnSendDispMMSResult-6": "无效msgid",
        "OnVideoDispatchFailure-40097": "服务器端返回错误, 操作被调度机拒绝",
        "OnVideoDispatchFailure-40106": "已经存在，重复分发",
        "OnVideoDispatchFailure-40107": "该用户不存在",
        "OnVideoDispatchFailure-40108": "该用户没有注册",
        "OnVideoDispatchFailure-40109": "定时器调度失败",
        "OnVideoDispatchFailure-40110": "调度机转接失败",
        "OnVideoDispatchFailure-40117": "版本不匹配",
        "OnVideoDispatchFailure-40121": "目标正在通话中，拒绝调度台抢话",
        "OnVideoDispatchFailure-40122": "该视频源转发的数量已经超过系统限制",
        "OnVideoDispatchFailure-40124": "版本不支持",
        "OnVideoDispatchFailure-40126": "号码错误",
        "OnVideoDispatchFailure-40134": "本地IP地址无效",
        "OnVideoDispatchFailure-40151": "视频分发或转接失败：vpn不支持",
        "OnVideoDispatchFailure-40154": "转码繁忙，请尝试不转码发送",
        "OnVideoDispatchFailure-40155": "调度机取消转接未允许",
        "OnVideoDispatchFailure-40156": "调度机已完成取消转接",
        "OnVideoDispatchFailure-40157": "调度机取消转接失败",
        "OnVideoDispatchFailure-40158": "无权限",
        "OnVideoDispatchFailure-40159": "用户不支持",
        "OnVideoDispatchFailure-40164": "会话存在",
        "OnVideoDispatchFailure-40166": "操作不被接受，因为正在请求保持呼叫中",
        "OnVideoDispatchStatusNotify-4021": "connection",
        "OnVideoDispatchStatusNotify-4022": "calling",
        "OnVideoDispatchStatusNotify-4023": "holdup",
      };
    }
    // ===================================枚举=====================================
    // ==================================公共组件==================================
    /**
     * 消息提示
     * @param text 提示内容
     * @param type message的类型，可选success、warning、error
     */
    showMessage(text, type = "success", showHrefID, targetID) {
      const tipDomNum = $(".ump-sdk-message").length || 0;
      const targetDom = $(`#ump-sdk-message-${targetID}`);
      if (targetDom.length && targetID) return;
      const tipDom =
        $(`<div class="ump-sdk ump-sdk-message" id="ump-sdk-message-${targetID}" style="top: ${
          (tipDomNum + 1) * 40
        }px">
      <div class="ump-sdk-message-text-warpper">
      <div class="ump-sdk-message-img-${type}"></div>
      <div>${text}</div>
      </div>
      <div id="ump-sdk-message-${showHrefID}" class="ump-sdk-message-erds">MSP下载链接：<a target="_blank" href=${
          this.downloadUrl
        }>点击下载MSP</a></div>
      </div>`);
      $("body").append(tipDom);
      if (showHrefID && targetID) return;
      setTimeout(() => {
        tipDom.remove();
        const tipDomArr = Array.from(
          document.getElementsByClassName("ump-sdk-message")
        );
        tipDomArr.forEach((ite, idx) => {
          ite.style.top = `${(idx + 1) * 40}px`;
        });
      }, 3000);
    }
    removeMsgDom() {
      setTimeout(() => {
        const targetDom = document.getElementById("ump-sdk-message-targetID");
        if (targetDom) {
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat("🚗🚗🚗执行移除-检测版本匹配弹窗")
            );
          }
          console.log(
            targetDom,
            "=============检测版本匹配弹窗移除是否执行=========(获取节点成功)"
          );
          targetDom.remove();
        } else {
          console.log(
            targetDom,
            "=============检测版本匹配弹窗移除是否执行=========(获取节点失败)"
          );
        }
      }, 400);
    }
    createYuvPlayer(data, el) {
      const wsUrl = data["value"]["wssUrl"];
      const playerConfig = {
        wsUrl,
        el, //播放器挂载的 DOM
        sharpType: {
          width: 800,
          height: 450,
        },
        cid: data["value"]["cid"],
      };
      try{
        msp_player = new MSP_PLAYER(playerConfig);
      } catch(error) {
        console.log("msp_player",msp_player);
      }
      return msp_player;
    }
    // 拖动函数
    draggable(elementId) {
      const draggableElement = document.getElementById(elementId);
      let isDragging = false;
      let startX = 0;
      let startY = 0;
      draggableElement.addEventListener("mousedown", function (event) {
        if (isDraggingEnabled()) {
          isDragging = true;
          startX = event.clientX - draggableElement.offsetLeft;
          startY = event.clientY - draggableElement.offsetTop;
        }
      });
      document.addEventListener("mousemove", function (event) {
        if (isDragging) {
          var newX = event.clientX - startX;
          var newY = event.clientY - startY;
          draggableElement.style.left = newX + "px";
          draggableElement.style.top = newY + "px";
        }
      });
      document.addEventListener("mouseup", function () {
        isDragging = false;
      });
      function isDraggingEnabled() {
        // 添加你的条件判断逻辑来决定是否允许拖动
        // 返回 true 表示允许拖动，返回 false 表示禁用拖动
        return true;
      }
      return {
        disableDragging: function () {
          isDraggingEnabled = function () {
            return false;
          };
          draggableElement.style = ""; // 移除内联样式
        },
        enableDragging: function () {
          isDraggingEnabled = function () {
            return true;
          };
        },
      };
    }
    // ==================================公共组件==================================
    // 清除timer
    clearTimerHandler(type, cid) {
      const findItem = this.timer[type].find((ite) => ite.cid === cid);
      if (findItem) {
        clearInterval(findItem.timer);
      }
    }
    // 注册事件
    initSDKEvent() {
      let that = this;
      // ===========================MSPNotify媒体状态事件==================================
      // 开始共享桌面结果通知
      cloudICP.dispatch.event.register({
        eventType: "MSPNotify",
        eventName: "OnStartWindowShare",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("MSPNotify", "OnStartWindowShare", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "开始共享桌面结果通知OnStartWindowShare" + JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "0") {
            this.showMessage("开始共享桌面成功✔✔✔", "successs");
          } else if (data.rsp === "1") {
            this.showMessage(
              "开始共享桌面失败-未检测到本地摄像头❌❌❌",
              "error"
            );
          } else if (data.rsp === "3") {
            this.showMessage("开始共享桌面失败-会话cid 不存在❌❌❌", "error");
          } else if (data.rsp === "4") {
            this.showMessage("开始共享桌面失败-窗口不可见❌❌❌", "error");
          } else if (data.rsp === "6") {
            this.showMessage(
              "开始共享桌面失败-找不到指定的共享窗口名❌❌❌",
              "error"
            );
          }
        },
      });
      // 停止共享桌面结果通知（620版本未提供）
      // cloudICP.dispatch.event.register({
      //   eventType: 'MSPNotify',
      //   eventName: 'OnStopWindowShare',
      //   callback: (data)=>{
      //     // UMPSDK触发注册事件
      //     this.sdkRegisterHandler('VoiceNotify', 'OnUserStatusNotify', data)
      //     if (this.logCallback) {
      //       this.logCallback(
      //           UMPSDK.logInfoFormat('停止共享桌面结果通知OnStopWindowShare' + JSON.stringify(data))
      //       )
      //     }
      //   }
      // })
      // ===========================VoiceNotify语音状态事件==================================
      // 用户状态通知
      cloudICP.dispatch.event.register({
        eventType: "VoiceNotify",
        eventName: "OnUserStatusNotify",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("VoiceNotify", "OnUserStatusNotify", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "用户状态通知OnUserStatusNotify" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 注册外呼呼出事件
      cloudICP.dispatch.event.register({
        eventType: "VoiceNotify",
        eventName: "OnDialOutProceeding",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("VoiceNotify", "OnDialOutProceeding", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "呼出事件OnDialOutProceeding" + JSON.stringify(data)
              )
            );
          }
          // 语音点呼外呼
          if (data.rsp === "2005" && data.value.calltype === "voice") {
            this.openVoiceDialog(data, this.cardStyle.voiceStyle);
            // 向本地添加呼出记录
            let phoneHistory = JSON.parse(localStorage.getItem("phoneHistory"));
            data.value.startTime = UMPSDK.dateFormat("YYYY-MM-DD hh:mm:ss");
            data.value.status = true;
            data.value.callState = 0; // 呼出
            phoneHistory.push(data.value);
            localStorage.setItem("phoneHistory", JSON.stringify(phoneHistory));
          }
          // 视频点呼外呼
          if (data.rsp === "3004" && data.value.calltype === "video") {
            this.openVideoDialog(data, this.cardStyle.videoStyle);
          }
          // 监控发起
          if (data.rsp === "3004" && data.value.calltype === "monitor") {
            this.openMonitorDialog(data, this.cardStyle.monitorStyle);
          }
        },
      });
      // 注册呼出失败事件
      cloudICP.dispatch.event.register({
        eventType: "VoiceNotify",
        eventName: "OnDialOutFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("VoiceNotify", "OnDialOutFailure", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "呼出失败事件OnDialOutFailure" + JSON.stringify(data)
              )
            );
          }
          // 语音呼出失败
          if (data.value.calltype === "voice") {
            this.openVoiceDialog(data);
            setTimeout(() => {
              const voiceDom = $(`#ump-sdk-voice-out-dialog-${data.value.cid}`);
              this.timer.isCalling = false;
              voiceDom && voiceDom.remove();
            }, 10000);
            // 呼出失败，修改通话记录状态，并记录结束时间
            let phoneHistory = JSON.parse(localStorage.getItem("phoneHistory"));
            phoneHistory.map((item) => {
              if (item.cid === data.value.cid) {
                item.endTime = UMPSDK.dateFormat("YYYY-MM-DD hh:mm");
                item.status = false;
              }
            });
            localStorage.setItem("phoneHistory", JSON.stringify(phoneHistory));
          }
          // 视频呼出失败
          if (data.value.calltype === "video") {
            this.openVideoDialog(data);
            setTimeout(() => {
              const videoDom = $(`#ump-sdk-video-out-dialog-${data.value.cid}`);
              this.timer.isCalling = false;
              videoDom && videoDom.remove();
            }, 10000);
          }
          // 监控呼出失败
          if (data.value.calltype === "monitor") {
            this.openMonitorDialog(data);
          }
        },
      });
      // 注册呼出回铃事件
      cloudICP.dispatch.event.register({
        eventType: "VoiceNotify",
        eventName: "OnDialOutRinging",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("VoiceNotify", "OnDialOutRinging", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "呼出振铃事件OnDialOutRinging" + JSON.stringify(data)
              )
            );
          }
          // 语音点呼呼出振铃
          if (data.rsp === "2006" && data.value.calltype === "voice") {
            this.openVoiceDialog(data, this.voice.style);
          }
          // 视频点呼呼出振铃
          if (data.rsp === "3005" && data.value.calltype === "video") {
            this.openVideoDialog(data, this.voice.style);
          }
          // 监控呼出振铃
          if (data.rsp === "3005" && data.value.calltype === "monitor") {
            this.openMonitorDialog(data);
          }
        },
      });
      // 注册呼入振铃事件
      cloudICP.dispatch.event.register({
        eventType: "VoiceNotify",
        eventName: "OnDialInRinging",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("VoiceNotify", "OnDialInRinging", data);
          // 向本地添加呼入记录
          let phoneHistory = JSON.parse(localStorage.getItem("phoneHistory"));
          data.value.startTime = UMPSDK.dateFormat("YYYY-MM-DD hh:mm");
          data.value.status = true;
          data.value.callState = 1; // 呼入
          phoneHistory.push(data.value);
          localStorage.setItem("phoneHistory", JSON.stringify(phoneHistory));
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "呼入振铃事件OnDialInRinging" + JSON.stringify(data)
              )
            );
          }
          if (this.timer.isCalling) {
            const { cid, calltype } = data.value;
            switch (calltype) {
              case "voice":
                cloudICP.dispatch.voice.reject({
                  cid,
                  callback: (rsp) => {
                    if (this.logCallback) {
                      this.logCallback(
                        UMPSDK.logInfoFormat(
                          "拒接语音点呼" + JSON.stringify(rsp)
                        )
                      );
                      // 向本地添加拒听呼入记录
                      let phoneHistory = JSON.parse(
                        localStorage.getItem("phoneHistory")
                      );
                      phoneHistory.map((item) => {
                        if (item.cid === cid) {
                          item.endTime = UMPSDK.dateFormat("YYYY-MM-DD hh:mm");
                          item.status = false;
                        }
                      });
                      localStorage.setItem(
                        "phoneHistory",
                        JSON.stringify(phoneHistory)
                      );
                    }
                  },
                });
                break;
              case "video":
                cloudICP.dispatch.video.reject({
                  cid,
                  callback: (rsp) => {
                    if (this.logCallback) {
                      this.logCallback(
                        UMPSDK.logInfoFormat(
                          "拒接视频点呼" + JSON.stringify(rsp)
                        )
                      );
                    }
                  },
                });
                break;
              case "dispatch":
                cloudICP.dispatch.video.reject({
                  cid,
                  callback: (rsp) => {
                    if (this.logCallback) {
                      this.logCallback(
                        UMPSDK.logInfoFormat(
                          "拒接视频分发" + JSON.stringify(rsp)
                        )
                      );
                    }
                  },
                });
                break;
            }
            return;
          }
          this.callerCard(data);
        },
      });
      // 注册通话事件
      cloudICP.dispatch.event.register({
        eventType: "VoiceNotify",
        eventName: "OnCallConnect",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("VoiceNotify", "OnCallConnect", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "建立连接事件OnCallConnect" + JSON.stringify(data)
              )
            );
          }
          // 语音呼入或呼出
          if (
            ["2003", "2007"].includes(data.rsp) &&
            data.value.calltype === "voice"
          ) {
            this.openVoiceDialog(data, this.voice.style);
          }
          // 视频呼叫呼入或者呼出
          if (
            ["3003", "3006"].includes(data.rsp) &&
            data.value.calltype === "video"
          ) {
            this.openVideoDialog(data, this.cardStyle.videoStyle);
          }
          // 监控呼入或呼出连接
          if (
            ["3003", "3006"].includes(data.rsp) &&
            ["monitor", "dispatch"].includes(data.value.calltype)
          ) {
            this.openMonitorDialog(data, this.cardStyle.monitorStyle);
          }
        },
      });
      // 注册通话挂机事件
      cloudICP.dispatch.event.register({
        eventType: "VoiceNotify",
        eventName: "OnCallRelease",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("VoiceNotify", "OnCallRelease", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "通话挂机OnCallRelease" + JSON.stringify(data)
              )
            );
          }
          this.timer.isCalling = false;
          const callerCardDom = $(`#ump-sdk-caller-card-${data.value.cid}`);
          callerCardDom && callerCardDom.remove();
          // 语音非本端挂机
          if (data.rsp === "2009" && data.value.calltype === "voice") {
            this.clearTimerHandler("voiceTimer", data.value.cid);
            const voiceDom = $(`#ump-sdk-voice-out-dialog-${data.value.cid}`);
            voiceDom && voiceDom.remove();
            // 语音挂机，修改通话记录状态，并记录结束时间
            let phoneHistory = JSON.parse(localStorage.getItem("phoneHistory"));
            phoneHistory.map((item) => {
              if (item.cid === data.value.cid) {
                item.endTime = UMPSDK.dateFormat("YYYY-MM-DD hh:mm");
                item.status = true;
              }
            });
            localStorage.setItem("phoneHistory", JSON.stringify(phoneHistory));
          }
          if (data.rsp === "2010" && data.value.calltype === "voice") {
            // 语音挂机，修改通话记录状态，并记录结束时间
            let phoneHistory = JSON.parse(localStorage.getItem("phoneHistory"));
            phoneHistory.map((item) => {
              if (item.cid === data.value.cid) {
                item.endTime = UMPSDK.dateFormat("YYYY-MM-DD hh:mm");
                item.status = true;
              }
            });
            localStorage.setItem("phoneHistory", JSON.stringify(phoneHistory));
          }
          if (data.rsp === "2011" && data.value.calltype === "voice") {
            let phoneHistory = JSON.parse(localStorage.getItem("phoneHistory"));
            phoneHistory.map((item) => {
              if (item.cid === data.value.cid) {
                item.endTime = UMPSDK.dateFormat("YYYY-MM-DD hh:mm");
                item.status = false;
              }
            });
            localStorage.setItem("phoneHistory", JSON.stringify(phoneHistory));
          }
          // 视频呼叫非本端挂机
          if (data.rsp === "3008" && data.value.calltype === "video") {
            const videoOutDom = $(
              `#ump-sdk-video-out-dialog-${data.value.cid}`
            );
            videoOutDom && videoOutDom.remove();
            this.clearTimerHandler("videoTimer", data.value.cid);
            const videoDom = $(`#ump-sdk-video-box-${data.value.cid}`);
            videoDom && videoDom.remove();
            if (this.player[`player${data.value.cid}`]) {
              this.player[`player${data.value.cid}`].stop();
              this.player[`player${data.value.cid}`] = null;
              delete this.player[`player${data.value.cid}`];
            }
          }
          // 视频监控非本端挂机
          if (
            data.rsp === "3008" &&
            ["dispatch", "monitor"].includes(data.value.calltype)
          ) {
            const videoOutDom = $(
              `#ump-sdk-video-out-dialog-${data.value.cid}`
            );
            videoOutDom && videoOutDom.remove();
            this.clearTimerHandler("monitorTimer", data.value.cid);
            delete this.dispatchArr[data.value.cid];
            const monitorDom = $(
              `#ump-sdk-monitor-out-dialog-${data.value.cid}`
            );
            const dispatchDom = $(
              `#ump-sdk-monitor-out-dialog-dispatch-dialog-mask-${data.value.cid}`
            );
            monitorDom && monitorDom.remove();
            dispatchDom && dispatchDom.remove();
            if (this.player[`player${data.value.cid}`]) {
              this.player[`player${data.value.cid}`].stop();
              this.player[`player${data.value.cid}`] = null;
              delete this.player[`player${data.value.cid}`];
            }
          }
        },
      });
      // ===========================VoiceNotify语音状态事件==================================
      // ===========================VideoNotify视频分发相关==================================
      // 视频分发成功事件
      cloudICP.dispatch.event.register({
        eventType: "VideoNotify",
        eventName: "OnVideoDispatchSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "VideoNotify",
            "OnVideoDispatchSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "视频分发成功事件OnVideoDispatchSuccess" + JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "0") {
            this.showMessage("视频分发成功", "success");
          }
        },
      });
      // 视频分发成功事件
      cloudICP.dispatch.event.register({
        eventType: "VideoNotify",
        eventName: "OnVideoDispatchFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "VideoNotify",
            "OnVideoDispatchFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "视频分发失败事件OnVideoDispatchFailure" + JSON.stringify(data)
              )
            );
          }
          const des =
            this.CommunicateStatusEnum[`OnVideoDispatchFailure${data.rsp}`];
          this.showMessage("视频分发失败：" + des, "error");
        },
      });
      // 视频取消分发成功事件
      cloudICP.dispatch.event.register({
        eventType: "VideoNotify",
        eventName: "OnCancelVideoDispatchSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "VideoNotify",
            "OnCancelVideoDispatchSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "视频取消分发成功事件OnVideoDispatchSuccess" +
                  JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "0") {
            this.showMessage("视频取消分发成功", "success");
          }
        },
      });
      // 视频取消分发失败事件
      cloudICP.dispatch.event.register({
        eventType: "VideoNotify",
        eventName: "OnCancelVideoDispatchFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "VideoNotify",
            "OnCancelVideoDispatchFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "视频取消分发失败事件OnVideoDispatchFailure" +
                  JSON.stringify(data)
              )
            );
          }
          const des =
            this.CommunicateStatusEnum[`OnVideoDispatchFailure${data.rsp}`];
          this.showMessage("视频取消分发失败：" + des, "error");
        },
      });
      // 视频分发状态
      cloudICP.dispatch.event.register({
        eventType: "VideoNotify",
        eventName: "OnVideoDispatchStatusNotify",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "VideoNotify",
            "OnVideoDispatchStatusNotify",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "视频分发状态OnVideoDispatchStatusNotify" + JSON.stringify(data)
              )
            );
          }
          const status =
            this.CommunicateStatusEnum[
              `OnVideoDispatchStatusNotify-${data.rsp}`
            ];
          this.changeDispatchLiDomStatus(data, status);
        },
      });
      // ===========================VideoNotify视频分发相关==================================
      //===============================MsNotify短信相关======================================
      // 短信发送通知
      cloudICP.dispatch.event.register({
        eventType: "MsNotify",
        eventName: "OnSendDispSMSResult",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("MsNotify", "OnSendDispSMSResult", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "短信发送通知OnSendDispSMSResult" + JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "0") {
            this.showMessage("短信发送成功", "success");
          } else {
            const des =
              this.CommunicateStatusEnum[`OnSendDispSMSResult-${data.rsp}`];
            if (des) {
              this.showMessage("短信发送失败：" + des, "error");
            } else {
              this.showMessage("短信发送失败", "error");
            }
          }
        },
      });
      //短信接收
      cloudICP.dispatch.event.register({
        eventType: "MsNotify",
        eventName: "OnRecvDispSMSNotify",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("MsNotify", "OnRecvDispSMSNotify", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "短信接收通知OnRecvDispSMSNotify" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 彩信发送通知
      cloudICP.dispatch.event.register({
        eventType: "MsNotify",
        eventName: "OnSendDispMMSResult",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("MsNotify", "OnSendDispMMSResult", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "彩信发送通知OnSendDispMMSResult" + JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "0") {
            this.showMessage("彩信发送成功", "success");
          } else {
            const des =
              this.CommunicateStatusEnum[`OnSendDispMMSResult-${data.rsp}`];
            if (des) {
              this.showMessage("彩信发送失败：" + des, "error");
            } else {
              this.showMessage("彩信发送失败", "error");
            }
          }
        },
      });
      //彩信接收通知
      cloudICP.dispatch.event.register({
        eventType: "MsNotify",
        eventName: "OnRecvDispMMSNotify",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("MsNotify", "OnRecvDispMMSNotify", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "彩信接收通知OnRecvDispMMSNotify" + JSON.stringify(data)
              )
            );
          }
        },
      });
      //===============================MsNotify短信相关======================================
      //============================GroupCallNotify群组相关==================================
      // 注册组呼开始事件
      cloudICP.dispatch.event.register({
        eventType: "GroupCallNotify",
        eventName: "OnTalkingGroupCallPTTStart",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "GroupCallNotify",
            "OnTalkingGroupCallPTTStart",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "组呼开始OnTalkingGroupCallPTTStart" + JSON.stringify(data)
              )
            );
          }
          this.Emergency.push("普通组呼");
          this.openGroupDialog(data, this.group.style);
          this.subscribGroupIsdn.forEach((ite) => {
            if (ite.groupId === data.value.grpid) {
              ite.cid = data.value.cid;
            }
          });
        },
      });
      // 注册紧急组呼开始事件
      cloudICP.dispatch.event.register({
        eventType: "GroupCallNotify",
        eventName: "OnTalkingGourpEmergencyCallStart",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "GroupCallNotify",
            "OnTalkingGourpEmergencyCallStart",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "紧急组呼开始OnTalkingGourpEmergencyCallStart" +
                  JSON.stringify(data)
              )
            );
          }
          this.Emergency.push("紧急组呼");
          this.openGroupDialog(data, this.group.style);
          this.subscribGroupIsdn.forEach((ite) => {
            if (ite.groupId === data.value.grpid) {
              ite.cid = data.value.cid;
            }
          });
        },
      });
      // 注册组呼发起失败事件
      cloudICP.dispatch.event.register({
        eventType: "GroupCallNotify",
        eventName: "OnTalkingGroupCallFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "GroupCallNotify",
            "OnTalkingGroupCallFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "组呼发起失败OnTalkingGroupCallFailure" + JSON.stringify(data)
              )
            );
          }
          this.showMessage("组呼发起失败", "error");
        },
      });
      // 注册组呼抢权或放权失败事件
      cloudICP.dispatch.event.register({
        eventType: "GroupCallNotify",
        eventName: "OnTalkingGroupCallPTTFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "GroupCallNotify",
            "OnTalkingGroupCallPTTFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "组呼抢权或放权失败OnTalkingGroupCallPTTFailure" +
                  JSON.stringify(data)
              )
            );
          }
          this.showMessage("组呼抢权或放权失败", "error");
        },
      });
      // 注册组呼权限更新事件
      cloudICP.dispatch.event.register({
        eventType: "GroupCallNotify",
        eventName: "OnTalkingGroupCallPTTNotify",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "GroupCallNotify",
            "OnTalkingGroupCallPTTNotify",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "组呼权限更新OnTalkingGroupCallPTTNotify" + JSON.stringify(data)
              )
            );
          }
          this.openGroupDialog(data, this.group.style);
        },
      });
      // 注册组呼资源通知
      cloudICP.dispatch.event.register({
        eventType: "GroupCallNotify",
        eventName: "OnGroupCallStatusNotify",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "GroupCallNotify",
            "OnGroupCallStatusNotify",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "组呼资源通知OnGroupCallStatusNotify" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 注册组呼空闲事件
      cloudICP.dispatch.event.register({
        eventType: "GroupCallNotify",
        eventName: "OnTalkingGroupCallPTTIdle",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "GroupCallNotify",
            "OnTalkingGroupCallPTTIdle",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "组呼空闲OnTalkingGroupCallPTTIdle" + JSON.stringify(data)
              )
            );
          }
          this.Emergency = [];
          this.openGroupDialog(data, this.group.style);
        },
      });
      // 注册组呼抢权或放权成功事件
      cloudICP.dispatch.event.register({
        eventType: "GroupCallNotify",
        eventName: "OnTalkingGroupCallPTTSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "GroupCallNotify",
            "OnTalkingGroupCallPTTSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "组呼抢权或放权成功OnTalkingGroupCallPTTSuccess" +
                  JSON.stringify(data)
              )
            );
          }
          this.openGroupDialog(data, this.group.style);
        },
      });
      //============================PhoneConfNotify会议相关==================================
      // 增加与会成员成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnAddConfMembersSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnAddConfMembersSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "增加与会成员成功OnAddConfMembersSuccess" + JSON.stringify(data)
              )
            );
            that.showMessage(
              "增加与会成员成功,请等待用户接听📞📞📞",
              "success"
            );
          }
        },
      });
      // 增加与会成员失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnAddConfMembersFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnAddConfMembersFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "增加与会成员失败OnAddConfMembersFailure" + JSON.stringify(data)
              )
            );
            that.showMessage(
              `❌❌❌增加与会成员失败,错误码：${data.rsp}`,
              "error"
            );
          }
        },
      });
      // 创建音视频会议成功通知
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnCreateConfSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnCreateConfSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "音视频会议创建成功OnCreateConfSuccess" + JSON.stringify(data)
              )
            );
          }
          this.metting.infoMation = data;
        },
      });
      // 创建音视频会议失败通知
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnCreateConfFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnCreateConfFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "音视频会议创建失败OnCreateConfFailure" + JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "-40205") {
            this.showMessage("音视频会议SMC接口调用失败", "error");
          } else if (data.rsp === "-40200") {
            this.showMessage("会议不存在", "error");
          } else if (data.rsp === "-40206") {
            this.showMessage("会议系统断开", "error");
          } else if (data.rsp === "-40204") {
            this.showMessage("正在创建会议", "error");
          } else if (data.rsp === "-40203") {
            this.showMessage("不是会议主席", "error");
          } else if (data.rsp === "-40202") {
            this.showMessage("未加入会议", "error");
          } else {
          }
        },
      });
      // 会议状态通知
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnConfStatusNotify",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnConfStatusNotify",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "会议状态通知OnConfStatusNotify" + JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "0") {
            this.metting.Attendees = Object.assign({}, data.value);
            let confMembersList = data.value.confMembersStatus;
            this.metting.memberList = [];
            $(".ump-sdk-metting-right-userList-top").remove();
            if (confMembersList && confMembersList.length > 0) {
              confMembersList.map((items, index) => {
                // 将主持人置顶
                if (items.number == data.value.confStatus.chair) {
                  confMembersList.unshift(confMembersList.splice(index, 1)[0]);
                }
                if (items.participantStatus === "Connected") {
                  // 收集入会人员用于多屏广播
                  let result = this.metting.memberList.every((item) => {
                    return item.number !== items.number;
                  });
                  if (result) {
                    this.metting.memberList.push(items);
                  }
                }
              });
              this.metting.unJoinMetting = [];
              confMembersList.forEach((item, index) => {
                if (item.participantStatus === "Disconnected") {
                  // 获取未入会成员集合
                  this.metting.unJoinMetting.push(item.number);
                }
                const Dom = $(`<div class="ump-sdk-metting-right-userList-top">
               <div class="ump-sdk-metting-right-userList-icon"></div>
               <div class="ump-sdk-metting-right-userList-Emcee ump-sdk-metting-right-userList-Emcee-${item.number}"><span class="ump-sdk-metting-right-user-Emcee-${item.number}">主持人</span>（<span class="ump-sdk-metting-right-userList-Emcee-isdn">${item.number}</span>）</div>
               <div class="ump-sdk-metting-right-userList-Horne ump-sdk-metting-right-userList-Horne-${item.number}"></div>
               <div class="ump-sdk-metting-right-userList-MIC ump-sdk-metting-right-userList-MIC-${item.number}" isdn="${item.number}" chair="${data.value.confStatus.chair}" title="取消静音"></div>
               <div class="ump-sdk-metting-right-userList-talking ump-sdk-metting-right-userList-talking-${item.number}" isdn="${item.number}" chair="${data.value.confStatus.chair}" title="开启静音"></div>
               <div class="ump-sdk-metting-right-userList-unconnected ump-sdk-metting-right-userList-unconnected-${item.number}" title="成员离会"></div>
               <div class="ump-sdk-meeting-right-userList-menu ump-sdk-meeting-right-userList-menu-${item.number}" index="${index}">
                <div class="ump-sdk-metting-right-meetingContextMenu-box" index="${index}">
                  <ul class="ump-sdk-metting-right-meetingContextMenu-ul">
                     <li class="ump-sdk-metting-right-meetingContextMenu-li ump-sdk-metting-right-meetingContextMenu-li-chairperson" isdn="${item.number}">转让主席</li>
                     <li class="ump-sdk-metting-right-meetingContextMenu-li ump-sdk-metting-right-meetingContextMenu-li-Recall" isdn="${item.number}">重新呼叫</li>
                     <li class="ump-sdk-metting-right-meetingContextMenu-li ump-sdk-metting-right-meetingContextMenu-li-Remove" isdn="${item.number}">移除会场</li>
                     <li style="display: none" class="ump-sdk-metting-right-meetingContextMenu-li" isdn="${item}">挂断会议</li>
                  </ul>
                </div>
               </div>
                </div>`);
                $("#ump-sdk-metting-right-userList-otherUser").append(Dom);
                // 获取dom节点，根据会议状态通知，更新dom节点渲染内容
                const Emcee = document.getElementsByClassName(
                  `ump-sdk-metting-right-user-Emcee-${item.number}`
                )[0];
                if (Emcee) {
                  if (item.number == data.value.confStatus.chair) {
                    // 会议主席
                    Emcee.style.display = "block";
                  } else {
                    Emcee.style.display = "none";
                  }
                }
                const chairperson = document.getElementsByClassName(
                  `ump-sdk-meeting-right-userList-menu-${item.number}`
                )[0];
                if (chairperson) {
                  if (
                    data.value.confStatus.chair === this.isdn &&
                    item.number !== this.isdn
                  ) {
                    chairperson.style.display = "block";
                  } else {
                    chairperson.style.display = "none";
                  }
                }
                const Horne = document.getElementsByClassName(
                  `ump-sdk-metting-right-userList-Horne-${item.number}`
                )[0];
                if (Horne) {
                  if (item.number == data.value.confStatus.broadcast) {
                    // 正在被广播的成员
                    Horne.style.display = "block";
                  } else {
                    Horne.style.display = "none";
                  }
                }

                const MIC = document.getElementsByClassName(
                  `ump-sdk-metting-right-userList-MIC-${item.number}`
                )[0];
                const talking = document.getElementsByClassName(
                  `ump-sdk-metting-right-userList-talking-${item.number}`
                )[0];
                if (MIC && talking) {
                  if (item.isMute == 1) {
                    // 是否静音
                    MIC.style.display = "block";
                    talking.style.display = "none";
                  } else {
                    MIC.style.display = "none";
                    talking.style.display = "block";
                  }
                  if (item.participantStatus === "Disconnected") {
                    MIC.style.display = "none";
                    talking.style.display = "none";
                  }
                }
                const unconnected = document.getElementsByClassName(
                  `ump-sdk-metting-right-userList-unconnected-${item.number}`
                )[0];
                if (unconnected) {
                  if (item.participantStatus === "Disconnected") {
                    // 是否入会
                    unconnected.style.display = "block";
                  } else {
                    unconnected.style.display = "none";
                  }
                  const audio = document.getElementsByClassName(
                    "ump-sdk-metting-audio"
                  )[0];
                  const mute = document.getElementsByClassName(
                    "ump-sdk-metting-mute"
                  )[0];
                  if (item.number == this.isdn) {
                    if (item.isMute === "1") {
                      this.metting.MicTarget = false;
                      audio.style.display = "none";
                      mute.style.display = "block";
                    } else {
                      this.metting.MicTarget = true;
                      audio.style.display = "block";
                      mute.style.display = "none";
                    }
                  }
                }
                const mettingOnlineDom = document.getElementById(
                  "ump-sdk-metting-right-participant-online"
                );
                const mettingTotleDom = document.getElementById(
                  "ump-sdk-metting-right-participant-totle"
                );
                if (mettingTotleDom) {
                  mettingTotleDom.innerText = confMembersList.length
                    ? confMembersList.length
                    : 0;
                }
                if (mettingOnlineDom) {
                  mettingOnlineDom.innerText = confMembersList.length
                    ? confMembersList.length - this.metting.unJoinMetting.length
                    : 0;
                }
              });
            }
            let dom = document.getElementById("ump-sdk-metting-endConference"); //根据Id获取元素
            if (this.isdn == data.value.confStatus.chair) {
              if (dom) {
                dom.innerText = "结束会议";
              }
            } else {
              if (dom) {
                dom.innerText = "离开会议";
              }
            }
            // 根据本端是否为主席进行模块展示和隐藏
            const meetRightActionDom = document.getElementsByClassName(
              "ump-sdk-metting-right-userList-fotterAction"
            )[0];
            const meetlayoutSetDom = document.getElementsByClassName(
              "ump-sdk-metting-headerInfo-TimesBox-videoLayout-set"
            )[0];
            const meetActiveDom = document.getElementsByClassName(
              "ump-sdk-metting-requests"
            )[0];
            if (data.value.confStatus.chair !== this.isdn) {
              meetRightActionDom.style.display = "none";
              meetlayoutSetDom.style.display = "none";
              meetActiveDom.style.display = "none";
            } else {
              if (meetRightActionDom && meetlayoutSetDom && meetActiveDom) {
                meetRightActionDom.style.display = "flex";
                meetlayoutSetDom.style.display = "block";
                meetActiveDom.style.display = "block";
              }
            }
          }
        },
      });
      // 结束会议成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnEndConfSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("PhoneConfNotify", "OnEndConfSuccess", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "结束会议成功OnEndConfSuccess" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 结束会议失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnEndConfFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("PhoneConfNotify", "OnEndConfFailure", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "结束会议失败OnEndConfFailure" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 订阅会议成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnSubscribeConfSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnSubscribeConfSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "订阅会议成功OnSubscribeConfSuccess" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 订阅会议失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnSubscribeConfFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnSubscribeConfFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "订阅会议失败OnSubscribeConfFailure" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 去订阅会议成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnUnsubscribeConfSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnUnsubscribeConfSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "去订阅会议成功OnUnsubscribeConfSuccess" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 去订阅会议失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnUnsubscribeConfFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnUnsubscribeConfFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "去订阅会议失败OnUnsubscribeConfFailure" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 会议呼出回铃事件
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnConfDialOutRinging",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnConfDialOutRinging",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "会议呼出回铃事件OnConfDialOutRinging" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 会议呼入振铃事件
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnConfDialInRinging",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnConfDialInRinging",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "会议呼入振铃事件OnConfDialInRinging" + JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "3002") {
            // 视频会议呼入振铃事件
            this.callerCard(data);
          }
        },
      });
      // 会议通话事件
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnConfConnect",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("PhoneConfNotify", "OnConfConnect", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "会议通话事件OnConfConnect" + JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "3006" || data.rsp === "2007") {
            // 视频呼入会议通话事件
            this.openMettingDialog(data, this.metting.style);
            let dom = document.getElementById("ump-sdk-metting-endConference"); //根据Id获取元素
            if (dom) {
              dom.innerText = "离开会议";
            }
          }
          if (data.rsp === "3003" || data.rsp === "2003") {
            // 视频呼出会议通话事件
            this.openMettingDialog(data, this.metting.style);
            console.log(
              this.metting.infoMation,
              "==========infoMation========="
            );
            let dom = document.getElementById("ump-sdk-metting-endConference"); //根据Id获取元素
            if (dom && this.metting.isJoin) {
              dom.innerText = "结束会议";
            }
            // this.conferenceVideoWall(data) // 广播会议
          }
          let meetingHistory = JSON.parse(
            localStorage.getItem("meetingHistory")
          );
          data.value.creater = `${data.value.caller} 创建会议`;
          data.value.startTime = UMPSDK.dateFormat("YYYY-MM-DD hh:mm");
          meetingHistory.push(data.value);
          localStorage.setItem(
            "meetingHistory",
            JSON.stringify(meetingHistory)
          );
        },
      });
      // 会议释放事件
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnConfRelease",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("PhoneConfNotify", "OnConfRelease", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "会议释放事件OnConfRelease" + JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "3008") {
            // 视频非本端挂机事件
            UMPSDK.logInfoFormat("视频非本端挂机事件" + JSON.stringify(data));
            const dom = document.getElementById(
              `ump-sdk-metting-out-dialog-${data.value.confId}`
            );
            if (dom) {
              dom.remove();
            }
            this.showMessage("会议已结束 ❗❗❗", "warning");
          }
          if (data.rsp === "3009") {
            // 视频本端挂机事件
            UMPSDK.logInfoFormat("视频本端挂机事件" + JSON.stringify(data));
          }
          if (data.rsp === "3010") {
            // 视频请求被取消
            UMPSDK.logInfoFormat("视频本端挂机事件" + JSON.stringify(data));
          }
          if (data.rsp === "3013") {
            // 视频对端正忙
            UMPSDK.logInfoFormat("视频对端正忙" + JSON.stringify(data));
          }
        },
      });
      // 会议通话失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnConfFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("PhoneConfNotify", "OnConfFailure", data);
          if (this.logCallback) {
            const des =
              this.CommunicateStatusEnum[`OnDialOutFailure-${data.rsp}`];
            this.logCallback(
              UMPSDK.logInfoFormat(
                `${des}-OnConfFailure` + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 静音会议成员成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnMuteConfMemberSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnMuteConfMemberSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "静音会议成员成功OnMuteConfMemberSuccess" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 静音会议成员失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnMuteConfMemberFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnMuteConfMemberFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "静音会议成员失败OnMuteConfMemberFailure" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 取消静音会议成员成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnUnmuteConfMemberSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnUnmuteConfMemberSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "取消静音会议成员成功OnUnmuteConfMemberSuccess" +
                  JSON.stringify(data)
              )
            );
          }
        },
      });
      // 取消静音会议成员失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnUnmuteConfMemberFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnUnmuteConfMemberFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "取消静音会议成员失败OnUnmuteConfMemberFailure" +
                  JSON.stringify(data)
              )
            );
          }
        },
      });
      // 静音会议成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnMuteConfSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("PhoneConfNotify", "OnMuteConfSuccess", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "静音会议成功OnMuteConfSuccess" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 静音会议失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnMuteConfFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("PhoneConfNotify", "OnMuteConfFailure", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "静音会议失败OnMuteConfFailure" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 取消静音会议成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnUnmuteConfSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnUnmuteConfSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "取消静音会议成功OnUnmuteConfSuccess" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 取消静音会议失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnUnmuteConfFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnUnmuteConfFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "取消静音会议失败OnUnmuteConfFailure" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 查看调度员所在的会议信息结果
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnQueryConfListByAttendeeResult",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnQueryConfListByAttendeeResult",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "查看调度员所在的会议信息结果OnQueryConfListByAttendeeResult" +
                  JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "0") {
            let list = data.value.confInfos;
            if (list.length > 0) {
              list.forEach((item) => {
                // 清空用户未结束会议，然后再创建新的会议
                let param = {
                  confId: item.confId,
                  callback: function (data) {},
                };
                console.log(
                  "清空用户未结束会议，然后再创建新的会议❌❌❌❌❌❌"
                );
                cloudICP.dispatch.conf.endConf(param);
              });
            }
          }
        },
      });
      // 查询会议列表结果-成功事件
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnRecvConfListNotifySuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnRecvConfListNotifySuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "查询会议列表结果-成功事件OnRecvConfListNotifySuccess" +
                  JSON.stringify(data)
              )
            );
          }
          if (data.rsp === "0") {
            if (data.value.length > 0) {
            } else {
              this.showMessage("该会议的详细信息为空", "error");
            }
          }
        },
      });
      // 查询会议列表结果-失败事件
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnRecvConfListNotifyFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnRecvConfListNotifyFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "查询会议列表结果-失败事件OnRecvConfListNotifyFailure" +
                  JSON.stringify(data)
              )
            );
          }
        },
      });
      // 广播与会者成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnBroadcastConfMemberSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnBroadcastConfMemberSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "广播与会者成功OnBroadcastConfMemberSuccess" +
                  JSON.stringify(data)
              )
            );
          }
        },
      });
      // 广播与会者失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnBroadcastConfMemberFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnBroadcastConfMemberFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "广播与会者失败OnBroadcastConfMemberFailure" +
                  JSON.stringify(data)
              )
            );
          }
        },
      });
      // 重呼成员成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnCallConfMemberSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnCallConfMemberSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "重呼成员成功OnCallConfMemberSuccess" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 重呼成员失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnCallConfMemberFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnCallConfMemberFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "重呼成员失败OnCallConfMemberFailure" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 切换会议主席成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnConfSetChairmanSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnConfSetChairmanSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "切换会议主席成功OnConfSetChairmanSuccess" +
                  JSON.stringify(data)
              )
            );
          }
        },
      });
      // 切换会议主席失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnConfSetChairmanFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnConfSetChairmanFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "切换会议主席失败OnConfSetChairmanFailure" +
                  JSON.stringify(data)
              )
            );
          }
        },
      });
      // 删除成员成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnDelConfMembersSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnDelConfMembersSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "删除成员成功OnDelConfMembersSuccess" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 删除成员失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnDelConfMembersFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnDelConfMembersFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "删除成员失败OnDelConfMembersFailure" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 广播多画面成功
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnBroadcastMixPictureSuccess",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnBroadcastMixPictureSuccess",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "广播多画面成功OnBroadcastMixPictureSuccess" +
                  JSON.stringify(data)
              )
            );
          }
        },
      });
      // 广播多画面失败
      cloudICP.dispatch.event.register({
        eventType: "PhoneConfNotify",
        eventName: "OnBroadcastMixPictureFailure",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "PhoneConfNotify",
            "OnBroadcastMixPictureFailure",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "广播多画面失败OnBroadcastMixPictureFailure" +
                  JSON.stringify(data)
              )
            );
          }
        },
      });
      //============================ModuleNotify模块状态通知==================================
      // 模块掉线
      cloudICP.dispatch.event.register({
        eventType: "ModuleNotify",
        eventName: "OnDisConnection",
        callback: (data) => {
          this.removeMsgDom();
          console.log("模块掉线", data);
          this.isUMPUserOut = true;
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("ModuleNotify", "OnDisConnection", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "模块掉线OnDisConnection" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 模块链接成功
      cloudICP.dispatch.event.register({
        eventType: "ModuleNotify",
        eventName: "OnConnection",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("ModuleNotify", "OnConnection", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "模块连接成功OnConnection" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 用户被踢出
      cloudICP.dispatch.event.register({
        eventType: "ModuleNotify",
        eventName: "OnDispatchKickOutNotifyEvent",
        callback: (data) => {
          console.log("用户被踢出", data);
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "ModuleNotify",
            "OnDispatchKickOutNotifyEvent",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "用户被踢出OnDispatchKickOutNotifyEvent" + JSON.stringify(data)
              )
            );
          }
        },
      });
      // 账号被删除
      cloudICP.dispatch.event.register({
        eventType: "ModuleNotify",
        eventName: "OnDeleteAccountNotify",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler(
            "ModuleNotify",
            "OnDeleteAccountNotify",
            data
          );
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "账号被删除OnDeleteAccountNotify" + JSON.stringify(data)
              )
            );
          }
        },
      });
      //============================ModuleNotify模块状态通知==================================

      //============================GisNotify-GIS状态通知==================================
      // GIS上报通知
      cloudICP.dispatch.event.register({
        eventType: "GisNotify",
        eventName: "OnRecvGISNotify",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("GisNotify", "OnRecvGISNotify", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "GIS上报通知OnRecvGISNotify" + JSON.stringify(data)
              )
            );
          }
        },
      });

      cloudICP.dispatch.event.register({
        eventType: "GisNotify",
        eventName: "OnRecvGISTrackNotify",
        callback: (data) => {
          // UMPSDK触发注册事件
          this.sdkRegisterHandler("GisNotify", "OnRecvGISTrackNotify", data);
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "终端gis历史轨迹通知OnRecvGISNotify" + JSON.stringify(data)
              )
            );
          }
        },
      });
      //============================GisNotify-GIS状态通知==================================
    }
    // 来电卡片
    callerCardStyle(style) {
      this.voice.style = style ? style : "";
      this.cardStyle.voiceStyle = style ? style : "";
    }
    callerCard(data) {
      this.timer.isCalling = true;
      const style = this.voice.style;
      const cardDom = $(
        `<div class="ump-sdk ump-sdk-communicate-card ump-sdk-caller-card" style="background:${
          style.bgColor
        };right:${style.posX};bottom:${style.posY};width:${
          style.width
        };height:${style.height};border-color:${style.borderColor}"
        }" id=${"ump-sdk-caller-card-" + data.value.cid}>
          <div class="ump-sdk-caller-card-title">${
            data.value.calltype === "dispatch"
              ? data.value.src
              : data.value.caller
          }</div>
          <div class="ump-sdk-caller-card-tip" data-time="0">${
            this.CommunicateStatusEnum[data.eventName + "-" + data.rsp]
          }-来电</div>
          <div class="ump-sdk-caller-card-bottom">
            <div class="ump-sdk-caller-card-answer"></div>
            <div class="ump-sdk-caller-card-hang-up"></div>
          </div>
        </div>`
      );
      $("body").append(cardDom);
      $(".ump-sdk-caller-card-answer").click(() => {
        cardDom.remove();
        // 语音呼入接听场景
        if (data.rsp === "2002") {
          this.createVoiceDialogDom(data, this.cardStyle.voiceStyle);
          cloudICP.dispatch.voice.answer({
            cid: data.value.cid,
            callback: (rsp) => {
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat("语音接听来电" + JSON.stringify(rsp))
                );
              }
            },
          });
        }
        // 视频呼入接听场景
        if (data.rsp === "3002") {
          if (data.eventName === "OnConfDialInRinging") {
            // 如果事件类型是视频会议呼入
            cloudICP.dispatch.conf.acceptVideoConf({
              cid: data.value.cid,
              windowInfo: {
                width: 800,
                height: 450,
              },
              callback: (rsp) => {
                if (this.logCallback) {
                  this.logCallback(
                    UMPSDK.logInfoFormat(
                      "视频会议被动入会接受" + JSON.stringify(rsp)
                    )
                  );
                }
              },
            });
          } else {
            // 如果事件类型是其他
            cloudICP.dispatch.video.answer({
              cid: data.value.cid,
              windowInfo: {
                width: 800,
                height: 450,
                videoConfLocalWindow: false,
              },
              callback: (rsp) => {
                if (this.logCallback) {
                  this.logCallback(
                    UMPSDK.logInfoFormat("视频接听来电" + JSON.stringify(rsp))
                  );
                }
              },
            });
          }
        }
        // 视频分发接听场景
        if (data.rsp === "3011") {
          this.createMonitorDialogDom(data, this.cardStyle.monitorStyle);
          cloudICP.dispatch.video.answer({
            cid: data.value.cid,
            windowInfo: {
              width: 800,
              height: 450,
              videoConfLocalWindow: false,
            },
            callback: (rsp) => {
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat("视频分发来电" + JSON.stringify(rsp))
                );
              }
            },
          });
        }
      });
      $(".ump-sdk-caller-card-hang-up").click(() => {
        this.timer.isCalling = false;
        cardDom.remove();
        // 语音呼入拒接场景
        if (data.rsp === "2002") {
          cloudICP.dispatch.voice.reject({
            cid: data.value.cid,
            callback: (rsp) => {
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat("语音拒接来电" + JSON.stringify(rsp))
                );
                // 拒绝来电，修改通话记录状态，并记录结束时间
                let phoneHistory = JSON.parse(
                  localStorage.getItem("phoneHistory")
                );
                phoneHistory.map((item) => {
                  if (item.cid === data.value.cid) {
                    item.endTime = UMPSDK.dateFormat("YYYY-MM-DD hh:mm");
                    item.status = false;
                  }
                });
                localStorage.setItem(
                  "phoneHistory",
                  JSON.stringify(phoneHistory)
                );
              }
            },
          });
        }
        // 视频呼入拒接场景
        if (data.rsp === "3002") {
          if (data.eventName === "OnConfDialInRinging") {
            // 如果事件类型是视频会议呼入
            cloudICP.dispatch.conf.rejectVideoConf({
              cid: data.value.cid,
              callback: (rsp) => {
                if (this.logCallback) {
                  this.logCallback(
                    UMPSDK.logInfoFormat(
                      "视频会议被动入会拒绝" + JSON.stringify(rsp)
                    )
                  );
                }
              },
            });
          } else {
            cloudICP.dispatch.video.reject({
              cid: data.value.cid,
              callback: (rsp) => {
                if (this.logCallback) {
                  this.logCallback(
                    UMPSDK.logInfoFormat("视频拒接来电" + JSON.stringify(rsp))
                  );
                }
              },
            });
          }
        }
        // 视频分发拒接场景
        if (data.rsp === "3011") {
          cloudICP.dispatch.video.reject({
            cid: data.value.cid,
            callback: (rsp) => {
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat("视频分发拒接" + JSON.stringify(rsp))
                );
              }
            },
          });
        }
      });
    }
    // 语音点呼
    initVoiceHandler() {
      /**
       * 打开语音呼叫组件
       * @param target 对端号码
       * @param style 卡片样式
       */
      this.voice.dial = (target, style, id) => {
        this.voice.id = id; // 传入id时，为内嵌模式，获取id
        if (this.timer.isCalling) {
          this.showMessage("正在通话中，请稍后再试", "warning");
          return;
        }
        if (!target) {
          this.showMessage("请输入对端isdn号码", "warning");
          return;
        }
        const param = {
          to: target,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("发起语音点呼" + JSON.stringify(rsp))
              );
            }
            this.cardStyle.voiceStyle = style;
            this.voice.style = style;
          },
        };
        cloudICP.dispatch.voice.dial(param);
      };
    }
    createVoiceDialogDom(data, style) {
      let id = this.voice.id || ""; // 内嵌模式获取id
      this.timer.isCalling = true;
      this.style = style; // 保持主题变更时，主叫和被叫卡片风格保持一致
      const divDom = $(
        `<div class="ump-sdk ump-sdk-communicate-card ump-sdk-voice-out-dialog ${
          id ? "ump-sdk-communicate-dialog_embedded" : ""
        }" style="background:${style.bgColor};right:${style.posX};bottom:${
          style.posY
        };width:${style.width};height:${style.height};border-color:${
          style.borderColor
        }" id=${"ump-sdk-voice-out-dialog-" + data.value.cid}>
          <div class="ump-sdk-voice-out-dialog-title">${data.value.callee}</div>
          <div class="ump-sdk-voice-out-dialog-tip" data-time="0">语音呼叫-${
            data.rsp === "2002"
              ? "连接中"
              : this.CommunicateStatusEnum[data.eventName + "-" + data.rsp]
          }</div>
          <div class="ump-sdk-voice-out-dialog-hang-up"></div>
        </div>`
      );
      if (id) {
        // 传入id，则弹窗嵌入到此id所在DOM内
        $(`#${id}`).append(divDom);
      } else {
        // 无id，则弹窗嵌入到body内
        $("body").append(divDom);
      }
      this.voice.id = ""; // 重置id
      this.voice.Dom = divDom;
      this.voice.cid = data.value.cid;
      $(".ump-sdk-voice-out-dialog-hang-up").click(() => {
        this.clearTimerHandler("voiceTimer", data.value.cid);
        this.timer.isCalling = false;
        divDom.remove();
        cloudICP.dispatch.voice.release({
          cid: data.value.cid,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("语音主动挂断" + JSON.stringify(rsp))
              );
            }
          },
        });
      });
    }
    // 外部调用，移除语音通话组件
    reMoveVioceCallDom() {
      if (!this.voice.Dom) return;
      this.clearTimerHandler("voiceTimer", this.voice.cid);
      this.timer.isCalling = false;
      this.voice.Dom.remove();
      cloudICP.dispatch.voice.release({
        cid: this.voice.cid,
        callback: (rsp) => {
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat("语音主动挂断" + JSON.stringify(rsp))
            );
          }
        },
      });
    }
    openVoiceDialog(data, style) {
      switch (data.eventName) {
        // 呼出事件
        case "OnDialOutProceeding":
          this.createVoiceDialogDom(data, style);
          break;
        // 呼出失败
        case "OnDialOutFailure":
          const tipDomFail = $(
            `#ump-sdk-voice-out-dialog-${data.value.cid} .ump-sdk-voice-out-dialog-tip`
          );
          tipDomFail.text(
            this.CommunicateStatusEnum[data.eventName + "-" + data.rsp]
          );
          break;
        // 振铃事件
        case "OnDialOutRinging":
          const tipDomRinging = $(
            `#ump-sdk-voice-out-dialog-${data.value.cid} .ump-sdk-voice-out-dialog-tip`
          );
          tipDomRinging.text(
            "语音呼叫-" +
              this.CommunicateStatusEnum[data.eventName + "-" + data.rsp]
          );
          break;
        // 通话建立
        case "OnCallConnect":
          const timer = setInterval(() => {
            const tipDom = $(
              `#ump-sdk-voice-out-dialog-${data.value.cid} .ump-sdk-voice-out-dialog-tip`
            );
            const timeNum = Number(tipDom.attr("data-time")) + 1;
            tipDom.attr("data-time", timeNum);
            tipDom.text(
              `${
                this.CommunicateStatusEnum[data.eventName + "-" + data.rsp]
              }-${UMPSDK.timeHandler(timeNum)}`
            );
          }, 1000);
          const obj = {
            cid: data.value.cid,
            timer,
          };
          this.timer.voiceTimer.push(obj);
          break;
      }
    }
    // 创建语音记录卡片
    initPhoneHistoryCard(
      phoneCaller,
      phoneCallee,
      phoneStartTime,
      phoneEnd,
      phoneState,
      style
    ) {
      const DOM = document.getElementById(
        "ump-sdk-communicate-phoneHistory-card"
      );
      if (DOM) {
        DOM.remove();
      }
      let phoneHistory = JSON.parse(localStorage.getItem("phoneHistory"));
      let filterArray = [];

      if (!phoneCaller && !phoneCallee && !phoneStartTime && !phoneEnd) {
        // 如果没有任何筛选条件，直接根据isdn筛选
        filterArray = phoneHistory.filter(
          (phone) => this.isdn == phone.caller || this.isdn == phone.callee
        );
      } else {
        // 进行条件筛选
        filterArray = phoneHistory.filter((phone) => {
          const phoneStart = new Date(phone.startTime);
          const phoneEndTime = new Date(phone.endTime);
          let matches = true;

          // 判断是否是当前登录isdn
          if (this.isdn != phone.caller && this.isdn != phone.callee) {
            matches = false;
          }

          // 根据 主叫 筛选
          if (phoneCaller && phone.caller.indexOf(phoneCaller) === -1) {
            matches = false;
          }

          // 根据 被叫 筛选
          if (phoneCallee && phone.callee.indexOf(phoneCallee) === -1) {
            matches = false;
          }

          // 根据 开始时间 筛选
          if (phoneStartTime && phoneStart < new Date(phoneStartTime)) {
            matches = false;
          }

          // 根据 结束时间 筛选
          if (phoneEnd && phoneEndTime > new Date(phoneEnd)) {
            matches = false;
          }

          // 过滤出开始时间和结束时间在传入范围内的记录
          if (phoneStartTime && phoneEnd) {
            const startRange = new Date(phoneStartTime);
            const endRange = new Date(phoneEnd);

            // 判断通话是否在给定的时间范围内
            if (
              !(phoneStart >= startRange && phoneStart <= endRange) && // 开始时间在范围内
              !(phoneEndTime >= startRange && phoneEndTime <= endRange) // 结束时间在范围内
            ) {
              matches = false;
            }
          }

          return matches;
        });
      }

      console.log(
        phoneState,
        typeof phoneState,
        filterArray,
        "======phoneState====="
      );
      if (phoneState !== "9") {
        filterArray = filterArray.filter((item) => {
          return item.callState == phoneState;
        });
      }
      console.log(phoneState, filterArray, "======phoneState111111=====");
      filterArray.reverse();
      if (filterArray.length > 0) {
        const historyDom = $(`
        <div class="ump-sdk ump-sdk-communicate-phoneHistory-card" id="ump-sdk-communicate-phoneHistory-card" style="${style}">
        <div class="ump-sdk-phoneHistory-title">
        <span class="ump-sdk-phoneHistory-title-name">通话记录</span>
        <span class="ump-sdk-phoneHistory-title-esc" id="ump-sdk-phoneHistory-title-esc"></span>
        </div>
        <div class="ump-sdk-phoneHistory-warpper">
        ${filterArray
          .map((item) => {
            return `<div class="ump-sdk-phoneHistory-body">
                   <span style="${
                     item.callState === 0 && item.status ? "" : "display:none"
                   }" class="ump-sdk-phoneHistory-span ump-sdk-phoneHistory-icon ump-sdk-phoneHistory-icon-callee0"></span>
                   <span style="${
                     item.callState === 0 && !item.status ? "" : "display:none"
                   }" class="ump-sdk-phoneHistory-span ump-sdk-phoneHistory-icon ump-sdk-phoneHistory-icon-callee1"></span>
                   <span style="${
                     item.callState === 1 && item.status ? "" : "display:none"
                   }" class="ump-sdk-phoneHistory-span ump-sdk-phoneHistory-icon ump-sdk-phoneHistory-icon-caller0"></span>
                   <span style="${
                     item.callState === 1 && !item.status ? "" : "display:none"
                   }" class="ump-sdk-phoneHistory-span ump-sdk-phoneHistory-icon ump-sdk-phoneHistory-icon-caller1"></span>
                   <span class="ump-sdk-phoneHistory-span ump-sdk-phoneHistory-caller">主叫:${
                     item.caller
                   }</span>
                   <span class="ump-sdk-phoneHistory-span ump-sdk-phoneHistory-caller">被叫:${
                     item.callee
                   }</span>
                   <span class="ump-sdk-phoneHistory-span ump-sdk-phoneHistory-startTime">${
                     item.startTime
                   }</span>
                   <span class="ump-sdk-phoneHistory-span ump-sdk-phoneHistory-endTime">${
                     item.endTime
                   }</span>
                </div>`;
          })
          .join("")}
</div>   
</div>
      `);
        $("body").append(historyDom);
      } else {
        this.showMessage("查询数据为空、请重新输入查询条件");
      }
      // 关闭弹窗
      $("#ump-sdk-phoneHistory-title-esc").click(() => {
        const DOMCard = document.getElementById(
          "ump-sdk-communicate-phoneHistory-card"
        );
        if (DOMCard) {
          DOMCard.remove();
        }
      });
    }
    // 创建会议记录卡片
    initMeetingHistoryCard(meetingCaller, meetingStartTime, meetingEnd, style) {
      const DOM = document.getElementById(
        "ump-sdk-communicate-meetingHistory-card"
      );
      if (DOM) {
        DOM.remove();
      }
      let meetingHistory = JSON.parse(localStorage.getItem("meetingHistory"));
      let filterArray = [];

      if (!meetingCaller && !meetingStartTime && !meetingEnd) {
        filterArray = meetingHistory.filter(
          (meeting) => this.isdn == meeting.caller
        );
      } else {
        filterArray = meetingHistory.filter((meeting) => {
          const meetingStart = new Date(meeting.startTime); // 转换会议的开始时间为 Date 对象
          let matches = true;
          //判断是否是当前登录isdn
          if (this.isdn != meeting.caller) {
            matches = false;
          }
          // 根据 会议标题 筛选
          if (meetingCaller && meeting.creater.indexOf(meetingCaller) === -1) {
            matches = false;
          }
          // 根据 开始时间 筛选
          if (meetingStartTime && meetingStart < new Date(meetingStartTime)) {
            matches = false;
          }
          // 根据 结束时间 筛选
          if (meetingEnd && meetingStart > new Date(meetingEnd)) {
            matches = false;
          }
          return matches;
        });
      }
      if (filterArray.length > 0) {
        const historyDom = $(`
        <div class="ump-sdk ump-sdk-communicate-meetingHistory-card" id="ump-sdk-communicate-meetingHistory-card" style="${style}">
        <div class="ump-sdk-meetingHistory-title">
        <span class="ump-sdk-meetingHistory-title-name">会议记录</span>
        <span class="ump-sdk-meetingHistory-title-esc" id="ump-sdk-meetingHistory-title-esc"></span>
        </div>
        <div class="ump-sdk-meetingHistory-warpper">
        ${filterArray
          .map((item) => {
            return `<div class="ump-sdk-meetingHistory-body">
                  <div>会议主题：${item.creater}</div>
                  <div>会议主席：${item.caller}</div>
                  <div>会议开始时间：${item.startTime}</div>
                </div>`;
          })
          .join("")}
</div>   
</div>
      `);
        $("body").append(historyDom);
      } else {
        this.showMessage("查询数据为空、请重新输入查询条件");
      }
      // 关闭弹窗
      $("#ump-sdk-meetingHistory-title-esc").click(() => {
        const DOMCard = document.getElementById(
          "ump-sdk-communicate-meetingHistory-card"
        );
        if (DOMCard) {
          DOMCard.remove();
        }
      });
    }
    // 视频呼叫
    initVideoHandler() {
      this.queryCameraAbility().then((res) => {
        this.video.dial = (target, style, id) => {
          this.video.id = id; // 传入id时，为内嵌模式，保存id
          if (this.timer.isCalling) {
            this.showMessage("正在通话中，请稍后再试", "warning");
            return;
          }
          if (!target) {
            this.showMessage("请输入对端isdn号码", "warning");
            return;
          }
          const param = {
            to: target,
            dialVideoParam: {
              fmt: res,
              showToolbar: 1,
              mode: "wssflow",
              width: 800,
              height: 450,
            },
            callback: (rsp) => {
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat("发起视频点呼" + JSON.stringify(rsp))
                );
              }
              this.cardStyle.videoStyle = style;
            },
          };
          cloudICP.dispatch.video.dialVideo(param);
        };
      });
    }
    // 共享桌面
    initWindowShare() {
      this.windowShare.dial = (cid, windowName) => {
        const param = {
          cid: cid,
          windowName: windowName,
          callback: (data) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("开始共享桌面" + JSON.stringify(data))
              );
            }
          },
        };
        cloudICP.dispatch.device.startWindowShare(param);
      };
      this.windowShare.stop = (cid) => {
        const param = {
          cid: cid,
          callback: (data) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("停止共享桌面" + JSON.stringify(data))
              );
            }
          },
        };
        cloudICP.dispatch.device.stopWindowShare(param);
      };
    }
    queryCameraAbility(type) {
      // 查询摄像头能力
      return new Promise((resolve, reject) => {
        let param = {
          callback: (data) => {
            if (data.rsp === "0") {
              let abilityNum = data.camera_ability;
              let numStr = "";
              switch (true) {
                case abilityNum == 1:
                  numStr = "QCIF";
                  break;
                case abilityNum > 1 && abilityNum <= 3:
                  numStr = "CIF";
                  break;
                case abilityNum > 3 && abilityNum <= 7:
                  numStr = "D1";
                  break;
                case abilityNum > 7 && abilityNum <= 15:
                  numStr = "720P";
                  break;
                case abilityNum > 15 && abilityNum <= 31:
                  numStr = "1080P";
                  break;
                case abilityNum > 31 && abilityNum <= 63:
                  numStr = "2K";
                  break;
                case abilityNum > 63 && abilityNum <= 127:
                  numStr = "4K";
                  break;
                default:
                  numStr = type === "monitor" ? "4K" : "1080P";
                  break;
              }
              resolve(numStr);
            } else {
              resolve(type === "monitor" ? "4K" : "1080P");
            }
          },
        };
        cloudICP.dispatch.device.queryCameraAbility(param);
      });
    }
    createVideoDialogDom(data, style) {
      let id = this.video.id || ""; // 内嵌模式获取id
      this.timer.isCalling = true;
      const divDom = $(
        `<div class="ump-sdk ump-sdk-communicate-card ump-sdk-video-out-dialog ${
          id ? "ump-sdk-communicate-dialog_embedded" : ""
        }" style="background:${style.bgColor};right:${style.posX};bottom:${
          style.posY
        };width:${style.width};height:${style.height};border-color:${
          style.borderColor
        }" id=${"ump-sdk-video-out-dialog-" + data.value.cid}>
          <div class="ump-sdk-video-out-dialog-title">${data.value.callee}</div>
          <div class="ump-sdk-video-out-dialog-tip" data-time="0">视频呼叫-${
            this.CommunicateStatusEnum[data.eventName + "-" + data.rsp]
          }</div>
          <div class="ump-sdk-video-out-dialog-hang-up" />
        </div>`
      );
      if (id) {
        // 传入id，则弹窗嵌入到此id所在DOM内
        $(`#${id}`).append(divDom);
      } else {
        // 无id，则弹窗嵌入到body内
        $("body").append(divDom);
      }
      this.video.Dom = divDom;
      this.video.cid = data.value.cid;
      $(".ump-sdk-video-out-dialog-hang-up").click(() => {
        divDom.remove();
        cloudICP.dispatch.video.release({
          cid: data.value.cid,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("视频主动挂断" + JSON.stringify(rsp))
              );
            }
          },
        });
      });
    }
    openVideoDialog(data, style) {
      switch (data.eventName) {
        // 呼出事件
        case "OnDialOutProceeding":
          this.createVideoDialogDom(data, style);
          break;
        // 呼出失败
        case "OnDialOutFailure":
          const tipDomFail = $(
            `#ump-sdk-video-out-dialog-${data.value.cid} .ump-sdk-video-out-dialog-tip`
          );
          tipDomFail.text(
            this.CommunicateStatusEnum[data.eventName + "-" + data.rsp]
          );
          break;
        // 振铃事件
        case "OnDialOutRinging":
          const tipDomRinging = $(
            `#ump-sdk-video-out-dialog-${data.value.cid} .ump-sdk-video-out-dialog-tip`
          );
          tipDomRinging.text(
            "视频呼叫-" +
              this.CommunicateStatusEnum[data.eventName + "-" + data.rsp]
          );
          break;
        // 通话建立
        case "OnCallConnect":
          const videoPlayerDom = $(
            `<div class="ump-sdk ump-sdk-video-box ${
              this.video.id ? "ump-sdk-communicate-dialog_embedded" : ""
            }"" style="left:${style.posX};top:${style.posY};width:${
              style.width
            };height:${style.height}" id=${
              "ump-sdk-video-box-" + data.value.cid
            }>
                <div class="ump-sdk-video-player-continer" " id=${
                  "ump-sdk-video-player-" + data.value.cid
                }></div>
                <div class="ump-sdk-video-info-box">
                  <span class="ump-sdk-video-target">${
                    data.rsp == "3003" ? data.value.callee : data.value.caller
                  }</span>
                  <span class="ump-sdk-video-timeTip" id="${
                    "ump-sdk-video-timeTip-" + data.value.cid
                  }" data-time="0"></span>
                </div>
                <div class="ump-sdk-video-zoom-box" >
                  <span class="ump-sdk-video-zoomOut ${
                    this.video.id ? "ump-sdk-video-zoomOut-nest" : ""
                  }"" id=${"ump-sdk-video-zoomOut-" + data.value.cid}></span>
                  <span class="ump-sdk-video-zoomIn ${
                    this.video.id ? "ump-sdk-video-zoomIn-nest" : ""
                  }"" id=${"ump-sdk-video-zoomIn-" + data.value.cid}></span>
                </div>
                <span class="ump-sdk-video-close" style="${
                  this.video.id ? "display:none" : ""
                }" id=${"ump-sdk-video-close-" + data.value.cid}></span>
                <div class="ump-sdk-video-mute-box">
                  <span class="ump-sdk-video-mute" id=${
                    "ump-sdk-video-mute-" + data.value.cid
                  }></span>
                  <span class="ump-sdk-video-unMute" id=${
                    "ump-sdk-video-unMute-" + data.value.cid
                  }></span>
                </div>
                <div class="ump-sdk-video-volume" id=${
                  "ump-sdk-video-volume-" + data.value.cid
                }>
                  <div class="ump-sdk-video-volume-volume-range-box" data-show="0" id=${
                    "ump-sdk-video-volume-volume-range-box-" + data.value.cid
                  }>
                    <input onchange="document.getElementById('ump-sdk-video-volume-text').innerText=value" class="ump-sdk-video-range" value="50" type="range" min="0" max="100" id=${
                      "ump-sdk-video-volume-range-" + data.value.cid
                    }>
                    <span id="ump-sdk-video-volume-text">50</span>
                  </div>
                </div>
                <span class="ump-sdk-video-hanging-up" id=${
                  "ump-sdk-video-hanging-up-" + data.value.cid
                }></span>
             </div>`
          );
          if (this.video.id) {
            // 传入id，则弹窗嵌入到此id所在DOM内
            $(`#${this.video.id}`).append(videoPlayerDom);
          } else {
            // 无id，则弹窗嵌入到body内
            $("body").append(videoPlayerDom);
          }

          const draggableInstance = this.draggable(
            "ump-sdk-video-box-" + data.value.cid
          );
          if (this.video.id) {
            draggableInstance.disableDragging();
          }
          const playerDom = document.getElementById(
            `ump-sdk-video-player-${data.value.cid}`
          );
          const hangingUpDom = document.getElementById(
            `ump-sdk-video-out-dialog-${data.value.cid}`
          );
          try{
            this.player[`player${data.value.cid}`] = this.createYuvPlayer(
              data,
              playerDom
            );
          }
          catch(error) {
            console.log("MSP_Player",error)
          }
          this.video.data = data;
          this.video.cid = data.value.cid;
          // 建立通话直接移除右下角小卡片
          hangingUpDom && hangingUpDom.remove();
          $(".ump-sdk-video-close").click(() => {
            // 关闭视频呼叫
            this.closeVideo(
              data,
              document.getElementById(`ump-sdk-video-box-${data.value.cid}`)
            );
          });
          $(".ump-sdk-video-hanging-up").click(() => {
            // 挂断视频呼叫
            this.closeVideo(
              data,
              document.getElementById(`ump-sdk-video-box-${data.value.cid}`)
            );
          });
          $(".ump-sdk-video-mute").click(() => {
            // 静音
            const param = {
              cid: data.value.cid,
              callback: (res) => {
                if (this.logCallback) {
                  this.logCallback(
                    UMPSDK.logInfoFormat(
                      "视频通话静音操作" + JSON.stringify(res)
                    )
                  );
                }
              },
            };
            cloudICP.dispatch.device.muteMic(param);
            const unMuteDemo = document.getElementById(
              `ump-sdk-video-unMute-${data.value.cid}`
            );
            const MuteDemo = document.getElementById(
              `ump-sdk-video-mute-${data.value.cid}`
            );
            MuteDemo.style.display = "none";
            unMuteDemo.style.display = "block";
          });
          $(".ump-sdk-video-unMute").click(() => {
            // 取消静音
            const param = {
              cid: data.value.cid,
              callback: (res) => {
                if (this.logCallback) {
                  this.logCallback(
                    UMPSDK.logInfoFormat(
                      "视频通话取消静音操作" + JSON.stringify(res)
                    )
                  );
                }
              },
            };
            cloudICP.dispatch.device.unmuteMic(param);
            const unMuteDemo = document.getElementById(
              `ump-sdk-video-unMute-${data.value.cid}`
            );
            const MuteDemo = document.getElementById(
              `ump-sdk-video-mute-${data.value.cid}`
            );
            MuteDemo.style.display = "block";
            unMuteDemo.style.display = "none";
          });
          $(".ump-sdk-video-volume").click(() => {
            // 音量组件控制
            const volumeDom = document.getElementById(
              `ump-sdk-video-volume-volume-range-box-${data.value.cid}`
            );
            if (volumeDom && volumeDom.dataset.show === "1") {
              volumeDom.dataset.show = "0";
              volumeDom.style.display = "none";
            } else {
              volumeDom.dataset.show = "1";
              volumeDom.style.display = "block";
            }
          });
          $(".ump-sdk-video-range").click((e) => {
            e.stopPropagation();
          });
          $(".ump-sdk-video-range").mousedown((e) => {
            e.stopPropagation();
          });
          $(".ump-sdk-video-range").mouseup((e) => {
            // 音量调节
            e.stopPropagation();
            const param = {
              cid: data.value.cid,
              volume: $(`#ump-sdk-video-volume-range-${data.value.cid}`).val(),
              callback: (res) => {
                if (this.logCallback) {
                  this.logCallback(
                    UMPSDK.logInfoFormat("音量调节" + JSON.stringify(res))
                  );
                }
              },
            };
            cloudICP.dispatch.device.setVolume(param);
          });
          $(".ump-sdk-video-zoomIn").click(() => {
            // 全屏
            draggableInstance.disableDragging();
            const width = document.body.clientWidth;
            const height = document.body.clientHeight;
            const zoomOut = document.getElementById(
              `ump-sdk-video-zoomOut-${data.value.cid}`
            );
            const zoomIn = document.getElementById(
              `ump-sdk-video-zoomIn-${data.value.cid}`
            );
            const box = document.getElementById(
              `ump-sdk-video-box-${data.value.cid}`
            );
            box.style.width = width + "px";
            box.style.height = height + "px";
            zoomOut.style.display = "block";
            zoomIn.style.display = "none";
            if (this.video.id) {
              // 传入id，则弹窗嵌入到此id所在DOM内
              box.style.position = "fixed";
              // box.style.top = '0';
              // box.style.left = '0';
              // box.style.right = 'unset';
              // box.style.bottom = 'unset';
              // box.style.transform = 'unset';
              $("body").append(box);
            }
            this.player[`player${data.value.cid}`].changeVideResolution({
              width: parseInt(width),
              height: parseInt(height),
            });
          });
          $(".ump-sdk-video-zoomOut").click(() => {
            // 退出全屏
            if (this.video.id) {
              draggableInstance.disableDragging();
            } else {
              draggableInstance.enableDragging();
            }
            const zoomOut = document.getElementById(
              `ump-sdk-video-zoomOut-${data.value.cid}`
            );
            const zoomIn = document.getElementById(
              `ump-sdk-video-zoomIn-${data.value.cid}`
            );
            const box = document.getElementById(
              `ump-sdk-video-box-${data.value.cid}`
            );
            if (!this.video.id) {
              box.style.width = style.width ? style.width : "800px";
              box.style.height = style.height ? style.height : "450px";
            } else {
              console.log("视频点呼传入的style", style);
            }

            zoomOut.style.display = "none";
            zoomIn.style.display = "block";
            let styleWidth = style.width ? style.width.replace("px", "") : "";
            let styleHeight = style.height
              ? style.height.replace("px", "")
              : "";
            if (this.video.id) {
              // 传入id，则弹窗嵌入到此id所在DOM内
              box.style.position = "relative";
              // box.style.top = '50%';
              // box.style.left = '50%';
              // box.style.right = 'unset';
              // box.style.bottom = 'unset';
              // box.style.transform = 'translate(-50%,-50%)';
              $(`#${this.video.id}`).append(box);
            }
            this.player[`player${data.value.cid}`].changeVideResolution({
              width: style.width ? parseInt(styleWidth) : 800,
              height: parseInt(style.height) ? styleHeight : 450,
            });
          });
          const videoTimer = setInterval(() => {
            // 通话计时
            const tipDom = $(`.ump-sdk-video-timeTip`);
            const timeNum = Number(tipDom.attr("data-time")) + 1;
            tipDom.attr("data-time", timeNum);
            tipDom.text(`${UMPSDK.timeHandler(timeNum)}`);
          }, 1000);
          const obj = {
            cid: data.value.cid,
            timer: videoTimer,
          };
          let styleWidth = style.width ? style.width.replace("px", "") : "";
          let styleHeight = style.width ? style.height.replace("px", "") : "";
          this.timer.videoTimer.push(obj);
          this.player[`player${data.value.cid}`].changeVideResolution({
            width: style.width ? parseInt(styleWidth) : 800,
            height: parseInt(style.height) ? styleHeight : 450,
          });
          break;
      }
    }
    closeVideo(data, el) {
      this.video.id = ""; // 重置id
      // 主动关闭、挂断视频
      this.clearTimerHandler("videoTimer", data.value.cid);
      this.timer.isCalling = false;
      el.remove();
      cloudICP.dispatch.video.release({
        cid: data.value.cid,
        callback: (rsp) => {
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat("视频主动挂断" + JSON.stringify(rsp))
            );
          }
          if (this.player[`player${data.value.cid}`]) {
            this.player[`player${data.value.cid}`].stop();
            this.player[`player${data.value.cid}`] = null;
            delete this.player[`player${data.value.cid}`];
          }
        },
      });
    }
    // 外部调用，移除视频通话组件
    reMoveMoniterCallDom() {
      this.closeVideo(
        this.video.data,
        document.getElementById(`ump-sdk-video-box-${this.video.cid}`)
      );
    }
    // 视频监控
    initMonitorHandler() {
      this.monitor.dial = (target, fmt, mute, confirm, camera, style, id) => {
        this.monitor.id = id; // 传入id时，为内嵌模式，保存id
        const monitorDialog = document.getElementsByClassName(
          `ump-sdk-monitor-out-dialog-src-${target}`
        );
        if (monitorDialog.length) {
          this.showMessage("该摄像头监控已打开", "warning");
          return;
        }
        if (!target) {
          this.showMessage("请输入对端isdn号码", "warning");
          return;
        }
        const param = {
          to: target,
          monitorParam: {
            fmt: fmt || "4K",
            mute: mute || "0",
            confirm: confirm || "0",
            camera: camera || "0",
            mode: "wssflow",
            width: 800,
            height: 450,
          },
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("发起视频监控" + JSON.stringify(rsp))
              );
            }
            this.cardStyle.monitorStyle = style ? style : "";
          },
        };
        cloudICP.dispatch.video.monitorVideo(param);
      };
    }
    createMonitorDialogDom(data, style) {
      // 有id时，屏蔽全屏按钮与关闭按钮, 内嵌弹窗时使用id
      let id = this.monitor.id || "";
      const callee =
        data.value.calltype === "dispatch" ? data.value.src : data.value.callee;
      const divDom = $(`
        <div class="ump-sdk ump-sdk-monitor-card ump-sdk-monitor-out-dialog ump-sdk-monitor-out-dialog-src-${callee} ${
        id ? "ump-sdk-monitor-card_embedded" : ""
      }" style="left:${style.posX};top:${style.posY};width:${
        style.width
      };height:${style.height}" src="${callee}" data-cid=${
        data.value.cid
      } id="${"ump-sdk-monitor-out-dialog-" + data.value.cid}">
          <div class="ump-sdk-monitor-player" id=${
            "ump-sdk-monitor-player-" + data.value.cid
          }></div>
          <div class="ump-sdk-monitor-status">
            <div class="ump-sdk-monitor-out-dialog-tip">${
              this.CommunicateStatusEnum[data.eventName + "-" + data.rsp]
            }</div>
          </div>
          <div class="ump-sdk-monitor-info">
            <div class="ump-sdk-monitor-out-dialog-title">
              <div class="ump-sdk-monitor-out-dialog-title-username" data-time="0">${callee}</div>
              <div class="ump-sdk-monitor-out-dialog-title-tool">
                <div class="ump-sdk-monitor-out-dialog-title-tool-full" id="ump-sdk-monitor-out-dialog-title-tool-full-${
                  data.value.cid
                }" title="全屏"></div>
                <div class="ump-sdk-monitor-out-dialog-title-tool-not-full" id="ump-sdk-monitor-out-dialog-title-tool-not-full-${
                  data.value.cid
                }" title="退出全屏"></div>
                <div class="ump-sdk-monitor-out-dialog-title-tool-close" style="${
                  id ? "display:none" : ""
                }" id="ump-sdk-monitor-out-dialog-title-tool-close-${
        data.value.cid
      }" title="关闭"></div>
              </div>
            </div>
            <div class="ump-sdk-monitor-out-dialog-bottom">
              <div class="ump-sdk-monitor-out-dialog-bottom-left">
                <div class="ump-sdk-monitor-out-dialog-mute" id="ump-sdk-monitor-out-dialog-mute-${
                  data.value.cid
                }" title="静音"></div>
                <div class="ump-sdk-monitor-out-dialog-unmute" id="ump-sdk-monitor-out-dialog-unmute-${
                  data.value.cid
                }" title="取消静音"></div>
                <div class="ump-sdk-monitor-out-dialog-dispatch" id="ump-sdk-monitor-out-dialog-dispatch-${
                  data.value.cid
                }" title="分发"></div>
              </div>
              <div class="ump-sdk-monitor-out-dialog-bottom-right">
                <div class="ump-sdk-monitor-out-dialog-hang-up" id="ump-sdk-monitor-out-dialog-hang-up-${
                  data.value.cid
                }" title="挂断"></div>
              </div>
              <ul class="ump-sdk-monitor-out-dialog-dispatch-container" data-show="0"></ul>
            </div>
          </div>
        </div>
      `);
      if (id) {
        // 传入id，则弹窗嵌入到此id所在DOM内
        $(`#${id}`).append(divDom);
      } else {
        // 无id，则弹窗嵌入到body内
        $("body").append(divDom);
      }
      // this.monitor.id = ''; // 重置id
      // 初始化拖拽
      const draggableInstance = this.draggable(
        "ump-sdk-monitor-out-dialog-" + data.value.cid
      );
      if (id) {
        // 传入id，则弹窗禁用拖拽功能
        draggableInstance.disableDragging();
      }
      // 初始化分发对象
      this.dispatchArr[`cid-${data.value.cid}`] = [];
      // 关闭弹窗
      const closeMonitorHandler = (cid, dialogDom) => {
        this.clearTimerHandler("monitorTimer", cid);
        delete this.dispatchArr[cid];
        dialogDom.remove();
        this.monitor.id = ""; // 重置id
        cloudICP.dispatch.video.release({
          cid,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("监控主动挂断" + JSON.stringify(rsp))
              );
            }
            if (this.player[`player${cid}`]) {
              this.player[`player${cid}`].stop();
              this.player[`player${cid}`] = null;
              delete this.player[`player${cid}`];
            }
          },
        });
      };
      $(`#ump-sdk-monitor-out-dialog-hang-up-${data.value.cid}`).click(() => {
        closeMonitorHandler(data.value.cid, divDom);
      });
      $(`#ump-sdk-monitor-out-dialog-title-tool-close-${data.value.cid}`).click(
        () => {
          closeMonitorHandler(data.value.cid, divDom);
        }
      );
      // 全屏
      $(`#ump-sdk-monitor-out-dialog-title-tool-full-${data.value.cid}`).click(
        () => {
          const monitorCardDom = $(
            `#ump-sdk-monitor-out-dialog-${data.value.cid}`
          );
          const fullDom = $(
            `#ump-sdk-monitor-out-dialog-title-tool-full-${data.value.cid}`
          );
          const notFullDom = $(
            `#ump-sdk-monitor-out-dialog-title-tool-not-full-${data.value.cid}`
          );
          monitorCardDom.addClass("ump-sdk-monitor-card-full-width-height");
          fullDom.attr("style", "display: none");
          notFullDom.attr("style", "display: block");
          // 全屏后禁止拖动，并且清空内联样式
          draggableInstance.disableDragging();
          if (this.monitor.id) {
            // 传入id，则弹窗嵌入到此id所在DOM内
            const targetDom = document.getElementById(
              `ump-sdk-monitor-out-dialog-${data.value.cid}`
            );
            targetDom.style.position = "fixed";
            targetDom.style.top = "0";
            targetDom.style.left = "0";
            targetDom.style.right = "unset";
            targetDom.style.bottom = "unset";
            targetDom.style.transform = "unset";
            $("body").append(targetDom);
          }
          if (this.player[`player${data.value.cid}`]) {
            this.player[`player${data.value.cid}`].changeVideResolution({
              width: parseInt(monitorCardDom.width()),
              height: parseInt(monitorCardDom.height()),
            });
          }
        }
      );
      // 退出全屏
      $(
        `#ump-sdk-monitor-out-dialog-title-tool-not-full-${data.value.cid}`
      ).click(() => {
        if (this.monitor.id) {
          // 传入id，则弹窗嵌入到此id所在DOM内
          draggableInstance.disableDragging();
        } else {
          // 还原后可以拖动
          draggableInstance.enableDragging();
        }
        const monitorCardDom = $(
          `#ump-sdk-monitor-out-dialog-${data.value.cid}`
        );
        const fullDom = $(
          `#ump-sdk-monitor-out-dialog-title-tool-full-${data.value.cid}`
        );
        const notFullDom = $(
          `#ump-sdk-monitor-out-dialog-title-tool-not-full-${data.value.cid}`
        );
        monitorCardDom.removeClass("ump-sdk-monitor-card-full-width-height");
        fullDom.attr("style", "display: block");
        notFullDom.attr("style", "display: none");
        if (this.monitor.id) {
          // 传入id，则弹窗嵌入到此id所在DOM内
          const targetDom = document.getElementById(
            `ump-sdk-monitor-out-dialog-${data.value.cid}`
          );
          targetDom.style.position = "relative";
          targetDom.style.top = "50%";
          targetDom.style.left = "50%";
          targetDom.style.right = "unset";
          targetDom.style.bottom = "unset";
          targetDom.style.transform = "translate(-50%,-50%)";
          $(`#${this.monitor.id}`).append(targetDom);
        }
        if (this.player[`player${data.value.cid}`]) {
          this.player[`player${data.value.cid}`].changeVideResolution({
            width: parseInt(monitorCardDom.width()),
            height: parseInt(monitorCardDom.height()),
          });
        }
      });
      // 静音与取消静音操作
      const muteOrUnmuteHandlrt = (volume, cid) => {
        const muteDom = $(`#ump-sdk-monitor-out-dialog-mute-${cid}`);
        const unmuteDom = $(`#ump-sdk-monitor-out-dialog-unmute-${cid}`);
        if (volume === "0") {
          muteDom.attr("style", "display: none");
          unmuteDom.attr("style", "display: block");
        } else {
          muteDom.attr("style", "display: block");
          unmuteDom.attr("style", "display: none");
        }
        cloudICP.dispatch.device.setVolume({
          cid,
          volume,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat(
                  (volume === "0" ? "静音扬声器" : "解除静音扬声器") +
                    JSON.stringify(rsp)
                )
              );
            }
          },
        });
      };
      // 静音
      $(`#ump-sdk-monitor-out-dialog-mute-${data.value.cid}`).click(() => {
        muteOrUnmuteHandlrt("0", data.value.cid);
      });
      // 取消静音
      $(`#ump-sdk-monitor-out-dialog-unmute-${data.value.cid}`).click(() => {
        muteOrUnmuteHandlrt("100", data.value.cid);
      });
      // 分发弹窗
      $(`#ump-sdk-monitor-out-dialog-dispatch-${data.value.cid}`).click(() => {
        const dispatchDom = $(`
        <div class="ump-sdk ump-sdk-monitor-out-dialog-dispatch-dialog-mask" id="ump-sdk-monitor-out-dialog-dispatch-dialog-mask-${
          data.value.cid
        }">
          <div class="ump-sdk-monitor-out-dialog-dispatch-dialog" id=${
            "ump-sdk-monitor-out-dialog-dispatch-dialog-" + data.value.cid
          }>
            <div class="ump-sdk-monitor-out-dialog-dispatch-dialog-head">
            <div class="ump-sdk-monitor-out-dialog-dispatch-dialog-title">视频分发</div>
            <div class="ump-sdk-monitor-out-dialog-dispatch-dialog-close"></div>
            </div>
            <div class="ump-sdk-monitor-out-dialog-dispatch-dialog-content">
              <label>
                <div class="ump-sdk-monitor-out-dialog-dispatch-dialog-inputname">人员、设备</div>
                <div>
                  <input class="ump-sdk-monitor-out-dialog-dispatch-person" type="text" placeholder="输入人员、设备isdn号，多个以英文逗号隔开" autocomplete="off"/>
                </div>
              </label>
              <label>
                <div class="ump-sdk-monitor-out-dialog-dispatch-dialog-inputname">群组</div>
                <div>
                  <input class="ump-sdk-monitor-out-dialog-dispatch-group" type="text" placeholder="输入群组isdn号，多个以英文逗号隔开" autocomplete="off"/>
                </div>
              </label>
            </div>
            <div class="ump-sdk-monitor-out-dialog-dispatch-dialog-bottom">
              <button type="button">提交</button>
            </div>
          </div>
        </div>
      `);
        $("body").append(dispatchDom);
        $(".ump-sdk-monitor-out-dialog-dispatch-dialog-close").click(() => {
          dispatchDom.remove();
        });
        $(".ump-sdk-monitor-out-dialog-dispatch-dialog-bottom").click(() => {
          const personValue = $(
            ".ump-sdk-monitor-out-dialog-dispatch-dialog-content .ump-sdk-monitor-out-dialog-dispatch-person"
          )
            .val()
            .trim();
          const groupValue = $(
            ".ump-sdk-monitor-out-dialog-dispatch-dialog-content .ump-sdk-monitor-out-dialog-dispatch-group"
          )
            .val()
            .trim();
          const dispatchCallbackHandler = (
            dispatchRes,
            dispatchDom,
            personValue,
            groupValue
          ) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat(
                  "视频分发操作" + JSON.stringify(dispatchRes)
                )
              );
            }
            if (dispatchRes.rsp === "0") {
              dispatchDom.remove();
              if (
                !$(
                  `#ump-sdk-monitor-out-dialog-${data.value.cid} .ump-sdk-monitor-out-dialog-dispatch-list`
                ).length
              ) {
                $(
                  `#ump-sdk-monitor-out-dialog-${data.value.cid} .ump-sdk-monitor-out-dialog-dispatch`
                ).after(
                  `<div class="ump-sdk-monitor-out-dialog-dispatch-list" title="分发列表"></div>`
                );
                $(
                  `#ump-sdk-monitor-out-dialog-${data.value.cid} .ump-sdk-monitor-out-dialog-dispatch-list`
                ).click(() => {
                  const containerDom = $(
                    `#ump-sdk-monitor-out-dialog-${data.value.cid} .ump-sdk-monitor-out-dialog-dispatch-container`
                  );
                  if (containerDom.attr("data-show") === "0") {
                    containerDom.show();
                    containerDom.attr("data-show", "1");
                  } else {
                    containerDom.hide();
                    containerDom.attr("data-show", "0");
                  }
                });
              }
              const allItem = [
                ...personValue
                  .split(",")
                  .filter((ele) => ele.trim())
                  .map((e) => ({ isdn: e, isGroup: false })),
                ...groupValue
                  .split(",")
                  .filter((ele) => ele.trim())
                  .map((e) => ({ isdn: e, isGroup: true })),
              ];
              allItem.forEach((e) => {
                if (
                  !this.dispatchArr[`cid-${data.value.cid}`].some(
                    (ele) => ele.isdn === e.isdn && ele.isGroup === e.isGroup
                  )
                ) {
                  this.dispatchArr[`cid-${data.value.cid}`].push({
                    isdn: e.isdn,
                    isGroup: e.isGroup,
                  });
                  const dom =
                    $(`<li class="ump-sdk-monitor-out-dialog-dispatch-item" id="ump-sdk-monitor-out-dialog-dispatch-item-${e.isdn}">
                      <div class="ump-sdk-monitor-out-dialog-dispatch-item-name">${e.isdn}</div>
                      <div class="ump-sdk-monitor-out-dialog-dispatch-item-status ump-sdk-monitor-out-dialog-dispatch-item-status-connection"
                        data-isgroup=${e.isGroup} data-id=${e.isdn}
                      ></div>
                    </li>`);
                  $(
                    `#ump-sdk-monitor-out-dialog-${data.value.cid} .ump-sdk-monitor-out-dialog-dispatch-container`
                  ).append(dom);
                }
                // 针对群组的状态单独改变
                if (e.isGroup) {
                  const groupStatus = "calling";
                  const groupData = {
                    eventName: "OnVideoDispatchStatusNotify",
                    rsp: "4021",
                    value: {
                      src: callee,
                      peerid: e.isdn,
                    },
                  };
                  this.changeDispatchLiDomStatus(groupData, groupStatus);
                }
              });
            }
          };
          // 分发人员
          if (personValue) {
            const dispatchPersonArr = personValue
              .split(",")
              .filter((ele) => ele.trim())
              .map((e) => ({ isdn: e }));
            const param = {
              src: callee,
              fmt: "NO",
              dest: dispatchPersonArr,
              callback: (dispatchRes) => {
                dispatchCallbackHandler(
                  dispatchRes,
                  dispatchDom,
                  personValue,
                  groupValue
                );
              },
            };
            cloudICP.dispatch.video.dispatchVideo(param);
          }
          // 分发群组
          if (groupValue) {
            const dispatchGroupArr = groupValue
              .split(",")
              .filter((ele) => ele.trim())
              .map((e) => ({ isdn: e }));
            const param = {
              src: callee,
              fmt: "CIF",
              dest: [],
              destGroups: dispatchGroupArr,
              callback: (dispatchRes) => {
                dispatchCallbackHandler(
                  dispatchRes,
                  dispatchDom,
                  personValue,
                  groupValue
                );
              },
            };
            cloudICP.dispatch.video.dispatchVideo(param);
          }
        });
      });
    }
    removeMonitorDom(cid) {
      let dialogDom = document.getElementById(
        `ump-sdk-monitor-out-dialog-${cid}`
      );
      this.clearTimerHandler("monitorTimer", cid);
      delete this.dispatchArr[cid];
      dialogDom.remove();
      this.monitor.id = ""; // 重置id
      cloudICP.dispatch.video.release({
        cid,
        callback: (rsp) => {
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat("监控主动挂断" + JSON.stringify(rsp))
            );
          }
          if (this.player[`player${cid}`]) {
            this.player[`player${cid}`].stop();
            this.player[`player${cid}`] = null;
            delete this.player[`player${cid}`];
          }
        },
      });
    }
    changeDispatchLiDomStatus(data, status) {
      const liIcon = $(
        `.ump-sdk-monitor-out-dialog-src-${data.value.src} #ump-sdk-monitor-out-dialog-dispatch-item-${data.value.peerid} .ump-sdk-monitor-out-dialog-dispatch-item-status`
      );
      liIcon.attr(
        "class",
        `ump-sdk-monitor-out-dialog-dispatch-item-status ump-sdk-monitor-out-dialog-dispatch-item-status-${status}`
      );
      liIcon.attr("title", "");
      liIcon.unbind("click");
      if (status === "calling") {
        liIcon.attr("title", "取消视频分发");
        liIcon.click(() => {
          const isGroup = liIcon.attr("data-isgroup");
          let param = null;
          if (isGroup === "true") {
            param = {
              src: data.value.src,
              dest: "",
              destGroup: liIcon.attr("data-id"),
              callback: (resData) => {
                if (this.logCallback) {
                  this.logCallback(
                    UMPSDK.logInfoFormat(
                      "取消对群组分发" + JSON.stringify(resData)
                    )
                  );
                }
                if (resData.rsp === "0") {
                  this.changeDispatchLiDomStatus(data, "holdup");
                }
              },
            };
          } else {
            param = {
              src: data.value.src,
              dest: liIcon.attr("data-id"),
              callback: (resData) => {
                if (this.logCallback) {
                  this.logCallback(
                    UMPSDK.logInfoFormat(
                      "取消对人员设备分发" + JSON.stringify(resData)
                    )
                  );
                }
              },
            };
          }
          cloudICP.dispatch.video.cancelVideoDispatch(param);
        });
      }
    }
    openMonitorDialog(data, style) {
      switch (data.eventName) {
        // 呼出事件
        case "OnDialOutProceeding":
          this.createMonitorDialogDom(data, style);
          break;
        // 呼出失败
        case "OnDialOutFailure":
          const tipDomFail = $(
            `#ump-sdk-monitor-out-dialog-${data.value.cid} .ump-sdk-monitor-out-dialog-tip`
          );
          tipDomFail.text(
            this.CommunicateStatusEnum[data.eventName + "-" + data.rsp]
          );
          break;
        // 振铃事件
        case "OnDialOutRinging":
          const tipDomRinging = $(
            `#ump-sdk-monitor-out-dialog-${data.value.cid} .ump-sdk-monitor-out-dialog-tip`
          );
          tipDomRinging.text(
            this.CommunicateStatusEnum[data.eventName + "-" + data.rsp]
          );
          break;
        // 通话建立
        case "OnCallConnect": {
          const tipDomRinging = $(
            `#ump-sdk-monitor-out-dialog-${data.value.cid} .ump-sdk-monitor-out-dialog-tip`
          );
          tipDomRinging.text("");
          const timer = setInterval(() => {
            const tipDom = $(
              `#ump-sdk-monitor-out-dialog-${data.value.cid} .ump-sdk-monitor-out-dialog-title .ump-sdk-monitor-out-dialog-title-username`
            );
            const timeNum = Number(tipDom.attr("data-time")) + 1;
            tipDom.attr("data-time", timeNum);
            tipDom.text(
              `${
                data.value.calltype === "dispatch"
                  ? data.value.src
                  : data.value.callee
              } ${UMPSDK.timeHandler(timeNum)}`
            );
          }, 1000);
          try{
            this.player[`player${data.value.cid}`] = this.createYuvPlayer(
              data,
              document.getElementById(
                `${"ump-sdk-monitor-player-" + data.value.cid}`
              )
            );
          }
          catch(error) {
            console.log("MSP_Player",error)
          }
          const obj = {
            cid: data.value.cid,
            timer,
          };
          this.timer.monitorTimer.push(obj);
          break;
        }
      }
    }
    // 短彩信业务
    initMessageHandler() {
      /**
       * 初始化短彩信业务
       * @param {Array} targets 对端isdn组成的数组
       * @param {String} content 短信文本内容
       * @param {Object} attchement 附件File对象
       */
      this.msg.send = async (targets, content, attchement) => {
        if (!targets || !targets.length) {
          this.showMessage("请输入对端isdn号码", "warning");
          return;
        }
        if (!content && !attchement) {
          this.showMessage("请输入短彩信内容", "warning");
          return;
        }
        // 短信发送
        if (content) {
          const msgidArr = targets.map((ite, index) => {
            const currentTime = new Date();
            return currentTime.getTime() + index;
          });
          const param = {
            dest: targets.join(";"),
            msgid: msgidArr.join(";"),
            content,
            callback: (res) => {
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat("短信发送结果" + JSON.stringify(res))
                );
              }
            },
          };
          cloudICP.dispatch.sms.sendDispSMS(param);
        }
        // 彩信发送
        if (attchement) {
          if (attchement.size / 1024 / 1024 > 20) {
            this.showMessage("附件最大不超过20M", "warning");
            return;
          }
          let fileBuffer;
          const reader = new FileReader();
          // 文件读取成功后的回调函数
          reader.onload = function (e) {
            // e.target.result为文件的二进制数据
            fileBuffer = e.target.result;
          };
          reader.readAsArrayBuffer(attchement);
          const attachThumb = await this.getAttachThumb(attchement);
          const authorization = await this.attachAuthorization();
          const res = await this.uploadAttachment(attchement, fileBuffer);
          if (res == 200) {
            const dest = targets.map((ite) => {
              return {
                isdn: ite,
                msgid: this.msg.msgid,
              };
            });
            const param = {
              dest,
              content: "",
              attach: attchement.name,
              callback: (res) => {
                if (this.logCallback) {
                  this.logCallback(
                    UMPSDK.logInfoFormat("彩信发送结果" + JSON.stringify(res))
                  );
                }
              },
            };
            if (attachThumb) {
              param.attach_thumb = attachThumb;
            }
            cloudICP.dispatch.sms.sendDispMMS(param);
          } else {
            this.showMessage("彩信发送失败", "error");
          }
        }
      };
    }
    // 附件鉴权
    async attachAuthorization() {
      // 鉴权
      try {
        const postUrl = await fetch("/attachment", {
          method: "GET",
        })
          .then((response) => {
            if (response.status === 401) {
              const wwwAuthenticate = response.headers.get("WWW-Authenticate");
              // 解析 WWW-Authenticate 头部中的参数
              this.parseWWWAuthenticate(wwwAuthenticate);
              return null;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } catch (err) {
        console.log("请求失败");
      }
    }
    async uploadAttachment(file, fileBuffer) {
      const formData = new FormData();
      formData.append("file", new Blob([fileBuffer]));
      formData.append("userid", this.isdn);
      const uploadtTime = String(new Date().getTime());
      this.msg.msgid = uploadtTime;
      formData.append("date", uploadtTime);
      formData.append("msgid", uploadtTime);
      return new Promise((resolve) => {
        fetch("/attachment", {
          method: "POST",
          headers: {
            Authorization: this.msg.authorizationHeader,
          },
          body: formData,
        }).then((response) => {
          if (response.status == 200) {
            if (this.logCallback) {
              this.logCallback(UMPSDK.logInfoFormat("🚀附件上传成功"));
            }
            resolve(response.status);
          } else {
            if (this.logCallback) {
              this.logCallback(UMPSDK.logInfoFormat("❗附件上传失败"));
            }
            resolve("");
          }
        });
      });
    }

    // 处理返回的wwwAuthenticate
    parseWWWAuthenticate(header) {
      const params = {};
      const parts = header.split(","); // 根据逗号分隔多个参数
      parts[1] = parts[1] + "," + parts[2];
      parts.splice(2, 1);
      parts.forEach((part) => {
        const [key, value] = part.split("=");
        params[key.trim()] = value.replace(/"/g, "").trim(); // 去掉引号
      });
      // return params;
      this.handleAuthorization(params);
    }

    // 处理鉴权
    handleAuthorization(params) {
      const username = this.isdn;
      const password = this.isdnPwd;
      const method = "POST";
      const uri = "/attachment"; // 请求的 URI
      const qop = "auth";
      const algorithm = "SHA-256";

      // 计算 A1 和 A2
      const A1 = `${username}:${params["Digest realm"]}:${password}`;
      const A2 = `${method}:${uri}`;

      // 计算响应
      const nonceCount = "00000001"; // 计数器，通常是 1
      const cnonce = this.generateCnonce(); // 客户端生成的 nonce
      // const qop = 'auth'; // 质量保护
      const response = sha256(
        `${sha256(A1)}:${params.nonce}:${nonceCount}:${cnonce}:${qop}:${sha256(
          A2
        )}`
      );
      // 生成 Authorization 头部
      const authorizationHeader = `Digest username="${username}", realm="${params["Digest realm"]}", nonce="${params.nonce}", uri="${uri}", algorithm="${algorithm}", qop=${qop}, nc=${nonceCount}, cnonce="${cnonce}", response="${response}", opaque="${params.opaque}"`;
      this.msg.authorizationHeader = authorizationHeader;
    }

    // 在浏览器环境中使用window.cryptoAPI 生成conce
    generateCnonce(length = 16) {
      const array = new Uint8Array(length);
      window.crypto.getRandomValues(array);
      return Array.from(array, (byte) =>
        ("0" + byte.toString(16)).slice(-2)
      ).join("");
    }

    getAttachThumb(attchement) {
      return new Promise((resolve) => {
        if (["image/jpeg", "image/png"].includes(attchement.type)) {
          // 获取图片缩略图
          const reader = new FileReader();
          reader.readAsDataURL(attchement);

          // 调整缩略图尺寸或者质量，防止出现请求体过大的问题
          reader.onload = function (e) {
            const img = document.createElement("img");
            img.src = e.target.result;
            img.crossOrigin = "anonymous"; // 添加跨域属性
            img.onload = function () {
              const canvas = document.createElement("canvas");
              const { naturalWidth, naturalHeight } = img;
              const targetWidth = 200; // 设置缩略图的宽度
              const targetHeight = Math.round(
                (targetWidth * naturalHeight) / naturalWidth
              ); // 按比例计算缩略图的高度
              canvas.width = targetWidth;
              canvas.height = targetHeight;
              const context = canvas.getContext("2d");
              context.drawImage(img, 0, 0, targetWidth, targetHeight);
              const arr = canvas.toDataURL("image/jpeg").split("base64,");
              resolve(arr[1] || "");
            };
          };
        } else if (["video/mp4"].includes(attchement.type)) {
          // 获取视频缩略图
          const url = URL.createObjectURL(attchement);
          const video = document.createElement("video");
          video.setAttribute("crossOrigin", "anonymous");
          video.setAttribute("preload", "metadata");
          video.setAttribute("src", url);
          video.currentTime = 1; // 视频开始可能是黑屏状态
          video.addEventListener("loadeddata", function () {
            const canvas = document.createElement("canvas");
            const { videoWidth, videoHeight } = video;
            canvas.width = videoWidth;
            canvas.height = videoHeight;
            canvas
              .getContext("2d")
              .drawImage(video, 0, 0, videoWidth, videoHeight);
            const arr = canvas.toDataURL("image/jpeg").split("base64,");
            resolve(arr[1] || "");
          });
        } else {
          resolve("");
        }
      });
    }
    // 群组业务
    GroupCardStyle(style) {
      this.group.style = style;
    }
    initGroupHandler() {
      /**
       * 初始化群组业务
       * @param {String} groupId 群组isdn
       * @param {String} style 卡片样式
       */
      this.group.open = (groupId, style) => {
        if (!groupId) {
          this.showMessage("请输入群组的isdn", "warning");
          return;
        }
        if (this.subscribGroupIsdn.some((ite) => ite.groupId === groupId)) {
          this.showMessage("该群组已订阅", "warning");
          return;
        }
        const param = {
          grpid: groupId,
          callback: (res) => {
            if (res.rsp === "0") {
              this.subscribGroupIsdn.push({ cid: "", groupId });
              const obj = {
                isInit: true,
                value: {
                  grpid: groupId,
                },
              };
              this.openGroupDialog(obj, style);
            } else {
              this.showMessage("群组订阅失败" + res.desc, "error");
            }
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("群组订阅操作" + JSON.stringify(res))
              );
            }
          },
        };
        cloudICP.dispatch.group.subjoinTalkingGroup(param); // 订阅并自动加入组呼
      };
    }
    openGroupDialog(data, style) {
      console.log(data, style);
      console.log(this.Emergency);
      if (data.isInit) {
        const groupDom = $(
          `<div class="ump-sdk ump-sdk-group-card" style="background:${
            style.bgColor
          };left:${style.posX};top:${style.posY};width:${style.width};height:${
            style.height
          };border-color:${style.borderColor};" id=${
            "ump-sdk-group-card-" + data.value.grpid
          }>
            <div class="ump-sdk-group-card-tip">
              <span>群组：${data.value.grpid}</span>
              <div style="display: flex;align-items: center;height:12px">
                <svg style="cursor: pointer;height:12px" width="16" heigth="12" t="1734574453170" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3377" width="200" height="200"><path d="M853.333333 544H170.666667c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h682.666666c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z" p-id="3378" fill="#ffffff"></path></svg>
                <div style="margin-left:8px;" class="ump-sdk-group-card-close-btn"></div>
              </div>
            </div>
            <div class="ump_sdk_group_card_speaker">
              <div id="" class="ump-sdk-group-card-speaker" style="${
                data.value.speaker ? "opacity: 1" : "opacity: 0"
              }">
              <span class="ump-sdk-group-card-speaker-name">${
                data.value.speaker
              } 主讲中</span>
              <div class="ump-sdk-group-card-voice-effect">
                <span class="ump-sdk-group-card-voice-item"></span>
                <span class="ump-sdk-group-card-voice-item"></span>
                <span class="ump-sdk-group-card-voice-item"></span>
                <span class="ump-sdk-group-card-voice-item"></span>
                <span class="ump-sdk-group-card-voice-item"></span>
              </div>
            </div>
            </div>
            <div class="ump-sdk-group-card-content-box" style="width: 70px;height: 70px;display: flex;align-items: center;justify-content: center;cursor: move;">
              <div class="ump-sdk-group-card-content" style="width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;cursor: pointer;">
                <div class="ump-sdk-group-card-btn ump-sdk-group-card-btn-no-speaker" title="按住进行组呼">
                  <div class="ump-sdk-group-card-btn-talking">
                    <div class="ump-sdk-group-card-btn-talking-item"></div>
                    <div class="ump-sdk-group-card-btn-talking-item"></div>
                    <div class="ump-sdk-group-card-btn-talking-item"></div>
                    <div class="ump-sdk-group-card-btn-talking-item"></div>
                    <div class="ump-sdk-group-card-btn-talking-item"></div>
                    <div class="ump-sdk-group-card-btn-talking-item"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="ump-sdk-group-card-expansion-box" >
              <span class="ump-sdk-group-card-expansion-btn" data-isExpansion="0">展开成员</span>
            </div>
            <div class="ump-sdk-group-card-member-box"></div>
          </div>`
        );
        // 点击 SVG 时，只显示 .ump-sdk-group-card-content
        groupDom.find("svg").on("click", function () {
          $(this)
            .closest(".ump-sdk-group-card")
            .css({
              width: "70px",
              height: "70px",
            })
            .find(
              ".ump-sdk-group-card-tip, .ump_sdk_group_card_speaker, .ump-sdk-group-card-expansion-box, .ump-sdk-group-card-member-box"
            )
            .hide();
        });

        // 点击 .ump-sdk-group-card-content 时，恢复之前的内容
        groupDom.find(".ump-sdk-group-card-content").on("click", function () {
          const parentCard = $(this).closest(".ump-sdk-group-card");
          parentCard
            .css({
              width: "260px",
              height: "auto",
            })
            .find(
              ".ump-sdk-group-card-tip, .ump_sdk_group_card_speaker, .ump-sdk-group-card-expansion-box, .ump-sdk-group-card-member-box"
            )
            .show();
        });
        groupDom
          .find(".ump-sdk-group-card-btn-no-speaker")
          .on("click", function (event) {
            event.stopPropagation();
          });
        $("body").append(groupDom);
        this.draggable(`ump-sdk-group-card-${data.value.grpid}`);
        // 关闭群组卡片
        $(
          `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-close-btn`
        ).click(async () => {
          this.unsubscribeTalkingGroup(data.value.grpid, groupDom);
        });
        // 组呼发起
        $(
          `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-btn`
        ).mousedown(() => {
          $(
            `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-btn`
          ).addClass("ump-sdk-group-card-btn-speaker");
          $(
            `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-btn-talking`
          ).attr("style", "display: block;");
          const param = {
            grpid: data.value.grpid,
            callback: (res) => {
              if (res.rsp !== "0") {
                this.showMessage("组呼发起失败" + res.desc, "error");
              }
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat("组呼发起" + JSON.stringify(res))
                );
              }
            },
          };
          cloudICP.dispatch.group.pttTalkingGroup(param);
        });
        // 组呼放权
        $(
          `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-btn`
        ).mouseup(() => {
          $(
            `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-btn`
          ).removeClass("ump-sdk-group-card-btn-speaker");
          $(
            `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-btn-talking`
          ).attr("style", "display: none;");
          const param = {
            grpid: data.value.grpid,
            callback: (res) => {
              if (res.rsp !== "0") {
                this.showMessage("组呼放权失败" + res.desc, "error");
              }
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat("组呼放权" + JSON.stringify(res))
                );
              }
            },
          };
          cloudICP.dispatch.group.pttreleaseTalkingGroup(param);
        });
        // 展开成员
        $(
          `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-expansion-btn`
        ).click(async () => {
          const expansionBtnDom = $(
            `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-expansion-btn`
          );
          const memberBoxDom = $(
            `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-member-box`
          );
          if (expansionBtnDom.attr("data-isExpansion") === "0") {
            expansionBtnDom.text("收起成员");
            expansionBtnDom.attr("data-isExpansion", "1");
            memberBoxDom.children().remove();
            // const resArr = await this.getGroupMember(data.value.grpid)
            let params = {
              grpid: data.value.grpid,
              callback: (data) => {
                console.log(data, "========data============");
                if (data.rsp === "0") {
                  const resArr = data.list;
                  this.logCallback(
                    UMPSDK.logInfoFormat(
                      "查询群组成员成功" + JSON.stringify(data)
                    )
                  );
                  if (resArr && resArr.length > 0) {
                    resArr.forEach((ite) => {
                      const childrenDom = $(
                        `<p class="ump-sdk-group-card-member-p">${ite.isdn}</p>`
                      );
                      memberBoxDom.append(childrenDom);
                    });
                  }
                } else {
                  this.logCallback(
                    UMPSDK.logInfoFormat(
                      "查询群组成员失败" + JSON.stringify(data)
                    )
                  );
                }
              },
            };
            cloudICP.dispatch.query.queryTalkingGroupMembersV1(params); // 无法对派接组进行查询
          } else {
            expansionBtnDom.text("展开成员");
            expansionBtnDom.attr("data-isExpansion", "0");
            memberBoxDom.children().remove();
          }
        });
      } else if (data && data.value && data.value.speaker) {
        $(
          `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-speaker`
        ).attr("style", "opacity: 1;");
        $(
          `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-speaker-name`
        ).text(`${data.value.speaker} 主讲中`);
        if (this.Emergency.includes("紧急组呼")) {
          $(`#ump-sdk-group-card-${data.value.grpid}`)
            .addClass("border-red")
            .removeClass("border-none");
        }
      } else if (data && data.value && !data.value.speaker) {
        $(
          `#ump-sdk-group-card-${data.value.grpid} .ump-sdk-group-card-speaker`
        ).attr("style", "opacity: 0;");
        if (!this.Emergency.includes("紧急组呼")) {
          $(`#ump-sdk-group-card-${data.value.grpid}`)
            .addClass("border-none")
            .removeClass("border-red");
        }
      }
    }
    unsubscribeTalkingGroup(grpid, groupDom) {
      // 去订阅
      const param = {
        grpid,
        callback: (result) => {
          if (result.rsp === "0") {
            groupDom.remove();
            this.subscribGroupIsdn = this.subscribGroupIsdn.filter(
              (ite) => ite.groupId !== grpid
            );
            this.showMessage("群组去订阅成功", "success");
          } else {
            this.showMessage("群组去订阅失败" + result.desc, "error");
          }
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat("群组去订阅操作" + JSON.stringify(result))
            );
          }
        },
      };
      cloudICP.dispatch.group.unsubscribeTalkingGroup(param);
    }
    getGroupMember(groupId) {
      return new Promise((resolve) => {
        fetch(this.url + "/api/v2/resource/groups/" + groupId, {
          method: "GET",
          headers: {
            Authorization: "token " + this.accessToken,
          },
        })
          .then((response) => response.json())
          .then((data) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("获取群组成员：" + JSON.stringify(data))
              );
            }
            if (data && data.data && Array.isArray(data.data.member)) {
              resolve(data.data.member);
            } else {
              resolve([]);
            }
          })
          .catch((error) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat(
                  "❗获取群组成员失败：" + JSON.stringify(error)
                )
              );
            }
            resolve([]);
          });
      });
    }
    //============================会议相关业务代码==================================
    // 会议初始化构造函数
    meetingCardStyle(style) {
      this.metting.style = style;
    }
    initMetingHandler() {
      this.metting.dial = (mettingType, obj, style) => {
        console.log(obj, "----------------------");
        this.metting.style = style;
        const mettingDialog = document.getElementsByClassName(
          `ump-sdk-metting-out-dialog`
        );
        if (mettingDialog.length) {
          this.showMessage("会议已存在", "warning");
          return;
        }
        let param = "";
        this.metting.isJoin = false;
        this.metting.carmerStatus = obj.carmerStatus;
        this.metting.macStatus = obj.macStatus;
        obj.memberInfos.forEach((ite, index) => {
          let result = this.metting.userInfoList.find(
            (item) => item.isdn === ite.number
          );
          if (result) {
            if (result.category === "1") {
              ite.isCamera = "true";
            } else {
              ite.isCamera = "false";
            }
            if (result.category === "1") {
              ite.h265 = "true";
            } else {
              ite.h265 = "false";
            }
          } else {
            ite.isCamera = "false";
            ite.h265 = "false";
          }
        });
        console.log(
          obj.memberInfos,
          "=============根据用户能力设置isCamera、h265的值================"
        );
        if (mettingType === "immediately") {
          // 即时会议
          param = {
            isVideo: String(obj.carmerStatus),
            confRate: obj.confRate || "",
            memberInfos: obj.memberInfos || [],
            windowInfo: obj.windowInfo || {
              mode: "wssflow",
              width: 800,
              height: 450,
            },

            callback: (rsp) => {
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat("发起即时会议" + JSON.stringify(rsp))
                );
              }
              this.cardStyle.monitorStyle = obj.style;
            },
          };
          console.log(param, "==========即时会议参数============");
          cloudICP.dispatch.conf.createConf(param);
        } else if (mettingType === "appoint") {
          // 预约会议
          param = {
            isVideo: "true",
            confRate: "",
            time: obj.time || "",
            timeZone: obj.timeZone || "",
            timeZoneName: obj.timeZoneName || "",
            memberInfos: obj.memberInfos || [],
            windowInfo: obj.windowInfo || {
              mode: "wssflow",
              width: 800,
              height: 450,
              showToolbar: 0,
              posX: 0,
              posY: 0,
            },
            callback: (rsp) => {
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat("发起预约会议" + JSON.stringify(rsp))
                );
              }
              this.cardStyle.monitorStyle = obj.style;
            },
          };
          console.log(param, "==========预约会议参数============");
          cloudICP.dispatch.conf.createConf(param);
        }
      };
    }
    /*静音会议*/
    muteConference(data) {
      let param = {
        confId: data.value.confId,
        isMute: JSON.stringify(this.metting.macStatus),
        number: this.isdn,
        callback: (data) => {},
      };
      cloudICP.dispatch.conf.muteConfMember(param);
    }
    /*会议上墙*/
    conferenceVideoWall(data) {
      if (this.metting.carmerStatus) {
        let param = {
          confId: data.value.confId,
          number: this.isdn,
          callback: (data) => {},
        };
        cloudICP.dispatch.conf.broadcastConfMember(param);
      }
    }
    // 主动入会
    async activeMetting(obj, style) {
      this.metting.style = style;
      let param = {
        confId: obj.confId,
        unifiedAccessCode: obj.unifiedAccessCode,
        passcode: obj.passcode,
        isVideo: "true",
        windowInfo: {
          width: 800,
          height: 450,
        },
        callback: (data) => {
          if (data.rsp === "0") {
            this.logCallback(
              UMPSDK.logInfoFormat("主动入会成功" + JSON.stringify(data))
            );
          } else {
            this.logCallback(
              UMPSDK.logInfoFormat("主动入会失败" + JSON.stringify(data))
            );
          }
        },
      };
      this.metting.Attendees = []; // 主动入会的会议成员信息list数组
      this.metting.isJoin = true; // 加入会议和创建会议都会进入3003状态码，因此采用锚点进行区分
      cloudICP.dispatch.conf.joinConf(param);
    }
    // 查询调度员调度员是否存在未退出会议
    queryingTheConferenceStatus() {
      let param = {
        callback: (rsp) => {
          if (this.logCallback) {
            this.logCallback(
              UMPSDK.logInfoFormat(
                "查询当前登录坐席是否存在会议" + JSON.stringify(rsp)
              )
            );
          }
        },
      };
      cloudICP.dispatch.conf.queryConfListByAttendee(param);
    }
    closeMetting(data) {
      let dom = document.getElementsByClassName(
        "ump-sdk-metting-endConference"
      )[0];
      if (dom.innerHTML === "离开会议") {
        let param = {
          cid: data.value.cid,
          callback: (res) => {
            if (res.rsp === "0") {
              UMPSDK.logInfoFormat("离开会议成功" + JSON.stringify(res));
            } else {
              UMPSDK.logInfoFormat("离开会议失败" + JSON.stringify(res));
            }
          },
        };
        console.log("主动离开会议，容器移除❌❌❌");
        cloudICP.dispatch.conf.exitVideoConf(param);
        const dom = document.getElementById(
          `ump-sdk-metting-out-dialog-${data.value.confId}`
        );
        if (dom) {
          dom.remove();
        }
      } else {
        let param = {
          confId: data.value.confId,
          callback: (res) => {
            if (res.rsp === "0") {
              UMPSDK.logInfoFormat("主动结束成功" + JSON.stringify(res));
            } else {
              UMPSDK.logInfoFormat("主动结束失败" + JSON.stringify(res));
            }
          },
        };
        console.log("主动结束会议，容器移除❌❌❌");
        cloudICP.dispatch.conf.endConf(param);
        const dom = document.getElementById(
          `ump-sdk-metting-out-dialog-${data.value.confId}`
        );
        if (dom) {
          dom.remove();
        }
      }
      this.clearTimerHandler("videoTimer", this.metting.cid);
      this.metting.setGridPerson = [];
      this.metting.setPageGridPerson = [];
      this.metting.cid = null;
    }
    // 根据画面布局，设置会场布局生成的网格数量
    getGirdNum(type) {
      switch (
        type // 会场布局样式与画面布局保持一致,设置布局网格
      ) {
        case "CP_1_1":
          return (this.metting.girdNum = [1]);
          break;
        case "CP_2_1":
          return (this.metting.girdNum = [1, 2]);
          break;
        case "CP_3_4":
          return (this.metting.girdNum = [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          ]);
          break;
        case "CP_4_1":
          return (this.metting.girdNum = [1, 2, 3, 4]);
          break;
        case "CP_5_1":
          return (this.metting.girdNum = [1, 2, 3, 4, 5]);
          break;
        case "CP_6_1":
          return (this.metting.girdNum = [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          ]);
          break;
        case "CP_7_1":
          return (this.metting.girdNum = [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          ]);
          break;
        case "CP_7_2":
          return (this.metting.girdNum = [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          ]);
          break;
        case "CP_8_1":
          return (this.metting.girdNum = [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          ]);
          break;
        case "CP_9_1":
          return (this.metting.girdNum = [1, 2, 3, 4, 5, 6, 7, 8, 9]);
          break;
        case "CP_10_1":
          return (this.metting.girdNum = [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          ]);
          break;
        case "CP_10_5":
          return (this.metting.girdNum = [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          ]);
          break;
        case "CP_13_5":
          return (this.metting.girdNum = [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          ]);
          break;
        case "CP_16_1":
          return (this.metting.girdNum = [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          ]);
          break;
      }
    }
    // 根据type类型获取不同布局的网格类名集合
    getGridClassName(type) {
      switch (
        type // 会场布局样式与画面布局保持一致,设置布局网格
      ) {
        case "CP_1_1":
          return (this.metting.gridClassName = ["grid0"]);
          break;
        case "CP_2_1":
          return (this.metting.gridClassName = ["grid0", "grid1"]);
          break;
        case "CP_3_4":
          return (this.metting.gridClassName = ["grid0", "grid1", "grid2"]);
          break;
        case "CP_4_1":
          return (this.metting.gridClassName = [
            "grid0",
            "grid1",
            "grid2",
            "grid3",
          ]);
          break;
        case "CP_5_1":
          return (this.metting.gridClassName = [
            "grid0",
            "grid1",
            "grid2",
            "grid3",
            "grid4",
          ]);
          break;
        case "CP_6_1":
          return (this.metting.gridClassName = [
            "grid0",
            "grid1",
            "grid2",
            "grid3",
            "grid4",
            "grid5",
          ]);
          break;
        case "CP_7_1":
          return (this.metting.gridClassName = [
            "grid0",
            "grid1",
            "grid2",
            "grid3",
            "grid4",
            "grid5",
            "grid6",
          ]);
          break;
        case "CP_7_2":
          return (this.metting.gridClassName = [
            "grid0",
            "grid1",
            "grid2",
            "grid3",
            "grid4",
            "grid5",
            "grid6",
          ]);
          break;
        case "CP_8_1":
          return (this.metting.gridClassName = [
            "grid0",
            "grid1",
            "grid2",
            "grid3",
            "grid4",
            "grid5",
            "grid6",
            "grid7",
          ]);
          break;
        case "CP_9_1":
          return (this.metting.gridClassName = [
            "grid0",
            "grid1",
            "grid2",
            "grid3",
            "grid4",
            "grid5",
            "grid6",
            "grid7",
            "grid8",
          ]);
          break;
        case "CP_10_1":
          return (this.metting.gridClassName = [
            "grid0",
            "grid1",
            "grid2",
            "grid3",
            "grid4",
            "grid5",
            "grid6",
            "grid7",
            "grid8",
            "grid9",
          ]);
          break;
        case "CP_10_5":
          return (this.metting.gridClassName = [
            "grid0",
            "grid1",
            "grid2",
            "grid3",
            "grid4",
            "grid5",
            "grid6",
            "grid7",
            "grid8",
            "grid9",
          ]);
          break;
        case "CP_13_5":
          return (this.metting.gridClassName = [
            "grid0",
            "grid1",
            "grid2",
            "grid3",
            "grid4",
            "grid5",
            "grid6",
            "grid7",
            "grid8",
            "grid9",
            "grid10",
            "grid11",
            "grid12",
          ]);
          break;
        case "CP_16_1":
          return (this.metting.gridClassName = [
            "grid0",
            "grid1",
            "grid2",
            "grid3",
            "grid4",
            "grid5",
            "grid6",
            "grid7",
            "grid8",
            "grid9",
            "grid10",
            "grid11",
            "grid12",
            "grid13",
            "grid14",
            "grid15",
          ]);
          break;
      }
    }
    // 创建会议弹窗
    openMettingDialog(data, style) {
      const callee =
        data.value.calltype === "dispatch" ? data.value.src : data.value.callee;
      let whetherToViewParticipants = true;
      const mettDom = $(`
        <div class="ump-sdk ump-sdk-metting-card" style="background:${
          style.bgColor
        };left:${style.posX};top:${style.posY};width:${style.width};height:${
        style.height
      };border-color:${style.borderColor}" id="${
        "ump-sdk-metting-out-dialog-" + data.value.confId
      }">
         <div style="background:${style.bgColor};border-color:${
        style.borderColor
      }" class="ump-sdk-metting-headerInfo">
           <div class="ump-sdk-metting-headerInfo-userCreate"> 
             <span class="ump-sdk-metting-headerInfo-userCreate-title">${
               data.value.caller
             }<span> 创建会议</span></span>
             <span class="ump-sdk-metting-headerInfo-userCreate-info" id="${
               "ump-sdk-metting-headerInfo-userCreate-info-" + data.value.cid
             }"></span>
             <div class="ump-sdk-metting-headerInfo-userCreate-info-showCard">
               <div class="ump-sdk-metting-headerInfo-userCreate-info-showCard-meetInfo">
                 <span class="ump-sdk-metting-headerInfo-userCreate-info-showCard-meetInfo-label">会议信息：</span>
                 <span class="ump-sdk-metting-headerInfo-userCreate-info-showCard-meetInfo-copy"></span>
               </div>
               <div class="ump-sdk-metting-headerInfo-userCreate-info-showCard-meetID">
                 <span class="ump-sdk-metting-headerInfo-userCreate-info-showCard-meetInfo-label">会议ID：</span>
                 <span>${this.metting.infoMation?.value.confId}</span>
               </div>
               <div class="ump-sdk-metting-headerInfo-userCreate-info-showCard-meetType">
                 <span class="ump-sdk-metting-headerInfo-userCreate-info-showCard-meetInfo-label">会议类型：</span>
                 <span>视频会议</span>
               </div>
               <div class="ump-sdk-metting-headerInfo-userCreate-info-showCard-meetPwd">
                 <span class="ump-sdk-metting-headerInfo-userCreate-info-showCard-meetInfo-label">会议密码：</span>
                 <span>${this.metting.infoMation?.value.passcode}</span>
               </div>
               <div class="ump-sdk-metting-headerInfo-userCreate-info-showCard-meetCid">
                 <span class="ump-sdk-metting-headerInfo-userCreate-info-showCard-meetInfo-label">接入号：</span>
                 <span>${
                   this.metting.infoMation?.value.unifiedAccessCode
                 }</span>
               </div>
             </div>
           </div>
           <div class="ump-sdk-metting-headerInfo-TimesBox">
             <div class="ump-sdk-metting-headerInfo-TimesBox-meetStart">会议已开始：</div>
             <div class="ump-sdk-metting-headerInfo-TimesBox-timeNow" data-time="0"></div>
             <div class="ump-sdk-metting-headerInfo-TimesBox-videoLayout" id="ump-sdk-metting-headerInfo-TimesBox-videoLayout-grad">
               <div class="ump-sdk-metting-headerInfo-TimesBox-videoLayout-icon"></div>
               <div class="ump-sdk-metting-headerInfo-TimesBox-videoLayout-set">画面布局</div>
               <div style="${
                 this.metting.style
               }" class="ump-sdk-metting-headerInfo-TimesBox-videoLayout-setLayout">
                 <div class="ump-sdk-metting-headerInfo-TimesBox-videoLayout-setLayout-ul">
                  ${this.metting.layoutType
                    .map((item) => {
                      return `<div class="ump-sdk-metting-headerInfo-TimesBox-videoLayout-setLayout-li ump-sdk-metting-headerInfo-TimesBox-videoLayout-setLayout-li-${item.icon}">
                   <div class="ump-sdk-metting-headerInfo-TimesBox-videoLayout-setLayout-icon ${item.icon}" type="${item.type}" ></div>
                   <div class="ump-sdk-metting-headerInfo-TimesBox-videoLayout-setLayout-typeName">${item.name}</div>
                  </div>`;
                    })
                    .join("")}
                 </div>
               </div>
             </div>
           </div>
           <div class="ump-sdk-metting-headerInfo-ActionsBox">
             <div class="ump-sdk-metting-headerInfo-ActionsBox-square" id="ump-sdk-metting-headerInfo-ActionsBox-square"></div>
             <div class="ump-sdk-metting-headerInfo-ActionsBox-not-square" id="ump-sdk-metting-headerInfo-ActionsBox-not-square"></div>
             <div class="ump-sdk-metting-headerInfo-ActionsBox-close"></div>
           </div>
           <div></div>
           <div></div>
         </div>
         <div style="background:${style.bgColor};border-color:${
        style.borderColor
      }" class="ump-sdk-metting-player" id="${
        "ump-sdk-metting-player-" + data.value.cid
      }"></div>
         <div style="background:${style.bgColor};border-color:${
        style.borderColor
      }" class="ump-sdk-metting-footerActive">
             <div class="ump-sdk-metting-box">
               <div class="ump-sdk-metting-Mic">
                 <div class="ump-sdk-metting-audio"> </div>
                 <div class="ump-sdk-metting-mute"> </div>
                 <div class="ump-sdk-metting-text">静音</div>
               </div>
               <div class="ump-sdk-metting-requests">
                 <div class="ump-sdk-metting-requestsimg"></div>
                 <div class="ump-sdk-metting-text">邀请</div>
               </div>
               <div class="ump-sdk-metting-requests-person">
               <textarea placeholder="请输入isdn并以英文逗号分割" class="ump-sdk-metting-requests-input" id="ump-sdk-metting-requests-input-${
                 data.value.caller
               }"></textarea>
               </div>
               <div class="ump-sdk-metting-viewAttendees">
                 <div class="ump-sdk-metting-viewAttendees-img"></div>
                 <div class="ump-sdk-metting-text ump-sdk-metting-viewAttendees-open">查看与会者</div>
                 <div class="ump-sdk-metting-text ump-sdk-metting-viewAttendees-close">关闭与会者</div>
               </div>
            </div>
            <button class="ump-sdk-metting-endConference" id="ump-sdk-metting-endConference">结束会议</button>
         </div>
         <div style="background:${style.bgColor};border-color:${
        style.borderColor
      }" class="ump-sdk-metting-right">
           <div class="ump-sdk-metting-right-participant">与会者（<span id="ump-sdk-metting-right-participant-online">1</span>/<span id="ump-sdk-metting-right-participant-totle">3</span>）</div>
           <div class="ump-sdk-metting-right-userList">
             <div class="ump-sdk-metting-right-userList-top" id="ump-sdk-metting-right-userList-top"></div>
             <div class="ump-sdk-metting-right-userList-otherUser" id="ump-sdk-metting-right-userList-otherUser"></div>
             <div class="ump-sdk-metting-right-userList-fotterAction">
               <div class="ump-sdk-metting-right-userList-fotterAction-audience" id="ump-sdk-metting-right-userList-fotterAction-audience">全场静音</div>
               <div class="ump-sdk-metting-right-userList-fotterAction-allcall" id="ump-sdk-metting-right-userList-fotterAction-allcall">一键呼叫</div>
               <div class="ump-sdk-metting-right-userList-fotterAction-setLayout" id="ump-sdk-metting-right-userList-fotterAction-setLayout">会场布局</div>
             </div>
           </div>
         </div>
         <div style="background:${style.bgColor};border-color:${
        style.borderColor
      }" class="ump-sdk-meeting-layout">
          <div class="ump-sdk-meeting-layout-header">
           <div class="ump-sdk-meeting-layout-header-title">会场设置</div>
           <div class="ump-sdk-meeting-layout-header-ESC"></div>
          </div>
          <div class="ump-sdk-meeting-layout-content">
           <div class="ump-sdk-meeting-layout-content-left">
            <div class="ump-sdk-meeting-layout-content-left-title">与会成员列表</div>
            <div class="ump-sdk-meeting-layout-content-left-personBox" id="ump-sdk-meeting-layout-content-left-personBox"></div>
           </div>
           <div class="ump-sdk-meeting-layout-content-middle">
            <div class="ump-sdk-meeting-layout-content-middle-iconbox">
             <div class="ump-sdk-meeting-layout-content-middle-iconbox-num1"></div>
             <div class="ump-sdk-meeting-layout-content-middle-iconbox-num2"></div>
            </div>
           </div>
           <div class="ump-sdk-meeting-layout-content-right">
            <div class="ump-sdk-meeting-layout-content-right-header">
             <div class="ump-sdk-meeting-layout-content-right-header-title">会场布局预案</div>
             <div class="ump-sdk-meeting-layout-content-right-header-clear">一键清空</div>
            </div>
            <div class="ump-sdk-meeting-layout-content-right-content" id="ump-sdk-meeting-layout-content-right-content">
          
            </div>
           </div>
          </div>
          <div class="ump-sdk-meeting-layout-footer">
            <div class="ump-sdk-meeting-layout-footer-cancel">取消</div>
            <div class="ump-sdk-meeting-layout-footer-sure">确定</div>
          </div>
         </div>
        </div>
      `);
      $("body").append(mettDom);
      let that = this;
      const draggableInstance = this.draggable(
        `ump-sdk-metting-out-dialog-${data.value.confId}`
      );
      const meetPlayerDom = document.getElementById(
        `${"ump-sdk-metting-player-" + data.value.cid}`
      );
      const videoTimer = setInterval(() => {
        // 通话计时
        const tipDom = $(`.ump-sdk-metting-headerInfo-TimesBox-timeNow`);
        const timeNum = Number(tipDom.attr("data-time")) + 1;
        tipDom.attr("data-time", timeNum);
        tipDom.text(`${UMPSDK.timeHandler(timeNum)}`);
      }, 1000);
      const obj = {
        cid: data.value.cid,
        timer: videoTimer,
      };
      // 链接会议
      this.timer.videoTimer.push(obj);
      this.metting.cid = data.value.cid;
      try{
        this.player[`player${data.value.cid}`] = this.createYuvPlayer(
          data,
          meetPlayerDom
        );
      }
      catch(error) {
        console.log("MSP_Player",error);
      };
      try{

        this.player[`player${data.value.cid}`].changeVideResolution({
          width: 800,
          height: 450,
        });
      } catch(error) {
        console.log("MSP_Player",error);
      }
      // 点击查看会议详情
      let MettingInfoTarget = false;
      let MettingInfoCard = document.getElementsByClassName(
        "ump-sdk-metting-headerInfo-userCreate-info-showCard"
      )[0];
      $(".ump-sdk-metting-headerInfo-userCreate-info").click(() => {
        MettingInfoTarget = !MettingInfoTarget;
        if (MettingInfoTarget) {
          MettingInfoCard.style.display = "block";
        } else {
          MettingInfoCard.style.display = "none";
        }
      });
      // 按钮主动结束会议
      $(".ump-sdk-metting-endConference").click(() => {
        this.closeMetting(data);
      });
      // X按钮主动结束会议
      $(".ump-sdk-metting-headerInfo-ActionsBox-close").click(() => {
        this.closeMetting(data);
      });
      // 全屏会议
      $(`#ump-sdk-metting-headerInfo-ActionsBox-square`).click(() => {
        const mettingCardDom = $(
          `#ump-sdk-metting-out-dialog-${data.value.confId}`
        );
        const square = document.getElementById(
          `ump-sdk-metting-headerInfo-ActionsBox-square`
        );
        const notsquare = document.getElementById(
          `ump-sdk-metting-headerInfo-ActionsBox-not-square`
        );
        const headerBox = document.getElementsByClassName(
          "ump-sdk-metting-headerInfo"
        )[0];
        const footerBox = document.getElementsByClassName(
          "ump-sdk-metting-footerActive"
        )[0];
        const viewAttendees = document.getElementsByClassName(
          "ump-sdk-metting-viewAttendees"
        )[0];
        const requests = document.getElementsByClassName(
          "ump-sdk-metting-requests"
        )[0];
        mettingCardDom.addClass("ump-sdk-metting-card-full-width-height");
        square.style.display = "none";
        viewAttendees.style.display = "none";
        requests.style.display = "none";
        notsquare.style.display = "block";
        headerBox.style.top = "0px";
        headerBox.style.width = "100vw";
        footerBox.style.bottom = "0px";
        footerBox.style.width = "100vw";
        footerBox.style.background = "rgba(0,0,0,0)";
        headerBox.style.background = "rgba(0,0,0,0)";
        // 全屏后禁止拖动，并且清空内联样式
        draggableInstance.disableDragging();
        console.log(mettingCardDom.width(), mettingCardDom.height());
        if (this.player[`player${data.value.cid}`]) {
          this.player[`player${data.value.cid}`].changeVideResolution({
            width: parseInt(mettingCardDom.width()),
            height: parseInt(mettingCardDom.height()),
          });
        }
      });
      // 结束全屏
      $("#ump-sdk-metting-headerInfo-ActionsBox-not-square").click(() => {
        const mettingCardDom = $(
          `#ump-sdk-metting-out-dialog-${data.value.confId}`
        );
        const square = document.getElementById(
          `ump-sdk-metting-headerInfo-ActionsBox-square`
        );
        const notsquare = document.getElementById(
          `ump-sdk-metting-headerInfo-ActionsBox-not-square`
        );
        const headerBox = document.getElementsByClassName(
          "ump-sdk-metting-headerInfo"
        )[0];
        const footerBox = document.getElementsByClassName(
          "ump-sdk-metting-footerActive"
        )[0];
        const viewAttendees = document.getElementsByClassName(
          " ump-sdk-metting-viewAttendees"
        )[0];
        const requests = document.getElementsByClassName(
          "ump-sdk-metting-requests"
        )[0];
        square.style.display = "block";
        viewAttendees.style.display = "block";
        requests.style.display = "block";
        notsquare.style.display = "none";
        headerBox.style.top = "-50px";
        footerBox.style.bottom = "-100px";
        footerBox.style.width = style.width ? style.width : "800px";
        footerBox.style.background = style.bgColor ? style.bgColor : "#044069";
        headerBox.style.background = style.bgColor ? style.bgColor : "#044069";
        if (this.metting.viewAttendeesTarget) {
          let styleWidth = style.width ? style.width.replace("px", "") : "";
          headerBox.style.width = style.width
            ? `${styleWidth + 200}px`
            : "1000px";
        } else {
          headerBox.style.width = style.width ? style.width : "800px";
        }
        draggableInstance.enableDragging();
        mettingCardDom.removeClass("ump-sdk-metting-card-full-width-height");
        if (this.player[`player${data.value.cid}`]) {
          let styleWidth = style.width ? style.width.replace("px", "") : "";
          let styleHeight = style.height ? style.height.replace("px", "") : "";
          this.player[`player${data.value.cid}`].changeVideResolution({
            width: style.width ? parseInt(styleWidth) : 800,
            height: style.height ? parseInt(styleHeight) : 450,
          });
        }
      });
      // 点击查看与会者、关闭与会者
      const viewAttendeesOpen = document.getElementsByClassName(
        "ump-sdk-metting-viewAttendees-open"
      )[0];
      const viewAttendeesClose = document.getElementsByClassName(
        "ump-sdk-metting-viewAttendees-close"
      )[0];
      const AttendeesRightCard = document.getElementsByClassName(
        "ump-sdk-metting-right"
      )[0];
      const headerBox = document.getElementsByClassName(
        "ump-sdk-metting-headerInfo"
      )[0];
      this.metting.viewAttendeesTarget = false;
      $(".ump-sdk-metting-viewAttendees").click(() => {
        this.metting.viewAttendeesTarget = !this.metting.viewAttendeesTarget;
        if (this.metting.viewAttendeesTarget) {
          let styleWidth = style.width ? style.width.replace("px", "") : "";
          headerBox.style.width = style.width
            ? `${styleWidth + 200}px`
            : "1000px";
          AttendeesRightCard.style.display = "block";
          viewAttendeesOpen.style.display = "none";
          viewAttendeesClose.style.display = "block";
        } else {
          headerBox.style.width = style.width ? style.width : "800px";
          AttendeesRightCard.style.display = "none";
          viewAttendeesOpen.style.display = "block";
          viewAttendeesClose.style.display = "none";
        }
      });
      // 复制会议信息
      $(
        ".ump-sdk-metting-headerInfo-userCreate-info-showCard-meetInfo-copy"
      ).click(() => {
        const info = `会议id:${data.value.confId},会议类型：视频会议，会议密码：'',接入号：${data.value.caller}`;
        var aux = document.createElement("input");
        aux.setAttribute("value", info);
        document.body.appendChild(aux);
        aux.select();
        document.execCommand("copy");
        document.body.removeChild(aux);
        this.showMessage("复制内容成功", "success");
      });
      // 开启、关闭麦克风静音
      const audio = document.getElementsByClassName("ump-sdk-metting-audio")[0];
      const mute = document.getElementsByClassName("ump-sdk-metting-mute")[0];
      $(".ump-sdk-metting-Mic").click(() => {
        this.metting.MicTarget = this.metting.MicTarget;
        if (this.metting.MicTarget) {
          audio.style.display = "none";
          mute.style.display = "block";
          let param = {
            confId: data.value.confId,
            isMute: "true",
            number: this.isdn,
            callback: (res) => {
              // 回调处理：日志记录
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat(
                    `禁用（${this.isdn}）的麦克风` + JSON.stringify(res)
                  )
                );
              }
            },
          };
          cloudICP.dispatch.conf.muteConfMember(param);
        } else {
          audio.style.display = "block";
          mute.style.display = "none";
          let param = {
            confId: data.value.confId,
            isMute: "false",
            number: this.isdn,
            callback: (res) => {
              if (this.logCallback) {
                this.logCallback(
                  UMPSDK.logInfoFormat(
                    `启用（${this.isdn}）的麦克风` + JSON.stringify(res)
                  )
                );
              }
            },
          };
          console.log(param, "=========param============");
          cloudICP.dispatch.conf.muteConfMember(param);
        }
      });

      // 邀请与会者
      const requestsInput = document.getElementById(
        `ump-sdk-metting-requests-input-${data.value.caller}`
      );
      let requestsTarget = false;
      $(".ump-sdk-metting-requests").click(() => {
        requestsTarget = !requestsTarget;
        if (requestsTarget) {
          requestsInput.style.display = "block";
        } else {
          requestsInput.style.display = "none";
        }
      });
      $(".ump-sdk-metting-requests-input").blur(() => {
        requestsTarget = !requestsTarget;
        const requestsInput = document.getElementById(
          `ump-sdk-metting-requests-input-${data.value.caller}`
        );
        if (requestsTarget) {
          requestsInput.style.display = "block";
        } else {
          requestsInput.style.display = "none";
        }
        let requestsInputValue = requestsInput.value.split(","); // 获取邀请成员的数组
        let memberInfos = [];
        if (requestsInputValue.length == 0) {
          this.showMessage("请输入邀请入会者isdn");
          return;
        }
        requestsInputValue.forEach((item) => {
          memberInfos.push({
            number: item,
            name: item,
            isCamera: "true",
            isWatchOnly: "false",
            h265: "true",
          });
        });
        let param = {
          confId: data.value.confId,
          memberInfos: memberInfos,
          callback: (res) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat(`邀请成员入会` + JSON.stringify(res))
              );
            }
          },
        };
        cloudICP.dispatch.conf.addConfMembers(param);
      });
      // 全场静音
      $(".ump-sdk-metting-right-userList-fotterAction-audience").click(() => {
        let dom = document.getElementById(
          "ump-sdk-metting-right-userList-fotterAction-audience"
        ); //根据Id获取元素
        this.metting.audience = !this.metting.audience;
        let param;
        if (this.metting.audience) {
          // 全场会议静音
          param = {
            confId: data.value.confId,
            isMute: "true",
            callback: (data) => {},
          };
          if (dom) {
            dom.innerText = "解除静音";
          }
        } else {
          // 全场会议静音取消
          param = {
            confId: data.value.confId,
            isMute: "false",
            callback: (data) => {},
          };
          if (dom) {
            dom.innerText = "全场静音";
          }
        }
        cloudICP.dispatch.conf.muteConf(param);
      });
      // 一键呼叫
      $(".ump-sdk-metting-right-userList-fotterAction-allcall").click(() => {
        this.metting.unJoinMetting.forEach((item) => {
          let param = {
            confId: data.value.confId,
            memberInfo: {
              number: item,
            },
            callback: (data) => {},
          };
          cloudICP.dispatch.conf.callConfMember(param);
        });
      });
      // 禁用麦克风
      $(document).on(
        "click",
        ".ump-sdk-metting-right-userList-MIC",
        function (e) {
          let dom = $(e.target);
          let isdn = dom.attr("isdn");
          let chair = dom.attr("chair");
          if (that.isdn === chair) {
            // 如果是主席才能使用此功能
            let param = {
              confId: data.value.confId,
              isMute: "false",
              number: isdn,
              callback: (data) => {},
            };
            cloudICP.dispatch.conf.muteConfMember(param);
          }
        }
      );
      $(document).on(
        "click",
        ".ump-sdk-metting-right-userList-talking",
        function (e) {
          let dom = $(e.target);
          let isdn = dom.attr("isdn");
          let chair = dom.attr("chair");
          if (that.isdn === chair) {
            // 如果是主席才能使用此功能
            let param = {
              confId: data.value.confId,
              isMute: "true",
              number: isdn,
              callback: (data) => {},
            };
            cloudICP.dispatch.conf.muteConfMember(param);
          }
        }
      );
      // 鼠标事件控制人员操作菜单组件显隐
      $(document).on(
        "mouseenter",
        ".ump-sdk-meeting-right-userList-menu",
        function (e) {
          let dom = $(e.target);
          let index = dom.attr("index");
          let menuDom = document.getElementsByClassName(
            "ump-sdk-metting-right-meetingContextMenu-box"
          )[index];
          if (menuDom) {
            menuDom.style.display = "block";
          }
        }
      );
      $(document).on(
        "mouseleave",
        ".ump-sdk-meeting-right-userList-menu",
        function (e) {
          let dom = $(e.target);
          let index = dom.attr("index");
          let menuDom = document.getElementsByClassName(
            "ump-sdk-metting-right-meetingContextMenu-box"
          )[index];
          if (menuDom) {
            menuDom.style.display = "none";
          }
        }
      );
      $(document).on(
        "mouseleave",
        ".ump-sdk-metting-right-meetingContextMenu-box",
        function (e) {
          let dom = $(e.target);
          let index = dom.attr("index");
          let menuDom = document.getElementsByClassName(
            "ump-sdk-metting-right-meetingContextMenu-box"
          )[index];
          if (menuDom) {
            menuDom.style.display = "none";
          }
        }
      );
      // 转让主席
      $(document).on(
        "click",
        ".ump-sdk-metting-right-meetingContextMenu-li-chairperson",
        function (e) {
          let dom = $(e.target);
          let isdn = dom.attr("isdn");
          /*遍历用户信息，查询转让对象的能力*/
          that.metting.userInfoList.map((item) => {
            if (item.isdn == isdn) {
              if (item.category == 0) {
                let param = {
                  confId: data.value.confId,
                  applier: isdn,
                  callback: (data) => {
                    that.logCallback(
                      UMPSDK.logInfoFormat("转让主席：" + JSON.stringify(data))
                    );
                  },
                };
                cloudICP.dispatch.conf.setChairman(param);
              } else {
                that.showMessage(
                  "不可转让主席给非坐席用户",
                  "warning",
                  null,
                  "targetID"
                );
              }
            }
          });
        }
      );
      // 重呼成员
      $(document).on(
        "click",
        ".ump-sdk-metting-right-meetingContextMenu-li-Recall",
        function (e) {
          let dom = $(e.target);
          let isdn = dom.attr("isdn");
          let param = {
            confId: data.value.confId,
            memberInfo: {
              number: isdn,
            },
            callback: () => {},
          };
          cloudICP.dispatch.conf.callConfMember(param);
        }
      );
      // 移除成员
      $(document).on(
        "click",
        ".ump-sdk-metting-right-meetingContextMenu-li-Remove",
        function (e) {
          let dom = $(e.target);
          let isdn = dom.attr("isdn");
          let param = {
            confId: data.value.confId,
            memberInfo: {
              number: isdn,
            },
            callback: () => {},
          };
          cloudICP.dispatch.conf.delConfMember(param);
        }
      );
      // 控制画面布局显隐
      $(".ump-sdk-metting-headerInfo-TimesBox-videoLayout-icon").click(() => {
        this.metting.layoutStatus = !this.metting.layoutStatus;
        let dom = document.getElementsByClassName(
          "ump-sdk-metting-headerInfo-TimesBox-videoLayout-setLayout"
        )[0];
        if (this.metting.layoutStatus) {
          dom.style.display = "block";
        } else {
          dom.style.display = "none";
        }
      });
      // 设置画面布局
      $(
        ".ump-sdk-metting-headerInfo-TimesBox-videoLayout-setLayout-icon"
      ).click((e) => {
        let layuot = document.getElementsByClassName(
          "ump-sdk-metting-headerInfo-TimesBox-videoLayout-setLayout"
        )[0];
        let dom = $(e.target);
        let type = dom.attr("type");
        this.metting.choseLayoutType = type; // 存储用户选择的画面布局模式,用于设置会场布局
        this.getGirdNum(type);
        this.getGridClassName(type);
        let numberList = [];
        this.metting.memberList.forEach((item) => {
          numberList.push({ number: String(item.number) });
        });
        let param = {
          confId: data.value.confId,
          mixPictureType: type,
          memberInfos: numberList,
          callback: () => {
            this.metting.layoutStatus = false;
            layuot.style.display = "none";
          },
        };
        console.log(param, "分屏被调用了");
        cloudICP.dispatch.conf.broadcastMixPicture(param);
      });
      // 打开设置会场布局弹窗
      $(".ump-sdk-metting-right-userList-fotterAction-setLayout").click(() => {
        const isPersonDom = document.getElementsByClassName(
          "ump-sdk-meeting-layout-content-left-personBox-list"
        )[0];
        if (isPersonDom) return; // 判断节点是否已添加，避免节点重复
        const layoutDom = document.getElementsByClassName(
          "ump-sdk-meeting-layout"
        )[0];
        layoutDom.style.display = "block";
        // 添加入会人员节点
        const personDom = $(`
         <div class="ump-sdk-meeting-layout-content-left-personBox-list">
           ${that.metting.memberList
             .map((item, index) => {
               return ` <div class="ump-sdk-meeting-layout-content-left-personBox-list-line">
                      <i class="ump-sdk-meeting-layout-content-left-personBox-list-line-icon"></i>
                      <span class="ump-sdk-meeting-layout-content-left-personBox-list-line-isdn" key="${index}" number="${item.number}">${item.number}</span>
                      </div>`;
             })
             .join("")}
         
         </div>
        `);
        // 布局网格容器
        const personDom2 = $(`
         <div style="${
           this.metting.style
         }" class="ump-sdk-meeting-layout-content-right-content-box gird-model-${
          that.metting.choseLayoutType
        }">
           ${that.metting.girdNum
             .map((item, index) => {
               return `<div class="ump-sdk-meeting-layout-content-right-content-cardmini  grid${index}
        id="ump-sdk-meeting-layout-content-right-content-card-${index}"></div>`;
             })
             .join("")}
         </div>
        `);
        $("#ump-sdk-meeting-layout-content-left-personBox").append(personDom);
        $(".ump-sdk-meeting-layout-content-right-content").append(personDom2);

        //已保存的
        console.log(
          that.metting.setPageGridPerson,
          "保存保存保存保存保存保存保存保存保存保存保存"
        );
        console.log(
          that.metting.setGridPerson,
          "页面渲染页面渲染页面渲染页面渲染页面渲染页面渲染页面渲染"
        );
        that.metting.setGridPerson = JSON.parse(
          JSON.stringify(that.metting.setPageGridPerson)
        );
        if (
          that.metting.setGridPerson &&
          that.metting.setGridPerson.length > 0
        ) {
          that.metting.setGridPerson.forEach((person, index) => {
            // 如果人员没有被添加过
            if (
              !document.getElementById(
                `ump-sdk-meeting-layout-content-left-personBox-list-line-${person}`
              )
            ) {
              let personCard = $(`
                <div class="ump-sdk-meeting-layout-content-left-personBox-list-line gridperson" id="ump-sdk-meeting-layout-content-left-personBox-list-line-${person}">
                  <div class="ump-sdk-meeting-layout-content-left-personBox-list-line-left">
                    <i class="ump-sdk-meeting-layout-content-left-personBox-list-line-icon"></i>
                    <span class="ump-sdk-meeting-layout-content-left-personBox-list-line-isdn" number="${person}">${person}</span>
                  </div>
                  <div class="ump-sdk-meeting-layout-content-right-content-cardmini-ESC" id="ump-sdk-meeting-layout-content-right-content-cardmini-ESC-${person}" number="${person}"></div>
                </div>
              `);

              // 将新节点插入到对应位置
              let gridIndex = that.metting.setGridPerson.indexOf(person);
              if (gridIndex === -1) {
                let emptySlotIndex = that.metting.setGridPerson.indexOf(0); // 查找空位
                if (emptySlotIndex !== -1) {
                  // 替换空位为当前人员
                  that.metting.setGridPerson[emptySlotIndex] = person;
                } else {
                  // 如果没有空位，直接添加
                  that.metting.setGridPerson.push(person);
                }
              }

              // 根据人员位置插入到对应的布局
              $(`.grid${gridIndex}`).append(personCard);

              // 设置布局背景图片容器
              let gridDom = document.getElementsByClassName(
                `grid${gridIndex}`
              )[0];
              // 设置布局背景图片容器的样式
              gridDom.style.backgroundSize = 0;
            } else {
              that.showMessage("该人员已在布局中", "error");
            }
          });
        }
      });
      // 关闭设置会场布局弹窗
      $(".ump-sdk-meeting-layout-header-ESC").click(() => {
        const layoutDom = document.getElementsByClassName(
          "ump-sdk-meeting-layout"
        )[0];
        layoutDom.style.display = "none";
        const isPersonDom = document.getElementsByClassName(
          "ump-sdk-meeting-layout-content-left-personBox-list"
        )[0];
        const layoutDomBox = document.getElementsByClassName(
          "ump-sdk-meeting-layout-content-right-content-box"
        )[0];
        isPersonDom.remove();
        layoutDomBox.remove();
        this.metting.setGridPerson = [];
      });
      $(".ump-sdk-meeting-layout-footer-cancel").click(() => {
        const layoutDom = document.getElementsByClassName(
          "ump-sdk-meeting-layout"
        )[0];
        layoutDom.style.display = "none";
        const isPersonDom = document.getElementsByClassName(
          "ump-sdk-meeting-layout-content-left-personBox-list"
        )[0];
        const layoutDomBox = document.getElementsByClassName(
          "ump-sdk-meeting-layout-content-right-content-box"
        )[0];
        isPersonDom.remove();
        layoutDomBox.remove();
        this.metting.setGridPerson = [];
      });
      $(document).on(
        "dblclick",
        ".ump-sdk-meeting-layout-content-left-personBox-list-line-isdn",
        function (e) {
          let dom = $(e.target);
          let index = dom.attr("key");
          let number = dom.attr("number");
          // 布局添加的人员节点
          let personCrad =
            $(` <div class="ump-sdk-meeting-layout-content-left-personBox-list-line gridperson" id="ump-sdk-meeting-layout-content-left-personBox-list-line-${number}">
                      <div class="ump-sdk-meeting-layout-content-left-personBox-list-line-left"> 
                       <i class="ump-sdk-meeting-layout-content-left-personBox-list-line-icon"></i>
                       <span class="ump-sdk-meeting-layout-content-left-personBox-list-line-isdn" number="${number}">${number}</span>
                      </div>
                      <div class="ump-sdk-meeting-layout-content-right-content-cardmini-ESC" id="ump-sdk-meeting-layout-content-right-content-cardmini-ESC-${Number(
                        number
                      )}" number=${number}></div>
                      </div>`);
          if (
            that.metting.setGridPerson &&
            that.metting.setGridPerson.length > 0
          ) {
            let result = that.metting.setGridPerson.indexOf(Number(number));
            if (result === -1) {
              // 添加确认是否已存在
              let index = that.metting.setGridPerson.indexOf(0); // 确认上次操作是否删除了布局中的人员,删除操作会将原number变更为0
              if (index === -1) {
                that.metting.setGridPerson.push(Number(number));
              } else {
                // 未添加时，确认上次操作是否删除了布局中的人员，在空缺的布局中插入新数据
                that.metting.setGridPerson.splice(index, 1, Number(number));
              }
              $(
                `.grid${that.metting.setGridPerson.indexOf(Number(number))}`
              ).append(personCrad);
              // 布局背景图片容器
              let gridDom = document.getElementsByClassName(
                `grid${that.metting.setGridPerson.indexOf(Number(number))}`
              )[0];
              // 布局删除按钮
              gridDom.style.backgroundSize = 0;
            } else {
              that.showMessage("该人员已在布局中", "error");
            }
          } else {
            that.metting.setGridPerson.push(Number(number));
            $(
              `.grid${that.metting.setGridPerson.indexOf(Number(number))}`
            ).append(personCrad);
            // 布局背景图片容器
            let gridDom = document.getElementsByClassName(
              `grid${that.metting.setGridPerson.indexOf(Number(number))}`
            )[0];
            gridDom.style.backgroundSize = 0;
          }
          console.log(that.metting.setGridPerson);
        }
      );
      // 删除已布局人员
      $(document).on(
        "click",
        ".ump-sdk-meeting-layout-content-right-content-cardmini-ESC",
        function (e) {
          let dom = $(e.target);
          let number = dom.attr("number");
          let gridPerson = document.getElementById(
            `ump-sdk-meeting-layout-content-left-personBox-list-line-${Number(
              number
            )}`
          );
          let gridDom = document.getElementsByClassName(
            `grid${that.metting.setGridPerson.indexOf(Number(number))}`
          )[0];
          gridPerson.remove();
          gridDom.style.backgroundSize = "16px";
          let index = that.metting.setGridPerson.indexOf(Number(number));
          // that.metting.setGridPerson.splice(index, 1, 0);
          that.metting.setGridPerson = that.metting.setGridPerson.filter(
            (v) => v != number
          );
          console.log(
            that.metting.setGridPerson,
            "===========that.metting.setGridPerson============"
          );
        }
      );
      // 一键清空
      $(`.ump-sdk-meeting-layout-content-right-header-clear`).click(() => {
        that.metting.setGridPerson.forEach((item) => {
          let gridPerson = document.getElementById(
            `ump-sdk-meeting-layout-content-left-personBox-list-line-${Number(
              item
            )}`
          );
          let gridDom = document.getElementsByClassName(
            `grid${that.metting.setGridPerson.indexOf(Number(item))}`
          )[0];
          gridDom.style.backgroundSize = "16px";
          gridPerson.remove();
        });
        that.metting.setGridPerson = [];
      });
      // 启用会场布局
      $(document).on(
        "click",
        ".ump-sdk-meeting-layout-footer-sure",
        function (e) {
          let numberList = [];
          that.metting.setGridPerson.forEach((item) => {
            numberList.push({ number: String(item) });
          });
          let param = {
            confId: data.value.confId,
            mixPictureType: that.metting.choseLayoutType,
            memberInfos: numberList,
            callback: () => {
              // 移除添加的自定义容器
              const layoutDom = document.getElementsByClassName(
                "ump-sdk-meeting-layout"
              )[0];
              layoutDom.style.display = "none";
              const isPersonDom = document.getElementsByClassName(
                "ump-sdk-meeting-layout-content-left-personBox-list"
              )[0];
              const layoutDomBox = document.getElementsByClassName(
                "ump-sdk-meeting-layout-content-right-content-box"
              )[0];
              isPersonDom.remove();
              layoutDomBox.remove();
            },
          };
          console.log(param, "画面布局被调用了");
          cloudICP.dispatch.conf.broadcastMixPicture(param);
          that.metting.setPageGridPerson = that.metting.setGridPerson;
        }
      );
    }
    // gis
    initGis() {
      // gis订阅
      this.gis.subscribeGIS = (isdnList) => {
        let uelist = [];
        isdnList.forEach((isdn) => {
          uelist.push({ isdn: isdn });
        });
        const params = {
          uelist: uelist,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("订阅GIS" + JSON.stringify(rsp))
              );
            }
          },
        };
        cloudICP.dispatch.gis.subscribeGIS(params);
      };
      // 查询终端历史轨迹
      this.gis.queryTrack = (
        ueid,
        begintime,
        endtime,
        offset,
        limit,
        policy,
        maxnum
      ) => {
        if (!ueid) {
          this.showMessage("请输入终端号码", "warning");
          return;
        }
        let begin, end;
        if (begintime) {
          begin = this.convertDateToYYYYMMDDHHMMSS(begintime);
        } else {
          this.showMessage("请输入开始时间", "warning");
          return;
        }
        if (endtime) {
          end = this.convertDateToYYYYMMDDHHMMSS(endtime);
        } else {
          this.showMessage("请输入结束时间", "warning");
          return;
        }
        const days = Math.floor(
          (new Date(endtime).getTime() - new Date(begintime).getTime()) /
            (1000 * 60 * 60 * 24)
        );
        if (days > 7) {
          this.showMessage("结束时间与开始时间相差不能超过7天", "warning");
          return;
        }
        const params = {
          ueid: ueid,
          begintime: begin,
          endtime: end,
          offset: offset,
          limit: limit,
          policy: policy,
          maxnum: maxnum,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("查询GIS轨迹" + JSON.stringify(rsp))
              );
            }
          },
        };
        cloudICP.dispatch.query.queryGISTrack(params);
      };
    }
    convertDateToYYYYMMDDHHMMSS(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2);
      const day = ("0" + date.getDate()).slice(-2);
      const hours = ("0" + date.getHours()).slice(-2);
      const minutes = ("0" + date.getMinutes()).slice(-2);
      const seconds = ("0" + date.getSeconds()).slice(-2);
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
    // 订阅用户
    initSubscribeUserStatus() {
      this.subscribe.userStatus = (isdnList) => {
        let reslist = [];
        isdnList.forEach((i) => reslist.push({ isdn: i }));
        const params = {
          reslist: reslist,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("查询用户状态" + JSON.stringify(rsp))
              );
            }
          },
        };
        cloudICP.dispatch.voice.subscribeUserStatus(params);
      };
    }
    // 群组
    initQueryGroup() {
      // 查询群组
      this.group.queryList = (offset, limit, category) => {
        const params = {
          offset: offset,
          limit: limit,
          category: category,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("查询群组" + JSON.stringify(rsp))
              );
            }
          },
        };
        cloudICP.dispatch.query.queryTalkingGroupV1(params);
      };
      // 查询群组成员
      this.group.queryMembers = (grpid, offset, limit) => {
        const params = {
          grpid: grpid,
          offset: offset,
          limit: limit,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("查询群组成员" + JSON.stringify(rsp))
              );
            }
          },
        };
        cloudICP.dispatch.query.queryTalkingGroupMembersV1(params);
      };
    }
    // 部门
    initDepartment() {
      this.department.queryList = (name) => {
        const params = {
          name: name,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("查询部门" + JSON.stringify(rsp))
              );
            }
          },
        };
        cloudICP.dispatch.query.queryDepartmentList(params);
      };
      this.department.queryMembers = (offset, limit, category) => {
        const params = {
          offset: offset,
          limit: limit,
          category: category,
          callback: (rsp) => {
            if (this.logCallback) {
              this.logCallback(
                UMPSDK.logInfoFormat("查询部门" + JSON.stringify(rsp))
              );
            }
          },
        };
        cloudICP.dispatch.query.queryUserListV1(params);
      };
    }
    initIcp() {
      this.icp.getCloudICP = (parmar) => {
        parmar.callback({
          cloudICP: cloudICP,
        });
      };
    }
  }
  UMPSDK.eventList = [];
  window.UMPSDK = UMPSDK;
  window.ICPUISDK = UMPSDK;
})();