import { defineComponent as M, ref as u, computed as C, watch as oe, onMounted as te, resolveComponent as R, openBlock as s, createElementBlock as a, Fragment as A, withDirectives as L, createElementVNode as c, vShow as I, createCommentVNode as l, normalizeStyle as k, createVNode as D, withCtx as j, renderList as ne, toDisplayString as ie, nextTick as se, pushScopeId as ae, popScopeId as ce, createStaticVNode as re } from "vue";
import le from "./resources/zv-vr-select.svg.mjs";
import g from "./resources/zv-return.svg.mjs";
import ue from "./resources/zv-add.svg.mjs";
import de from "./resources/zv-reduce.svg.mjs";
import pe from "./resources/zv-play.svg.mjs";
import ve from "./resources/zv-pause.svg.mjs";
import we from "./resources/zv-refresh.svg.mjs";
import E from "hls.js";
import { isArray as fe, debounce as me, cloneDeep as z } from "lodash";
const d = (S) => (ae("data-v-96f96666"), S = S(), ce(), S), Se = { class: "vr-scene-wrap" }, Ve = {
  id: "panorama",
  class: "vr-scene"
}, be = {
  id: "panorama-video-wrap",
  class: "vr-scene-main"
}, he = {
  key: 1,
  class: "vr-scene-controls"
}, _e = /* @__PURE__ */ d(() => /* @__PURE__ */ c("img", {
  src: le,
  alt: ""
}, null, -1)), ye = /* @__PURE__ */ d(() => /* @__PURE__ */ c("img", {
  src: g,
  alt: ""
}, null, -1)), ge = [
  ye
], He = /* @__PURE__ */ d(() => /* @__PURE__ */ c("img", {
  src: g,
  alt: ""
}, null, -1)), Oe = [
  He
], Je = /* @__PURE__ */ d(() => /* @__PURE__ */ c("img", {
  src: g,
  alt: ""
}, null, -1)), ke = [
  Je
], Ee = /* @__PURE__ */ d(() => /* @__PURE__ */ c("img", {
  src: g,
  alt: ""
}, null, -1)), Te = [
  Ee
], Pe = /* @__PURE__ */ d(() => /* @__PURE__ */ c("img", {
  src: ue,
  alt: ""
}, null, -1)), Ce = [
  Pe
], Re = /* @__PURE__ */ d(() => /* @__PURE__ */ c("img", {
  src: de,
  alt: ""
}, null, -1)), Ae = [
  Re
], Le = /* @__PURE__ */ d(() => /* @__PURE__ */ c("img", {
  src: pe,
  alt: ""
}, null, -1)), Ie = [
  Le
], De = /* @__PURE__ */ d(() => /* @__PURE__ */ c("img", {
  src: ve,
  alt: ""
}, null, -1)), je = [
  De
], ze = /* @__PURE__ */ d(() => /* @__PURE__ */ c("img", {
  src: we,
  alt: ""
}, null, -1)), Me = [
  ze
], Be = { class: "scene-list" }, Ne = ["onClick"], Ge = ["src"], We = { class: "label" }, Ye = ["autoplay", "loop", "volume"], Ue = ["src"], $e = {
  key: 3,
  class: "mouse-tip"
}, Fe = /* @__PURE__ */ re('<div class="icon-wrap" data-v-96f96666><div class="left" data-v-96f96666><i class="iconfont zv-drop-down" data-v-96f96666></i></div><i class="iconfont zv-mouse" data-v-96f96666></i><div class="right" data-v-96f96666><i class="iconfont zv-drop-down" data-v-96f96666></i></div></div><p class="title" data-v-96f96666>左右拖动   更多精彩</p>', 2), Ze = [
  Fe
], Ke = M({ name: "zv-scene-vr" }), co = /* @__PURE__ */ M({
  ...Ke,
  props: {
    basicOption: {},
    sources: {},
    useEvents: {},
    uuid: {},
    isPreview: { type: Boolean },
    disableDrag: { type: Boolean }
  },
  emits: [
    "on-scene-loaded",
    "on-scene-scenechange",
    "on-scene-zooming",
    "on-scene-hotClick"
  ],
  setup(S, { emit: B }) {
    const o = S, V = B, p = u(), v = u({ src: "", autoplay: !0, loop: !0, volume: 50 }), f = u(null), N = u(o.basicOption.default.firstScene), m = u(N.value), t = C(() => {
      try {
        return o.basicOption.scenes[m.value];
      } catch {
        return null;
      }
    }), T = {
      bylineLabel: "来自 %s",
      noPanoramaError: "未指定全景图像。",
      fileAccessError: "The file %s could not be accessed.",
      malformedURLError: "全景URL无法访问。",
      iOS8WebGLError: "Due to iOS 8's broken WebGL implementation, only progressive encoded JPEGs work for your device (this panorama uses standard encoding).",
      genericWebGLError: "您的浏览器没有显示此全景图所需的WebGL支持。",
      textureSizeError: "This panorama is too big for your device! It's %spx wide, but your device only supports images up to %spx wide. Try another device. (If you're the author, try scaling down the image.)",
      unknownError: "未知错误。检查开发人员控制台。"
    }, G = () => {
      const e = o.basicOption;
      window.SHJSceneVrViewer = window.pannellum.viewer("panorama", {
        ...e,
        default: Object.assign(z(e.default), { firstScene: m.value }),
        strings: T
      });
    }, W = () => {
      const e = () => {
        const r = document.getElementById("panorama-video-wrap");
        r.innerHTML = `
            <video
                id="panorama-video"
                autoplay
                class="video-js vjs-default-skin vr-scene vjs-big-play-centered"
                preload="none"
                style="width:100%;height:100%;"
                crossorigin="anonymous"
            >
            </video>
        `;
      };
      f.value && (f.value.dispose(), f.value = null, e()), f.value || e();
      const n = document.getElementById("panorama-video"), i = o.basicOption;
      if (f.value = window.videojs(n, {
        loop: !0,
        autoplay: !0,
        plugins: {
          pannellum: {
            ...o.basicOption,
            default: Object.assign(z(i.default), { firstScene: m.value }),
            strings: T
          }
        }
      }), window.SHJSceneVrViewer = f.value.pnlmViewer, t.value.sceneType === "video" && (n.src = t.value.panorama), t.value.sceneType === "hls")
        if (E.isSupported()) {
          const r = new E();
          r.loadSource(t.value.panorama), r.attachMedia(n), r.on(E.Events.MANIFEST_PARSED, () => {
            n.play();
          });
        } else n.canPlayType("application/vnd.apple.mpegurl") && (n.src = t.value.panorama);
    }, H = () => {
      if (window.pannellum && o.basicOption) {
        window.SHJSceneVrViewer && (window.SHJSceneVrViewer.destroy(), window.SHJSceneVrViewer = null), t.value.sceneType === "image" ? G() : W();
        try {
          o.basicOption.scenes[window.SHJSceneVrViewer.getScene()] && (v.value = o.basicOption.default.audio, p.value && v.value && (window.SHJSceneVrViewer.audio = p, p.value.src = v.value.src, setTimeout(() => {
            p.value && (h.value = p.value.paused);
          }, 500)));
        } catch {
        }
        window.SHJSceneVrViewer.on("load", () => {
          V("on-scene-loaded", t.value), window.SHJParseEvent(o.useEvents, "on-scene-loaded", t.value);
        }), !o.isPreview || o.basicOption.default.autoRotate === 0 ? window.SHJSceneVrViewer.stopAutoRotate() : window.SHJSceneVrViewer.startAutoRotate();
        try {
          window.SHJSceneVrViewer && async function() {
            for (const e in o.basicOption.scenes)
              Object.prototype.hasOwnProperty.call(o.basicOption.scenes, e) && o.basicOption.scenes[e].hotSpots.forEach(async (i) => {
                await setTimeout(() => {
                  i.draggable = !o.isPreview && !o.disableDrag, window.SHJSceneVrViewer.removeHotSpot(i.id, e), window.SHJSceneVrViewer.addHotSpot(i, e);
                }, 100);
              });
          }();
        } catch {
        }
        window.SHJSceneVrViewer.on("scenechange", (e) => {
          const n = document.getElementsByTagName("video");
          if (fe(n) && n.length > 0 && n.forEach((i) => {
            i && i.pause();
          }), t.value) {
            const i = t.value.sceneType;
            m.value = e;
            const r = t.value.sceneType;
            setTimeout(() => {
              (r !== "image" || i !== "image" && r === "image") && H(), _.value = m.value, V("on-scene-scenechange", t.value), window.SHJParseEvent(o.useEvents, "on-scene-scenechange", t.value);
            }), o.isPreview ? window.SHJSceneVrViewer.startAutoRotate() : window.SHJSceneVrViewer.stopAutoRotate();
          } else
            m.value = o.basicOption.default.firstScene, se(() => {
              H(), V("on-scene-scenechange", t.value), window.SHJParseEvent(o.useEvents, "on-scene-scenechange", t.value);
            });
        }), window.SHJSceneVrViewer.on("zoomchange", me((e) => {
          V("on-scene-zooming", t.value), window.SHJParseEvent(o.useEvents, "on-scene-zooming", t.value);
        }, 300)), window.SHJSceneVrViewer.on("hot-click", (e) => {
          V("on-scene-hotClick", e), window.SHJParseEvent(o.useEvents, "on-scene-hotClick", e);
        });
      }
    }, _ = u(o.basicOption.default.firstScene), Y = C(() => {
      const e = [];
      if (o.basicOption) {
        const n = o.basicOption.scenes;
        for (const i in n)
          if (Object.prototype.hasOwnProperty.call(n, i)) {
            const r = n[i];
            e.push({ label: r.label, value: i, thumbnail: r.cover });
          }
      }
      return e.sort((n, i) => {
        const r = parseInt(n.value.replace("scene", "")), w = parseInt(i.value.replace("scene", ""));
        return r - w;
      });
    });
    oe(() => o.basicOption.default, () => {
      o.isPreview ? window.SHJSceneVrViewer.startAutoRotate() : window.SHJSceneVrViewer.stopAutoRotate();
    }, { deep: !0 });
    const U = (e) => {
      window.SHJSceneVrViewer && _.value !== e && (_.value = e, window.SHJSceneVrViewer.isLoaded() && (window.SHJSceneVrViewer.loadScene(e), o.isPreview ? window.SHJSceneVrViewer.startAutoRotate() : window.SHJSceneVrViewer.stopAutoRotate()));
    }, O = u(), b = u(!0), $ = () => {
      b.value ? O.value.style.bottom = "-999px" : O.value.style.bottom = "80px", b.value = !b.value;
    };
    te(() => {
      o.basicOption && (o.basicOption.default.controls === void 0 && (o.basicOption.default.controls = t.value.controls), o.basicOption.default.audio === void 0 && (o.basicOption.default.audio = t.value.audio)), H(), ee();
    });
    const F = () => {
      window.SHJSceneVrViewer.setPitch(window.SHJSceneVrViewer.getPitch() + 10);
    }, Z = () => {
      window.SHJSceneVrViewer.setPitch(window.SHJSceneVrViewer.getPitch() - 10);
    }, K = () => {
      window.SHJSceneVrViewer.setYaw(window.SHJSceneVrViewer.getYaw() - 10);
    }, q = () => {
      window.SHJSceneVrViewer.setYaw(window.SHJSceneVrViewer.getYaw() + 10);
    }, Q = () => {
      window.SHJSceneVrViewer.setHfov(window.SHJSceneVrViewer.getHfov() - 10);
    }, X = () => {
      window.SHJSceneVrViewer.setHfov(window.SHJSceneVrViewer.getHfov() + 10);
    }, h = u(!1), P = (e) => {
      p.value && (e === "play" ? (p.value.play(), h.value = !1) : (p.value.pause(), h.value = !0));
    }, x = () => {
      window.SHJSceneVrViewer.startAutoRotate();
    };
    let J;
    const y = u(!1), ee = () => {
      o.basicOption.default.controls ? y.value = o.basicOption.default.controls.mouseTipShow : y.value = !0, J && clearTimeout(J), J = setTimeout(() => {
        y.value = !1;
      }, 3500);
    };
    return (e, n) => {
      const i = R("el-tooltip"), r = R("el-scrollbar");
      return s(), a("div", Se, [
        t.value ? (s(), a(A, { key: 0 }, [
          L(c("div", Ve, null, 512), [
            [I, t.value.sceneType === "image"]
          ]),
          L(c("div", be, null, 512), [
            [I, t.value.sceneType !== "image"]
          ])
        ], 64)) : l("", !0),
        e.basicOption.default.controls ? (s(), a("div", he, [
          e.basicOption.default.controls.scene ? (s(), a("div", {
            key: 0,
            class: "btn-icon left",
            style: k({ borderColor: b.value ? "#ff7d00" : "#ffffff3d" }),
            onClick: $
          }, [
            D(i, { content: "场景选择" }, {
              default: j(() => [
                _e
              ]),
              _: 1
            })
          ], 4)) : l("", !0),
          e.basicOption.default.controls.left ? (s(), a("div", {
            key: 1,
            class: "btn-icon left",
            onClick: K
          }, ge)) : l("", !0),
          e.basicOption.default.controls.right ? (s(), a("div", {
            key: 2,
            class: "btn-icon right",
            onClick: q
          }, Oe)) : l("", !0),
          e.basicOption.default.controls.top ? (s(), a("div", {
            key: 3,
            class: "btn-icon up",
            onClick: F
          }, ke)) : l("", !0),
          e.basicOption.default.controls.bottom ? (s(), a("div", {
            key: 4,
            class: "btn-icon down",
            onClick: Z
          }, Te)) : l("", !0),
          e.basicOption.default.controls.magnify ? (s(), a("div", {
            key: 5,
            class: "btn-icon",
            onClick: Q
          }, Ce)) : l("", !0),
          e.basicOption.default.controls.shrink ? (s(), a("div", {
            key: 6,
            class: "btn-icon",
            onClick: X
          }, Ae)) : l("", !0),
          h.value && v.value.src && e.basicOption.default.audio ? (s(), a("div", {
            key: 7,
            class: "btn-icon",
            onClick: n[0] || (n[0] = (w) => P("play"))
          }, Ie)) : l("", !0),
          !h.value && v.value.src && e.basicOption.default.audio ? (s(), a("div", {
            key: 8,
            class: "btn-icon",
            onClick: n[1] || (n[1] = (w) => P("pause"))
          }, je)) : l("", !0),
          e.basicOption.default.controls.rotate ? (s(), a("div", {
            key: 9,
            class: "btn-icon",
            onClick: x
          }, Me)) : l("", !0)
        ])) : l("", !0),
        e.basicOption.default.controls ? (s(), a("div", {
          key: 2,
          ref_key: "sceneMenuRef",
          ref: O,
          class: "scene-menu",
          style: k({ bottom: b.value && e.basicOption.default.controls.scene ? "80px" : "-9999999999999px" })
        }, [
          D(r, null, {
            default: j(() => [
              c("div", Be, [
                (s(!0), a(A, null, ne(Y.value, (w) => (s(), a("div", {
                  key: w.value,
                  class: "scene-item",
                  style: k({ borderColor: _.value === w.value ? "#ff7d00" : "#fff" }),
                  onClick: (qe) => U(w.value)
                }, [
                  c("img", {
                    class: "thumbnail",
                    src: w.thumbnail
                  }, null, 8, Ge),
                  c("p", We, ie(w.label), 1)
                ], 12, Ne))), 128))
              ])
            ]),
            _: 1
          })
        ], 4)) : l("", !0),
        c("audio", {
          ref_key: "audioRef",
          ref: p,
          autoplay: v.value.autoplay,
          loop: v.value.loop,
          volume: v.value.volume
        }, [
          c("source", {
            src: v.value.src
          }, null, 8, Ue)
        ], 8, Ye),
        y.value ? (s(), a("div", $e, Ze)) : l("", !0)
      ]);
    };
  }
});
export {
  co as default
};
