import { defineComponent as q, computed as N, ref as g, watch as fe, onMounted as ye, onBeforeUnmount as he, createElementBlock as D, openBlock as I, normalizeStyle as K, createElementVNode as M, normalizeClass as O, Fragment as z, renderList as ge, createCommentVNode as G, createBlock as Ie, nextTick as h } from "vue";
import J from "moment";
import { ElMessage as _e } from "element-plus";
import Te from "./video/videos-h5player.vue.mjs";
import "../../../text-text-basic/index.mjs";
import "../../../text-table-basic/index.mjs";
import "../../../chart-other-gauge/index.mjs";
import "../../../chart-other-gauge-stage/index.mjs";
import "../../../chart-other-gauge-grade/index.mjs";
import "../../../chart-other-word-cloud/index.mjs";
import "../../../chart-other-liquidfill/index.mjs";
import "../../../chart-other-funnel/index.mjs";
import "../../../chart-other-force/index.mjs";
import "../../../chart-other-radar/index.mjs";
import "../../../chart-other-funnel-split/index.mjs";
import "../../../chart-other-funnel-contrast/index.mjs";
import "../../../chart-other-candlestick-basic/index.mjs";
import "../../../chart-other-candlestick-shanghai/index.mjs";
import "../../../chart-other-candlestick-demo/index.mjs";
import "../../../chart-other-heatmap/index.mjs";
import "../../../chart-other-force2/index.mjs";
import "../../../chart-other-graph-basic/index.mjs";
import "../../../chart-other-graph-basic2/index.mjs";
import "../../../chart-other-graph-calendar/index.mjs";
import "../../../chart-other-tree-line/index.mjs";
import "../../../chart-other-treemap-basic/index.mjs";
import "../../../chart-other-sunburst-basic/index.mjs";
import "../../../chart-other-sunburst-basic2/index.mjs";
import "../../../chart-other-sunburst-basic3/index.mjs";
import "../../../chart-other-sunburst-basic4/index.mjs";
import "../../../chart-other-sunburst-book/index.mjs";
import "../../../chart-other-sunburst-radius/index.mjs";
import "../../../chart-other-sunburst-flavors/index.mjs";
import "../../../chart-other-parallel-basic/index.mjs";
import "../../../chart-other-parallel-mul/index.mjs";
import "../../../chart-other-circular-graph/index.mjs";
import "../../../map-earth-basic/index.mjs";
import "../../../map-earth-cool-tech/index.mjs";
import "../../../map-earth-particle/index.mjs";
import "../../../map-earth-hacker/index.mjs";
import "../../../map-earth-fly-line/index.mjs";
import "../../../chart-other-grid-percentage/index.mjs";
import "../../../chart-other-radar-stack/index.mjs";
import "../../../chart-other-funnel2/index.mjs";
import "../../../chart-other-label-gauge/index.mjs";
import "../../../chart-other-theme-river/index.mjs";
import "../../../chart-other-tree/index.mjs";
import "../../../chart-other-treemap/index.mjs";
import "../../../commons-product-model/index.mjs";
import "../../../commons-vr-photo/index.mjs";
import "../../../commons-vr-video/index.mjs";
import "../../../commons-three-loader/index.mjs";
import "../../../commons-three-loader3/index.mjs";
import "../../../commons-loop-iterator/index.mjs";
import "../../../commons-gaussian-splatting-view/index.mjs";
import "../../../commons-babylon/index.mjs";
import "../../../commons-svg/index.mjs";
import "../../../commons-weather/index.mjs";
import "../../../commons-weather-dynamic/index.mjs";
import "../../../media-wavesurfer/index.mjs";
import "../../../interaction-tabs/index.mjs";
import "../../../interaction-tabs2/index.mjs";
import "../../../interaction-button/index.mjs";
import "../../../interaction-button-image/index.mjs";
import "../../../interaction-select/index.mjs";
import "../../../interaction-input/index.mjs";
import "../../../interaction-radio/index.mjs";
import "../../../interaction-slider/index.mjs";
import "../../../interaction-switch/index.mjs";
import "../../../interaction-data-picker/index.mjs";
import "../../../interaction-button-refresh/index.mjs";
import "../../../media-image/index.mjs";
import "../../../text-title/index.mjs";
import "../../../commons-qrcode/index.mjs";
import "../../../media-video/index.mjs";
import "../../../media-audio/index.mjs";
import "../../../text-real-time/index.mjs";
import "../../../media-carousel/index.mjs";
import "../../../media-carousel-slides/index.mjs";
import "../../../media-iframe-carousel/index.mjs";
import "../../../media-iframe/index.mjs";
import "../../../media-m3u8/index.mjs";
import "../../../media-m3u8-dynamic/index.mjs";
import "../../../media-audio-dynamic/index.mjs";
import "../../../media-video-dynamic/index.mjs";
import "../../../media-image-dynamic/index.mjs";
import "../../../media-iframe-dynamic/index.mjs";
import "../../../media-flv/index.mjs";
import "../../../commons-echarts/index.mjs";
import "../../../text-over-number/index.mjs";
import "../../../text-table-scroll/index.mjs";
import "../../../text-carousel/index.mjs";
import "../../../text-row-scroll/index.mjs";
import "../../../text-text-dynamic/index.mjs";
import "../../../text-count-down/index.mjs";
import "../../../graphical-circle/index.mjs";
import "../../../graphical-diamond/index.mjs";
import "../../../graphical-hexagon/index.mjs";
import "../../../graphical-isosceles-triangle/index.mjs";
import "../../../graphical-pentagon/index.mjs";
import "../../../graphical-rect/index.mjs";
import "../../../graphical-right-triangle/index.mjs";
import "../../../scene-map3d/index.mjs";
import "../../../scene-amap2d/index.mjs";
import "../../../scene-amap3d/index.mjs";
import "../../../scene-vr/index.mjs";
import "../../../scene-unity-iframe/index.mjs";
import "../../../scene-unity-webgl/index.mjs";
import "../../../scene-ue-iframe/index.mjs";
import "../../../scene-ue-shj/index.mjs";
import "../../../scene-default/index.mjs";
import "../../../interaction/tabs/index.mjs";
import "../../../interaction/tabs-icon/index.mjs";
import "../../../interaction/button/index.mjs";
import "../../../interaction/date-picker/src/date-picker/index.mjs";
import "../../../interaction/date-picker/src/date-picker-range/index.mjs";
import "../../../text/list/index.mjs";
import "../../../chart/src/bar/basic/index.mjs";
import "../../../chart/src/bar/animation/index.mjs";
import "../../../chart/src/bar/contrast/index.mjs";
import "../../../chart/src/bar/contrast2/index.mjs";
import "../../../chart/src/bar/contrast3/index.mjs";
import "../../../chart/src/bar/gradient-column-chart/index.mjs";
import "../../../chart/src/bar/horizontal/index.mjs";
import "../../../chart/src/bar/horizontal-stack/index.mjs";
import "../../../chart/src/bar/line-bar/index.mjs";
import "../../../chart/src/bar/line-bar2/index.mjs";
import "../../../chart/src/bar/loop/index.mjs";
import "../../../chart/src/bar/mini/index.mjs";
import "../../../chart/src/bar/polar/index.mjs";
import "../../../chart/src/bar/polar-stack/index.mjs";
import "../../../chart/src/bar/polar2/index.mjs";
import "../../../chart/src/bar/radius-circle/index.mjs";
import "../../../chart/src/bar/rank/index.mjs";
import "../../../chart/src/bar/segmented-progress/index.mjs";
import "../../../chart/src/bar/spire/index.mjs";
import "../../../chart/src/bar/stack/index.mjs";
import "../../../chart/src/bar/stack-line/index.mjs";
import "../../../chart/src/bar/stack2/index.mjs";
import "../../../chart/src/bar/stack3/index.mjs";
import "../../../chart/src/bar/staggered/index.mjs";
import "../../../chart/src/bar/three/index.mjs";
import "../../../chart/src/bar/waterfall/index.mjs";
import "../../../chart/src/bar/zebra/index.mjs";
import "../../../chart/src/line/area-gradient/index.mjs";
import "../../../chart/src/line/area-highlight/index.mjs";
import "../../../chart/src/line/area-highlight2/index.mjs";
import "../../../chart/src/line/basic/index.mjs";
import "../../../chart/src/line/bump/index.mjs";
import "../../../chart/src/line/dashed/index.mjs";
import "../../../chart/src/line/ladder/index.mjs";
import "../../../chart/src/line/logarithm/index.mjs";
import "../../../chart/src/line/multix/index.mjs";
import "../../../chart/src/line/polar-double/index.mjs";
import "../../../chart/src/line/rain-flow/index.mjs";
import "../../../chart/src/line/scale/index.mjs";
import "../../../chart/src/line/smooth/index.mjs";
import "../../../chart/src/line/smooth-area/index.mjs";
import "../../../chart/src/line/stack/index.mjs";
import "../../../chart/src/line/stack-area/index.mjs";
import "../../../chart/src/line/temp/index.mjs";
import "../../../chart/src/line/vertical/index.mjs";
import "../../../chart/src/map/basic/index.mjs";
import "../../../chart/src/map/bmap-basic/index.mjs";
import "../../../chart/src/map/bmap-heatmap/index.mjs";
import "../../../chart/src/map/bmap-rich/index.mjs";
import "../../../chart/src/map/customize/index.mjs";
import "../../../chart/src/map/lines/index.mjs";
import "../../../chart/src/map/scatter/index.mjs";
import "../../../chart/src/pie/3d/index.mjs";
import "../../../chart/src/pie/basic/index.mjs";
import "../../../chart/src/pie/basic2/index.mjs";
import "../../../chart/src/pie/customized/index.mjs";
import "../../../chart/src/pie/index/index.mjs";
import "../../../chart/src/pie/interval/index.mjs";
import "../../../chart/src/pie/legend-scroll/index.mjs";
import "../../../chart/src/pie/radius/index.mjs";
import "../../../chart/src/pie/rose/index.mjs";
import "../../../chart/src/pie/round/index.mjs";
import "../../../chart/src/pie/sunburst/index.mjs";
import "../../../chart/src/scatter/basic/index.mjs";
import "../../../chart/src/scatter/basic2/index.mjs";
import "../../../chart/src/scatter/bubble/index.mjs";
import "../../../chart/src/scatter/ripples/index.mjs";
import "../../../commons/custom-component-render/index.mjs";
import "../../zv-hj-tree-list/index.mjs";
import "../../zv-hj-model-resource/index.mjs";
import "../../zv-hj-one-map-config/index.mjs";
import "../../zv-hj-video-control/index.mjs";
import "../index.mjs";
import "../../zv-hj-password-input/index.mjs";
import "../../zv-hj-carousel/index.mjs";
import "../../zv-hj-video-monitor/index.mjs";
import "../../zv-hj-scene-amap2d/index.mjs";
import "../../zv-hj-scene-amap3d/index.mjs";
import "../../zv-hj-person-face/index.mjs";
import "../../zv-hj-resource-type-phone/index.mjs";
import "../../zv-hj-tree-list-phone/index.mjs";
import "../../zv-hj-video-page-phone/index.mjs";
import "../../zv-hj-model-resource-phone/index.mjs";
import "../../zv-hj-bottom-suspend/index.mjs";
import "../../zv-hj-pagination/index.mjs";
import "../../zv-hj-password-input-phone/index.mjs";
/* empty css                              */
/* empty css                                     */
import "lodash";
import "../../../../plugins/datasource/utils/request.mjs";
import "../../../../plugins/datasource/utils/wsManager.mjs";
import { HJLYDatasourceApi as X } from "../../../../plugins/datasource/hjly/index.mjs";
import "../../../../plugins/event/actions/fullScreenAction.mjs";
const we = ["onClick"], be = q({ name: "zv-hj-video-common" }), _i = /* @__PURE__ */ q({
  ...be,
  props: {
    width: {},
    height: {},
    row: { default: 3 },
    col: { default: 3 },
    showToolBar: { type: Boolean, default: !1 },
    sourceType: {},
    basicOption: {}
  },
  emits: ["collect", "controlConfig"],
  setup(j, { expose: C, emit: U }) {
    const S = U, v = j, d = N(() => v.col), m = N(() => v.row), i = g([]), c = N(() => v.col * v.row);
    fe(c, (e, o) => {
      n.value >= e && (n.value = 0);
    });
    const x = g(), V = g([]), n = g(0), k = g(!1), u = g({}), $ = [1, 2, 3, 4, 5, 6], Q = [16, 140, 200], y = [1, 16, 17, 200, 145, 202, 165];
    ye(() => {
      var e;
      for (let o = 0; o < c.value; o++)
        i.value.push({
          video_Type: "",
          deviceId: null,
          resourceId: null,
          playStatus: null
        });
      (e = document == null ? void 0 : document.querySelector(".video_list")) == null || e.addEventListener("fullscreenchange", Y);
    });
    const W = (e) => {
      i.value[e].video_Type = "";
    }, Z = (e, o) => {
      i.value[o] && (i.value[o].playStatus = e);
    }, ee = (e, o) => {
      var t, l;
      document == null || document.querySelectorAll(".player");
      let r = 0;
      if (x.value = {
        width: (v.width / e.col).toFixed(6) + "px",
        height: (v.height / e.row).toFixed(6) + "px"
      }, i.value.length >= c.value) {
        let p = !0;
        V.value = [], i.value.forEach((s, a) => {
          var T, w;
          (T = i.value[a]) != null && T.video_Type || p && (p = !1, a >= c.value ? r = c.value - 1 : r = a), a >= c.value && ((w = u.value["player" + a]) == null || w.destoryVideo(), V.value.push(JSON.parse(JSON.stringify(i.value[a]))), i.value[a] = {
            video_Type: "",
            playbackInRealplay: !1,
            deviceId: null,
            resourceId: null,
            playStatus: null
          });
        }), i.value = i.value.slice(0, c.value);
      } else {
        let p = !0;
        for (let s = 0; s < c.value; s++) {
          if (!((t = i.value[s]) != null && t.video_Type)) {
            const a = (l = V.value) == null ? void 0 : l.shift();
            if (a != null && a.deviceId) {
              i.value[s] = a, h(() => {
                P(a.deviceId, s, 1, a);
              });
              continue;
            }
            p && (p = !1, r = s);
          }
          i.value[s] || i.value.push({
            video_Type: "",
            playbackInRealplay: !1,
            deviceId: null,
            resourceId: null,
            playStatus: null
          });
        }
      }
      h(() => {
        H(r, i.value[r]), _(v.width, v.height);
      });
    }, _ = (e, o) => {
      e / d.value - 2, o / m.value - 2, h(() => {
        i.value.forEach((r, t) => {
          var l;
          (d.value * m.value === 6 || d.value * m.value === 8) && (t === 0 ? (e / m.value * (m.value - 1) - 2, o / m.value * (m.value - 1) - 2) : (e / m.value - 2, o / m.value - 2)), i.value[t] = r, (l = u.value["player" + t]) == null || l.resize();
        });
      });
    }, Y = () => {
      k.value = !k.value;
    }, H = (e, o) => {
      n.value = e;
      let r = !1;
      (o == null ? void 0 : o.resourceTags) === "1375" && (r = !0), S("controlConfig", r);
    }, te = (e, o, r, t, l) => (l.deviceId || (l.deviceId = o), l.streamType = t, h(() => {
      u.value["player" + (r + 1)].showVideo(l), B(r);
    }), !1), P = (e, o, r, t) => {
      var p, s;
      r !== 0 && r !== 1 && (r = 1);
      const l = oe(o);
      if (u.value["player" + l] && ((s = (p = u.value["player" + l]) == null ? void 0 : p.destoryVideo) == null || s.call(p)), e)
        try {
          X.getVideoDeviceParams({ deviceId: e }).then((a) => {
            if ((a == null ? void 0 : a.code) !== 200)
              return _e({
                message: a == null ? void 0 : a.msg,
                type: "error"
              });
            const T = a.data, w = re(T);
            t.protocolId = w.protocolId;
            const f = ie(t.protocolId);
            if (t.video_Type = f, t.playbackInRealplay = !1, i.value[l] = t, f === "DH" || f === "XT" || f === "XT-REAL")
              return te(f, e, l, r, t);
            let L = r;
            if (m.value === 1 && d.value === 1 && (L = 0), t && t.offlineFlag === 1 && !t.polling && v.sourceType === "onepage")
              return F(), !1;
            const ue = window.location.protocol === "https:" ? "wss" : "ws";
            if (!f)
              return;
            let ve = !1;
            r === 0 && (ve = !0);
            const de = {
              deviceId: e,
              hikH5Tag: !0,
              protocol: ue,
              streamType: L
            };
            X.getVideoPlayConfig(de).then((b) => {
              const E = {
                uri: b.data.uri,
                deviceId: e,
                index: l,
                resourceName: t.resourceName || "",
                resourceTags: t.resourceTags || "",
                offlineFlag: t.offlineFlag || 0
              };
              h(() => {
                (f === "HK" || f === "other") && u.value["player" + l].showVideo(E), B(l);
              });
            }).catch((b) => {
              const R = b.data.msg, E = b.data.code, A = { carryTag: !1 };
              r === 0 && E !== 200 && R && R.indexOf("stream type does not support") >= 0 && !A.carryTag && (r = 1, A.carryTag = !0, P(t.resourceId, o, r, t));
            });
          });
        } catch {
        }
    }, oe = (e) => n.value || e || 0, re = (e) => {
      var p;
      const o = ((p = e[0]) == null ? void 0 : p.protocolId) * 1, r = e.filter((s) => s.paramKey === "recordLocation"), t = window.location.protocol === "https:" ? "wss" : "ws", l = r[0] && r[0].paramValue || 1;
      return {
        protocolId: o,
        protocol: t,
        location: l
      };
    }, ie = (e) => {
      let o = "";
      return e === y[0] ? o = "HK" : e === y[1] || e === y[3] ? o = "DH" : e === y[5] ? o = "XT" : e === y[6] ? o = "XT-REAL" : e === y[2] || e === y[4] ? o = "other" : $.includes(e) ? o = "HK" : Q.includes(e) && (o = "DH"), o;
    }, B = (e) => {
      var r;
      n.value = e;
      let o = !0;
      n.value = ((r = i.value) == null ? void 0 : r.length) - 1, i.value.forEach((t, l) => {
        !(t != null && t.video_Type) && o && (o = !1, n.value = l);
      }), F();
    }, F = () => {
      const e = i.value, o = [];
      for (const r in e)
        if (Object.prototype.hasOwnProperty.call(e, r)) {
          const t = e[r];
          t.deviceId = t.deviceId || t.resourceId, t && t.deviceId && o.push(t.deviceId);
        }
    }, le = (e) => {
      var r;
      const o = {
        video_Type: "",
        playbackInRealplay: !1,
        deviceId: null,
        resourceId: null,
        playStatus: null
      };
      e >= 0 ? ((r = u.value["player" + e]) == null || r.destoryVideo(), i.value[e] = o) : (i.value.forEach((t, l) => {
        var p;
        (p = u.value["player" + e]) == null || p.destoryVideo(), i.value[l] = o;
      }), n.value = 0);
    }, ae = () => {
    }, pe = (e, o, r) => {
      const t = JSON.parse(JSON.stringify(i.value[e]));
      t.playbackInRealplay = !0, t.width = o, t.height = r, i.value[e] = t, h(() => {
        var s;
        const l = J().subtract(15, "minutes").format("YYYY-MM-DD HH:mm:ss"), p = J().format("YYYY-MM-DD HH:mm:ss");
        t.startDateTime = new Date(l).getTime(), t.endDateTime = new Date(p).getTime(), t.startDate = l, t.endDate = p, (s = u.value["player" + e]) == null || s.showVideo(t.deviceId, e, 1, t), _(o, r);
      });
    }, me = (e) => {
      S("collect", e);
    }, se = (e, o, r) => {
      var t;
      n.value >= 0 && ((t = u.value["player" + n.value]) == null || t.changePosition(e, o, r));
    }, ne = (e) => {
      var o;
      n.value >= 0 && ((o = u.value["player" + n.value]) == null || o.scaleHandle(e));
    }, ce = (e) => {
      S("controlConfig", e);
    };
    return C({
      showVideo: P,
      changeGrid: ee,
      destoryVideoAll: le,
      resize: _,
      changeControl: se,
      changeScale: ne,
      resetGrid: (e, o) => {
        if (i.value.length >= c.value)
          i.value = i.value.slice(0, c.value);
        else
          for (let t = 0; t < c.value; t++)
            i.value[t] || i.value.push({
              video_Type: "",
              playbackInRealplay: !1,
              deviceId: null,
              resourceId: null,
              playStatus: null
            });
        h(() => {
          H(0, i.value[0]), _(v.width, v.height);
        });
      }
    }), he(() => {
      var e;
      (e = document == null ? void 0 : document.querySelector(".video_list")) == null || e.removeEventListener("fullscreenchange", Y);
    }), (e, o) => (I(), D("div", {
      class: "video",
      style: K({ width: e.width + "px", height: e.height + "px" })
    }, [
      M("div", {
        class: O(["video_list", e.showToolBar ? "" : "no_bottom", k.value ? "video_list_active" : ""]),
        style: K({ gridTemplateRows: "repeat(" + m.value + ", 1fr)", gridTemplateColumns: "repeat(" + (d.value * m.value === 6 || d.value * m.value === 8 ? m.value : d.value) + ", 1fr)" })
      }, [
        (I(!0), D(z, null, ge(i.value, (r, t) => (I(), D("div", {
          key: "A" + t,
          class: O(["video_grid_item_wrap", [
            t === 0 && d.value * m.value === 6 ? "video_grid_item_6" : "",
            t === 0 && d.value * m.value === 8 ? "video_grid_item_8" : "",
            e.basicOption.videoConfig.type !== "onepage" ? "no_border" : ""
          ]]),
          onClick: (l) => H(t, r)
        }, [
          M("div", {
            class: O([
              "video_grid_item",
              n.value === t ? "active_grid_border" : "",
              e.basicOption.videoConfig.type !== "onepage" ? "no_border" : ""
            ])
          }, [
            r.video_Type && !r.playbackInRealplay ? (I(), D(z, { key: 0 }, [
              r.video_Type === "HK" ? (I(), Ie(Te, {
                id: "player" + (t + 1),
                ref_for: !0,
                ref: (l) => u.value["player" + t] = l,
                key: "B" + t,
                "f-index": t,
                "source-page": e.sourceType,
                "span-num": c.value,
                "play-type": "realplay",
                "span-style": { width: "100%", height: "100%" },
                "device-info": r,
                "play-back-index-in-real-play": t,
                "playback-in-realplay": !1,
                "basic-option": e.basicOption,
                onRealplay: Z,
                onUpdateDeviceInfo: W,
                onPlayback: ae,
                onOpenPlaybackInRealPlay: pe,
                onCollect: me,
                onControlConfig: ce
              }, null, 8, ["id", "f-index", "source-page", "span-num", "device-info", "play-back-index-in-real-play", "basic-option"])) : G("", !0)
            ], 64)) : G("", !0)
          ], 2)
        ], 10, we))), 128))
      ], 6)
    ], 4));
  }
});
export {
  _i as default
};
