<!--
 * @Date: 2023-08-16 09:29:57
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-08-18 10:35:34
 * @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 style="height: 10%;">
        <span @click="onClose">关闭</span>
      </div> -->
      <div class="vr" style="height: 100%;">
        <div id="viewer"></div>
      </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 { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';
import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';
// import { StereoPlugin } from '@photo-sphere-viewer/stereo-plugin';
import '@photo-sphere-viewer/core/index.css' //引入CSS样式
import '@photo-sphere-viewer/markers-plugin/index.css'
import '@photo-sphere-viewer/gallery-plugin/index.css'
import temp_img from './temp1.jpg'
import temp_img2 from './temp2.webp'
import temp_img3 from './temp3.webp'
import temp_img_loading from './loading.gif'
import temp_img_pin from './pin.png'
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', '')
          }
          // 当视图偏航和/或俯仰改变时触发。
          this.panoramaViewer.addEventListener('position-updated', ({ position }) => {
            // console.log(`new position is yaw: ${position.yaw} pitch: ${position.pitch}`);
            // 工具栏添加
            if ($('.psv-zoom-button').css('display') === 'none') {
              $('.psv-zoom-button').css('display', '')
              // $('.psv-zoom-range').css('display', '')
              $('.psv-move-button').css('display', '')
            }
          });
          // 监听marker回调
          const markersPlugin = this.panoramaViewer.getPlugin(MarkersPlugin);
          markersPlugin.addEventListener('select-marker', ({ marker }) => {
            //
            if (marker.id === 'image2') {
              showDialog({
                title: '温馨提示',
                message: '这是一副来自中世纪的古画。',
                theme: 'round-button',
                confirmButtonColor: '#BC9348',
              }).then(() => {
                // on close
              });
            }
            //
            if (marker.id === 'image1') {
              showDialog({
                title: '温馨提示',
                message: '这是一副来自中世纪的沙发。',
                theme: 'round-button',
                confirmButtonColor: '#BC9348',
              }).then(() => {
                // on close
              });
            }
          });
          // 虚拟旅游功能
          const virtualTour = this.panoramaViewer.getPlugin(VirtualTourPlugin);
          virtualTour.setNodes([
            {
              id: '1',
              panorama: temp_img,
              links: [
                {
                  name: '2',
                  nodeId: '2',
                  // position: { textureX: 2000, textureY: 1000 },
                  position: { yaw: -300, pitch: 0 },
                  arrowStyle: {
                    color: '#AEEEEE',
                    hoverColor: 0xaa5500,
                    outlineColor: 0x000000,
                    scale: [1, 1],
                  }
                },
              ],
              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: {
                //   },
                // },
                {
                  // image marker that opens the panel when clicked
                  id: 'image1',
                  position: { yaw: 250.5, pitch: 50.1 },
                  image: temp_img_pin,
                  size: { width: 50, height: 50 },
                  // anchor: 'bottom center',
                  zoomLvl: 100,
                },
                {
                  // image marker that opens the panel when clicked
                  id: 'image2',
                  position: { yaw: 219.9, pitch: 50.5 },
                  image: temp_img_pin,
                  size: { width: 50, height: 50 },
                  // anchor: 'bottom center',
                  zoomLvl: 100,
                },
              ],
              name: '卧室',
              thumbnail: temp_img,
            },
            {
              id: '2',
              panorama: temp_img2,
              links: [
                {
                  nodeId: '1',
                  position: { yaw: 10, pitch: 0 },
                  arrowStyle: {
                    color: '#AEEEEE',
                    hoverColor: 0xaa5500,
                    outlineColor: 0x000000,
                    scale: [1, 1],
                  },
                },
                {
                  nodeId: '3',
                  // position: { textureX: 1000, textureY: 1000 },
                  position: { yaw: 0, pitch: 0 },
                  arrowStyle: {
                    color: '#AEEEEE',
                    hoverColor: 0xaa5500,
                    outlineColor: 0x000000,
                    scale: [1, 1],
                  },
                },
              ],
              name: '展厅',
              thumbnail: temp_img2
            },
            {
              id: '3',
              panorama: temp_img3,
              links: [
                {
                  nodeId: '1',
                  // position: { textureX: 1000, textureY: 1000 },
                  position: { yaw: 10, pitch: 0 },
                  arrowStyle: {
                    color: '#AEEEEE',
                    hoverColor: 0xaa5500,
                    outlineColor: 0x000000,
                    scale: [1, 1],
                  },
                },
                {
                  nodeId: '2',
                  position: { yaw: 0, pitch: 0 },
                  arrowStyle: {
                    color: '#AEEEEE',
                    hoverColor: 0xaa5500,
                    outlineColor: 0x000000,
                    scale: [1, 1],
                  },
                },
              ],
              name: '室外',
              thumbnail: temp_img3
            },
          ], 1);
          // 监听节点切换状态
          virtualTour.addEventListener('node-changed', ({ node, data }) => {
            // console.log(`Current node is ${node.id}`);
            // if (data.fromNode) {
            //   // other data are available
            //   console.log(`Previous node was ${data.fromNode.id}`);
            // }
            // console.warn(node);
            // console.warn(data);
            // 打开陀螺仪
            // $('.psv-gyroscope-button').trigger('click');
          });
        })
      }
    }
  },
  data() {
    return {
      show_vr: false,
      panoramaViewer: null,
      initViewer: async function () {
        this.panoramaViewer = new Viewer({
          container: document.querySelector('#viewer'), // 容器
          // loadingImg: temp_img_loading,
          panorama: temp_img,
          defaultZoomLvl: 0,
          navbar: ['zoom', 'move', 'gallery' , 'gyroscope', {
            id: 'my-button',
            content: '<svg t="1692238613802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4229" width="64" height="64"><path d="M879.480512 64.020082c-22.23235 0-42.339294 9.080819-56.830333 23.728424l-0.007163-0.007163L511.706311 398.677025 200.77063 87.741343l-0.007163 0.007163c-14.492062-14.647605-34.597983-23.728424-56.830333-23.728424-44.155662 0-79.950913 35.795251-79.950913 79.950913 0 22.23235 9.080819 42.339294 23.728424 56.830333l-0.007163 0.007163 310.935682 310.935682L87.702458 822.680878l0.007163 0.007163c-14.647605 14.492062-23.728424 34.597983-23.728424 56.830333 0 44.155662 35.795251 79.950913 79.950913 79.950913 22.23235 0 42.339294-9.080819 56.830333-23.728424l0.007163 0.007163 310.935682-310.935682 310.935682 310.935682 0.007163-0.007163c14.492062 14.647605 34.597983 23.728424 56.830333 23.728424 44.155662 0 79.950913-35.795251 79.950913-79.950913 0-22.23235-9.080819-42.339294-23.728424-56.830333l0.007163-0.007163L624.77346 511.745197l310.935682-310.935682-0.007163-0.007163c14.647605-14.492062 23.728424-34.597983 23.728424-56.830333C959.431425 99.815333 923.635151 64.020082 879.480512 64.020082z" fill="#cecdcb" p-id="4230"></path></svg>',
            title: 'Hello world',
            className: 'custom-button',
            onClick: (viewer) => {
              this.onClose();
            },
          },],
          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,
            GyroscopePlugin,
            // StereoPlugin,
            [GalleryPlugin, {
              thumbnailSize: { width: 150, height: 150 },
            }]
          ], // 标记点
          size: {
            width: '100%',
            height: '100%'
          },
        })
      }
    }
  },
  mounted() {

  },
  methods: {
    onClose () {
      this.$emit('close', false)
      // this.panoramaViewer = null;
    },
    onClick () {

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

<style lang="less">
  .custom-button {
    svg {
      width: 20px;
      height: 20px;
    }
  }
  .psv-navbar {
    height: 50px;
  }
  .psv--has-navbar .psv-gallery {
    bottom: 50px;
    transform: translateY(calc(100% + 50px));
  }
</style>