<!--
 * @Date: 2023-08-16 09:29:57
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-08-16 15:16:06
 * @FilePath: /map-demo/src/components/VRViewer/index.vue
 * @Description: 文件描述
-->
<template>
  <div class="vr-viewer">
    <van-popup v-model:show="show_vr" position="right" :overlay="true"
      :style="{ height: '100%', width: '100%', background: '#FFF' }">
      <div class="vr" style="height: 90%;">
        <div id="viewer"></div>
      </div>
      <div style="height: 10%;">
        <span @click="onClose">关闭</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
import $ from 'jquery';
import { Viewer } from '@photo-sphere-viewer/core' // 引入插件
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
import { VirtualTourPlugin } from '@photo-sphere-viewer/virtual-tour-plugin';
import '@photo-sphere-viewer/core/index.css' //引入CSS样式
import '@photo-sphere-viewer/markers-plugin/index.css'
import temp_img from './temp1.jpg'
import temp_img2 from './temp2.webp'
import temp_img3 from './temp3.webp'
import { showDialog } from 'vant';

const markerLighthouse = {
  // polygon marker
  id: 'polygon',
  polygon: [
    [6.2208, 0.0906], [0.0443, 0.1028], [0.2322, 0.0849], [0.4531, 0.0387],
    [0.5022, -0.0056], [0.4587, -0.0396], [0.252, -0.0453], [0.0434, -0.0575],
    [6.1302, -0.0623], [6.0094, -0.0169], [6.0471, 0.032], [6.2208, 0.0906],
  ],
  svgStyle: {
    fill: 'rgba(200, 0, 0, 0.2)',
    stroke: 'rgba(200, 0, 50, 0.8)',
    strokeWidth: '2px',
  },
  tooltip: {
  },
};

export default {
  props: {
    show: {
      type: Boolean,
      default: () => { }
    }
  },
  watch: {
    show(val) {
      this.show_vr = val;
      if (val && !this.panoramaViewer) {
        this.$nextTick(() => {
          this.initViewer();
          if ($('.psv-zoom-button').css('display') === 'none') {
            $('.psv-zoom-button').css('display', '')
            // $('.psv-zoom-range').css('display', '')
            $('.psv-move-button').css('display', '')
          }
          const markersPlugin = this.panoramaViewer.getPlugin(MarkersPlugin);
          markersPlugin.addEventListener('select-marker', ({ marker }) => {
            //
            if (marker.id === 'polygon') {
              showDialog({
                title: '温馨提示',
                message: '这是一副来自中世纪的古画。',
                theme: 'round-button',
              }).then(() => {
                // on close
              });
            }
          });
          const virtualTour = this.panoramaViewer.getPlugin(VirtualTourPlugin);
          virtualTour.setNodes([
            {
              id: '1',
              panorama: temp_img,
              links: [
                {
                  nodeId: '2',
                  // position: { textureX: 2000, textureY: 1000 },
                  position: { yaw: -300, pitch: 0 },
                },
              ],
              markers: [markerLighthouse],
            },
            {
              id: '2',
              panorama: temp_img2,
              links: [
                {
                  nodeId: '3',
                  // position: { textureX: 1000, textureY: 1000 },
                  position: { yaw: 0, pitch: 0 },
                },
              ],
            },
            {
              id: '3',
              panorama: temp_img3,
              links: [
                {
                  nodeId: '1',
                  // position: { textureX: 1000, textureY: 1000 },
                  position: { yaw: 0, pitch: 0 },
                },
              ],
            },
          ])
        })
      }
    }
  },
  data() {
    return {
      show_vr: false,
      panoramaViewer: null,
      initViewer: async function () {
        this.panoramaViewer = new Viewer({
          container: document.querySelector('#viewer'), // 容器
          panorama: temp_img,
          defaultZoomLvl: 0,
          navbar: [
            'zoom',
            'move',
            // 'caption',
            // 'fullscreen'
          ],
          plugins: [
            [MarkersPlugin, {
              markers: [
                {
                  // polygon marker
                  id: 'polygon',
                  polygon: [
                    [6.2208, 0.0906], [0.0443, 0.1028], [0.2322, 0.0849], [0.4531, 0.0387],
                    [0.5022, -0.0056], [0.4587, -0.0396], [0.252, -0.0453], [0.0434, -0.0575],
                    [6.1302, -0.0623], [6.0094, -0.0169], [6.0471, 0.032], [6.2208, 0.0906],
                  ],
                  svgStyle: {
                    fill: 'rgba(200, 0, 0, 0.2)',
                    stroke: 'rgba(200, 0, 50, 0.8)',
                    strokeWidth: '2px',
                  },
                  tooltip: {
                  },
                },
              ],
            }],
            VirtualTourPlugin,
          ], // 标记点
          size: {
            width: '100%',
            height: '100%'
          }
        })
      }
    }
  },
  mounted() {

  },
  methods: {
    onClose () {
      console.warn(1);
      this.$emit('close', false)
    },
    onClick () {

      // this.panoramaViewer.addEventListener('click', ({ data }) => {
      //   console.log(`${data.rightclick ? 'right ' : ''}clicked at yaw: ${data.yaw} pitch: ${data.pitch}`);
      // });
    }
  }
}
</script>

<style lang="less" scoped>
</style>