import { defineComponent as so, useCssVars as ko, computed as G, watch as eo, nextTick as M, ref as c, onMounted as Oo, onBeforeUnmount as wo, resolveComponent as z, createElementBlock as r, openBlock as s, createElementVNode as i, createCommentVNode as k, normalizeClass as H, Fragment as I, renderList as V, normalizeStyle as Io, toDisplayString as E, createVNode as N, createTextVNode as Vo, withDirectives as to, vModelText as Eo, createBlock as No, withCtx as io, withModifiers as q, vShow as Lo } from "vue";
import { ElMessage as To } from "element-plus";
import $o from "./video-surveillance/video-common.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 { SHJDatasourceV2 as Ao } from "../../../plugins/datasource/index.mjs";
import { SHJParseEvent as lo } from "../../../plugins/event/index.mjs";
import "lodash";
import { HJLYDatasourceApi as R } from "../../../plugins/datasource/hjly/index.mjs";
const Mo = { class: "video" }, zo = {
  key: 0,
  class: "video__head"
}, Ho = { class: "video__left" }, qo = { class: "video__grids" }, Bo = ["alt", "title", "onClick"], Do = { class: "video__right" }, Fo = {
  key: 0,
  class: "video__control"
}, Po = { class: "video__control-box" }, Jo = { class: "video__control-tabs" }, Go = ["onClick"], Ro = {
  key: 0,
  class: "video__control-search"
}, Uo = ["placeholder"], Wo = ["src"], jo = { class: "video__control-scroll-content" }, Yo = ["src"], Ko = ["onClick"], Qo = ["src"], Xo = { class: "video__title" }, Zo = ["title"], xo = {
  key: 0,
  class: "video__dian"
}, oe = { class: "video__status" }, ee = {
  key: 0,
  class: "video__status-title video__green"
}, te = {
  key: 1,
  class: "video__status-title"
}, ie = ["src", "onClick"], le = ["src", "onClick"], se = {
  key: 1,
  class: "video__collapse video__collect"
}, re = { class: "video__collapse-item" }, ne = { class: "el-collapse-item__wrap" }, ce = { class: "el-collapse-item__content" }, ae = ["onClick"], pe = ["src"], de = { class: "video__title" }, ue = ["title"], me = {
  key: 0,
  class: "video__dian"
}, ve = { class: "video__status" }, ge = {
  key: 0,
  class: "video__status-title video__green"
}, _e = {
  key: 1,
  class: "video__status-title"
}, fe = ["src", "onClick"], he = ["src", "onClick"], ye = { class: "control" }, be = { class: "control__content" }, Ce = { class: "control__image" }, Se = ["src"], ke = ["src"], Oe = ["src"], we = ["src"], Ie = ["src"], Ve = { class: "control__progress" }, Ee = so({ name: "zv-hj-video-page" }), Ss = /* @__PURE__ */ so({
  ...Ee,
  props: {
    basicOption: {},
    sources: {},
    useEvents: {},
    uuid: {}
  },
  emits: [
    "on-click",
    "on-click-control-direction",
    "on-click-control-percentage",
    "on-click-control-tab"
  ],
  setup(ro, { emit: no }) {
    ko((o) => ({
      "7e8e939d": o.basicOption.headerConfig.gridConfig.width + "px",
      c46786a0: o.basicOption.headerConfig.gridConfig.height + "px",
      "1a7c117a": o.basicOption.headerConfig.closeAllConfig.width + "px",
      "7f8e7a73": o.basicOption.headerConfig.closeAllConfig.height + "px",
      "45ad05c4": co.value,
      "1a8090e8": o.basicOption.headerConfig.fullScreenConfig.width + "px",
      ffcc2e76: o.basicOption.headerConfig.fullScreenConfig.height + "px",
      "393aae0c": ao.value,
      b3895e0e: "url(" + o.basicOption.groupStyle.backgroundStyle.image + ")",
      e0aae6be: o.basicOption.searchStyle.backgroundColor,
      d21a3b3a: o.basicOption.searchStyle.borderColor,
      "0728996c": o.basicOption.searchStyle.searchIcon.right + "px",
      "0c771431": o.basicOption.searchStyle.searchIcon.top + "px",
      "23abc48a": o.basicOption.groupStyle.iconStyle.width + "px",
      c755ad3a: o.basicOption.groupStyle.iconStyle.height + "px",
      "20679f18": o.basicOption.groupStyle.iconStyle.x + "px",
      ef6e6812: o.basicOption.groupStyle.iconStyle.y + "px",
      "0ba13974": o.basicOption.groupStyle.iconStyle.height + o.basicOption.groupStyle.iconStyle.y * 2 + "px",
      "80d0623c": o.basicOption.groupStyle.x + "px",
      "2778fbc1": o.basicOption.groupStyle.y + "px",
      "7639a694": o.basicOption.groupStyle.color,
      "36634b30": o.basicOption.groupStyle.fontSize + "px",
      "3f159675": o.basicOption.groupStyle.fontStyle,
      f5f21a76: o.basicOption.groupStyle.lineHeight + "px",
      "322b2c2b": o.basicOption.cardStyle.backgroundSize,
      "1bcdff59": o.basicOption.cardStyle.iconStyle.width + "px",
      af0b6f18: o.basicOption.cardStyle.iconStyle.height + "px",
      "03bd9967": o.basicOption.cardStyle.iconStyle.x + "px",
      "6b9ec646": o.basicOption.cardStyle.iconStyle.y + "px",
      "10e0cafb": o.basicOption.titleStyle.x + "px",
      "78c1f7da": o.basicOption.titleStyle.y + "px",
      "7aa76186": o.basicOption.titleStyle.color,
      "314430f7": o.basicOption.titleStyle.fontSize + "px",
      "0eb2fc50": o.basicOption.tagsStyle.fontSize + "px",
      "31de29c6": o.basicOption.tagsStyle.fontStyle,
      "88f9a9e8": "url(" + o.basicOption.controlStyle.bottomStyle.increase.image + ")",
      "0b46e930": "url(" + o.basicOption.controlStyle.bottomStyle.decrease.image + ")"
    }));
    const a = ro, U = no, co = G(() => a.basicOption.headerConfig.closeAllConfig.show && a.basicOption.headerConfig.closeAllConfig.backgroundImage ? `url(${a.basicOption.headerConfig.closeAllConfig.backgroundImage})` : "none"), ao = G(() => a.basicOption.headerConfig.fullScreenConfig.show && a.basicOption.headerConfig.fullScreenConfig.backgroundImage ? `url(${a.basicOption.headerConfig.fullScreenConfig.backgroundImage})` : "none"), _ = G(() => {
      const o = [];
      return a.basicOption.headerConfig.gridConfig.grid.forEach((e, l) => {
        e.show && o.push(e);
      }), o;
    });
    eo(() => a.basicOption.videoConfig.type, () => {
      J(), M(() => {
        a.basicOption.videoConfig.type !== "onepage" && (P(_.value[0], 0), Ao.parse({
          tId: a.uuid,
          sources: a.sources,
          callback: ({ data: o }) => {
            b.value = o[0].data, F(b.value[0].childList[0]);
          }
        })), setTimeout(() => {
          w();
        }, 1e3);
      });
    }), eo(() => a.basicOption.headerConfig.defaultGridIndex, () => {
      const o = _.value, e = a.basicOption.headerConfig.defaultGridIndex;
      P(o[e], e);
    });
    const b = c([]), f = c(a.basicOption.headerConfig.defaultGridIndex), C = c(), m = c(), W = c([0]), h = c(0), po = c([
      {
        id: 0,
        name: "视频监控"
      },
      {
        id: 1,
        name: "收藏夹"
      }
    ]), j = c(""), uo = c(0), mo = c("#E0C770"), vo = c("#000000"), B = c(!1), y = c(0), g = c(1), S = c([]), Y = c([]), K = c(0), Q = c(0), go = c(), D = c(""), L = c(!0);
    Oo(() => {
      window.addEventListener("resize", w), w(), Z({}), setTimeout(() => {
        a.basicOption.videoConfig.type === "onepage" && L.value && X();
      }, 3e3);
    });
    const X = () => {
      M(() => {
        if (a.basicOption.videoConfig.type !== "onepage" || !L.value)
          return;
        const o = _.value[f.value].row * _.value[f.value].col, e = S == null ? void 0 : S.value.filter((l) => l.offlineFlag !== 1);
        for (let l = 0; l < o; l++) {
          let n = e == null ? void 0 : e[l];
          n && (n = JSON.parse(JSON.stringify(n)), M(() => {
            m.value.showVideo(n.resourceId, l, 1, n);
          }));
        }
      });
    }, Z = (o = {}) => {
      let e = {
        typeId: "27",
        // 视频监控
        checkListCode: "A3-05-05"
      };
      e = Object.assign(e, o), R.loadResourceMonitorCheckList(e).then((l) => {
        var v;
        const n = ((v = l == null ? void 0 : l.data) == null ? void 0 : v.listRet) || [];
        b.value = n, b.value.forEach((d) => {
          var t;
          d.childList = d.listDeviceVos, d.listDeviceVos = null, (t = d == null ? void 0 : d.childList) == null || t.forEach((u) => {
            u.collectId && (S.value.push(u), Y.value.push(u.resourceId));
          });
        });
      });
    }, F = (o) => {
      L.value = !1, o != null && o.resourceId || (o.resourceId = o.deviceId + "");
      const e = JSON.parse(JSON.stringify(o));
      if (C.value = e, U("on-click", C.value), lo.parseEvents(a.useEvents, "on-click", C.value), C.value.offlineFlag === 1)
        return To({
          message: "设备已离线",
          type: "error"
        });
      m.value.showVideo(C.value.resourceId, null, 1, C.value);
    }, T = (o, e) => {
      o.target.nodeName ? y.value || (y.value = Date.now(), m.value.changeControl(e, 0)) : y.value = 0;
    }, _o = () => {
      g.value = 1, m.value.changeScale(g.value);
    }, x = (o) => {
      o === 1 ? g.value -= 0.1 : g.value += 0.1, g.value > 2 ? g.value = 2 : g.value < 0.5 && (g.value = 0.5), m.value.changeScale(g.value);
    }, $ = (o, e) => {
      const l = Date.now() - y.value;
      o.target.nodeName ? l < 300 ? setTimeout(() => {
        m.value.changeControl(e, 1), y.value = 0;
      }, 120) : (m.value.changeControl(e, 1), y.value = 0) : y.value = 0;
    }, fo = (o, e) => {
      h.value = e, U("on-click-control-tab", h.value), lo.parseEvents(
        a.useEvents,
        "on-click-control-tab",
        h.value
      );
    }, O = (o) => {
      const e = o.resourceId, l = Y.value, n = S.value, v = l.indexOf(e);
      v !== -1 ? (l.splice(v, 1), n.splice(
        n.findIndex(
          (d) => d.resourceId === e
        ),
        1
      ), R.videoNotCollect({
        resourceId: o.resourceId
      }).then((d) => {
        o.collectId = 0;
      })) : (l.push(e), n.push(o), R.videoCollect({
        resourceId: o.resourceId,
        typeId: o == null ? void 0 : o.typeId,
        videoType: (o == null ? void 0 : o.protocolId) || (o == null ? void 0 : o.videoType) || 1
        // videoType参数后端没有用到
      }).then((d) => {
        o.collectId = 1;
      }));
    }, w = () => {
      var l, n;
      const o = ((l = document.querySelector(".video__body")) == null ? void 0 : l.clientWidth) || 300, e = ((n = document.querySelector(".video__body")) == null ? void 0 : n.clientHeight) || 200;
      K.value = o, Q.value = e;
    }, A = (o) => {
      const e = document == null ? void 0 : document.querySelectorAll(".player");
      for (let l = 0; l < e.length; l++) {
        const n = e[l];
        n.style.opacity = o;
      }
    }, P = (o, e) => {
      e !== f.value && (A("0"), f.value = e, M(() => {
        a.basicOption.videoConfig.type === "onepage" && L.value ? (X(), m.value.resetGrid()) : m.value.changeGrid(o, e), setTimeout(() => {
          A("1");
        }, 600);
      }));
    };
    (() => {
      if (!window.JSPlugin)
        return new Promise((o, e) => {
          const l = document.createElement("script");
          l.src = `${a.basicOption.videoConfig.hk.videoJSUrl}`, l.onload = o, l.onerror = e, document.head.appendChild(l);
        });
    })();
    const J = () => {
      B.value = !1, m.value.destoryVideoAll();
    }, ho = () => {
      A("0");
      const o = document.querySelector(".video__body");
      o.requestFullscreen && o.requestFullscreen(), w(), setTimeout(() => {
        const e = document.querySelector(".video__body").getClientRects()[0].height, l = document.querySelector(".video__body").getClientRects()[0].width;
        m.value.resize(e, l);
      }, 200), setTimeout(() => {
        A("1");
      }, 800);
    }, yo = (o) => {
      let e = null;
      b.value.forEach((l) => {
        var n;
        (n = l == null ? void 0 : l.childList) == null || n.forEach((v) => {
          v.resourceId === o.resourceId && (e = v);
        });
      }), e && O(e);
    }, bo = () => {
      const o = { filter: D.value };
      Z(o);
    }, Co = (o) => {
      B.value = o;
    };
    return wo(() => {
      window.removeEventListener("resize", w), J();
    }), (o, e) => {
      const l = z("el-collapse-item"), n = z("el-collapse"), v = z("el-progress"), d = z("el-button");
      return s(), r("div", Mo, [
        i("div", {
          class: H(["video__left", [o.basicOption.videoConfig.type === "onepage" ? "video__left_onepage" : ""]])
        }, [
          o.basicOption.videoConfig.type === "onepage" ? (s(), r("div", zo, [
            i("div", Ho, [
              i("div", qo, [
                (s(!0), r(I, null, V(_.value, (t, u) => (s(), r("div", {
                  key: t.title,
                  class: "video__grid",
                  style: Io({
                    background: `url(${f.value != u ? t.backgroundImage : t.activeBackgroundImage})`
                  }),
                  alt: t.title,
                  title: t.title,
                  onClick: (p) => P(t, u)
                }, null, 12, Bo))), 128))
              ])
            ]),
            i("div", Do, [
              i("div", {
                class: "video__closeall",
                onClick: J
              }, E(o.basicOption.headerConfig.closeAllConfig.title), 1),
              i("div", {
                class: "video__fullscreen",
                onClick: ho
              }, E(o.basicOption.headerConfig.fullScreenConfig.title), 1)
            ])
          ])) : k("", !0),
          i("div", {
            ref_key: "videoBody",
            ref: go,
            class: "video__body"
          }, [
            N($o, {
              ref_key: "videoControl",
              ref: m,
              row: _.value[f.value].row,
              col: _.value[f.value].col,
              width: K.value,
              height: Q.value,
              "is-video-center": !1,
              "basic-option": o.basicOption,
              "source-type": o.basicOption.videoConfig.type,
              onCollect: yo,
              onControlConfig: Co
            }, null, 8, ["row", "col", "width", "height", "basic-option", "source-type"])
          ], 512)
        ], 2),
        o.basicOption.videoConfig.type === "onepage" ? (s(), r("div", Fo, [
          i("div", Po, [
            e[18] || (e[18] = i("div", { class: "video__control-yougan-top" }, null, -1)),
            e[19] || (e[19] = i("div", { class: "video__control-yougan-bottom" }, null, -1)),
            e[20] || (e[20] = i("div", { class: "video__control-yougan-top-div" }, null, -1)),
            e[21] || (e[21] = i("div", { class: "video__control-yougan-bottom-div" }, null, -1)),
            i("div", Jo, [
              (s(!0), r(I, null, V(po.value, (t, u) => (s(), r("div", {
                key: t.id,
                class: H(["video__tab", h.value === t.id ? "active" : ""]),
                onClick: (p) => fo(t, u)
              }, [
                Vo(E(t.name) + " ", 1),
                e[12] || (e[12] = i("div", { class: "video__control-line" }, null, -1))
              ], 10, Go))), 128))
            ]),
            h.value == 0 ? (s(), r("div", Ro, [
              e[13] || (e[13] = i("span", { class: "video__square-left" }, null, -1)),
              to(i("input", {
                "onUpdate:modelValue": e[0] || (e[0] = (t) => D.value = t),
                class: "video__search",
                type: "text",
                placeholder: o.basicOption.searchStyle.placeholder
              }, null, 8, Uo), [
                [
                  Eo,
                  D.value,
                  void 0,
                  { trim: !0 }
                ]
              ]),
              e[14] || (e[14] = i("span", { class: "video__square-right" }, null, -1)),
              i("img", {
                class: "video__search-icon",
                src: o.basicOption.searchStyle.searchIcon.url,
                alt: "",
                onClick: bo
              }, null, 8, Wo)
            ])) : k("", !0),
            i("div", {
              class: H(["video__control-scroll", [h.value === 1 ? "video__control-scroll-collect" : ""]])
            }, [
              i("div", jo, [
                h.value == 0 ? (s(!0), r(I, { key: 0 }, V(b.value, (t, u) => (s(), No(n, {
                  modelValue: W.value,
                  "onUpdate:modelValue": e[1] || (e[1] = (p) => W.value = p),
                  key: u,
                  accordion: "",
                  class: "video__collapse"
                }, {
                  default: io(() => [
                    i("img", {
                      class: "video__group",
                      src: o.basicOption.groupStyle.iconStyle.image
                    }, null, 8, Yo),
                    N(l, {
                      name: `${u}`,
                      title: t.groupName,
                      class: "video__collapse-item"
                    }, {
                      default: io(() => [
                        (s(!0), r(I, null, V(t.childList, (p, So) => (s(), r("div", {
                          key: So,
                          class: "video__list",
                          onClick: (oo) => F(p)
                        }, [
                          i("img", {
                            class: "video__icon",
                            src: o.basicOption.groupStyle.videoStyle.image
                          }, null, 8, Qo),
                          i("div", Xo, [
                            i("span", {
                              class: "text",
                              title: p.resourceName
                            }, E(p.resourceName), 9, Zo),
                            p.offlineFlag === 0 ? (s(), r("span", xo, e[15] || (e[15] = [
                              i("span", { class: "video__circle" }, null, -1)
                            ]))) : k("", !0)
                          ]),
                          i("div", oe, [
                            p.offlineFlag === 0 ? (s(), r("span", ee, " 在线 ")) : (s(), r("span", te, "离线")),
                            p.collectId ? (s(), r("img", {
                              key: 2,
                              class: "video__collect",
                              src: o.basicOption.groupStyle.collectStyle.image,
                              onClick: q((oo) => O(p), ["stop"])
                            }, null, 8, ie)) : (s(), r("img", {
                              key: 3,
                              class: "video__collect",
                              src: o.basicOption.groupStyle.unCollectStyle.image,
                              onClick: q((oo) => O(p), ["stop"])
                            }, null, 8, le))
                          ])
                        ], 8, Ko))), 128))
                      ]),
                      _: 2
                    }, 1032, ["name", "title"])
                  ]),
                  _: 2
                }, 1032, ["modelValue"]))), 128)) : (s(), r("div", se, [
                  i("div", re, [
                    i("div", ne, [
                      i("div", ce, [
                        (s(!0), r(I, null, V(S.value, (t, u) => (s(), r("div", {
                          key: u,
                          class: "video__list",
                          onClick: (p) => F(t)
                        }, [
                          i("img", {
                            class: "video__icon",
                            src: o.basicOption.groupStyle.videoStyle.image
                          }, null, 8, pe),
                          i("div", de, [
                            i("span", {
                              class: "text",
                              title: t.resourceName
                            }, E(t.resourceName), 9, ue),
                            t.offlineFlag === 0 ? (s(), r("span", me, e[16] || (e[16] = [
                              i("span", { class: "video__circle" }, null, -1)
                            ]))) : k("", !0)
                          ]),
                          i("div", ve, [
                            t.offlineFlag === 0 ? (s(), r("span", ge, " 在线 ")) : (s(), r("span", _e, "离线")),
                            t.collectId ? (s(), r("img", {
                              key: 2,
                              class: "video__collect",
                              src: o.basicOption.groupStyle.collectStyle.image,
                              onClick: q((p) => O(t), ["stop"])
                            }, null, 8, fe)) : (s(), r("img", {
                              key: 3,
                              class: "video__collect",
                              src: o.basicOption.groupStyle.unCollectStyle.image,
                              onClick: q((p) => O(t), ["stop"])
                            }, null, 8, he))
                          ])
                        ], 8, ae))), 128))
                      ])
                    ])
                  ])
                ]))
              ]),
              to(i("div", ye, [
                e[17] || (e[17] = i("div", { class: "control__title" }, "云台控制", -1)),
                i("div", be, [
                  i("div", Ce, [
                    i("img", {
                      class: "control__icon",
                      src: o.basicOption.controlStyle.refreshStyle.image,
                      onClick: _o
                    }, null, 8, Se),
                    i("img", {
                      class: "control__icon-top",
                      src: o.basicOption.controlStyle.directStyle.image,
                      onMousedown: e[2] || (e[2] = (t) => T(t, 2)),
                      onMouseup: e[3] || (e[3] = (t) => $(t, 2))
                    }, null, 40, ke),
                    i("img", {
                      class: "control__icon-right",
                      src: o.basicOption.controlStyle.directStyle.image,
                      onMousedown: e[4] || (e[4] = (t) => T(t, 1)),
                      onMouseup: e[5] || (e[5] = (t) => $(t, 1))
                    }, null, 40, Oe),
                    i("img", {
                      class: "control__icon-bottom",
                      src: o.basicOption.controlStyle.directStyle.image,
                      onMousedown: e[6] || (e[6] = (t) => T(t, 3)),
                      onMouseup: e[7] || (e[7] = (t) => $(t, 3))
                    }, null, 40, we),
                    i("img", {
                      class: "control__icon-left",
                      src: o.basicOption.controlStyle.directStyle.image,
                      onMousedown: e[8] || (e[8] = (t) => T(t, 0)),
                      onMouseup: e[9] || (e[9] = (t) => $(t, 0))
                    }, null, 40, Ie),
                    j.value ? (s(), r("img", {
                      key: 0,
                      class: H(["control__icon-select", j.value]),
                      src: "https://guidedev.fxo2opt.com/document/shi/zv-hj-video-control/control-yes.png"
                    }, null, 2)) : k("", !0)
                  ]),
                  i("div", Ve, [
                    N(v, {
                      percentage: uo.value,
                      color: mo.value,
                      "define-back-color": vo.value
                    }, null, 8, ["percentage", "color", "define-back-color"]),
                    N(d, {
                      class: "control__increase",
                      onClick: e[10] || (e[10] = (t) => x(2))
                    }),
                    N(d, {
                      class: "control__decrease",
                      onClick: e[11] || (e[11] = (t) => x(1))
                    })
                  ])
                ])
              ], 512), [
                [Lo, B.value]
              ])
            ], 2)
          ])
        ])) : k("", !0)
      ]);
    };
  }
});
export {
  Ss as default
};
