<template>
  <div class="pannorama-wrap">
    <div ref="pannoramaViewRef" class="pannorama-view"></div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import 'pannellum/build/pannellum.css'
import 'pannellum/build/pannellum.js'

const pannoramaViewRef = ref<HTMLElement | null>(null)
let viewer: any = null

onMounted(() => {
  // 通过 window.pannellum 访问
  const pannellum = (window as any).pannellum
  if (!pannellum) {
    console.error('Pannellum library not loaded')
    return
  }

  if (pannoramaViewRef.value) {
    viewer = pannellum.viewer(pannoramaViewRef.value, {
      "type": "equirectangular",
      "panorama": "https://pannellum.org/images/alma.jpg"
    })
  }
})

onUnmounted(() => {
  if (viewer) {
    viewer.destroy()
  }
})
</script>
<style lang="less" scoped>
.pannorama-wrap{
  width: 100%;
  height: 100%;
}
</style>