<template>

  <div class="rightcon">
    <div class="more-icon" :class="{ show: showMore }">
      <ui-icon @click="showMore = !showMore" class="more" :type="showMore ? 'collect' : 'more'"></ui-icon>
    </div>
    <ul v-if="showMore" @click="showMore = false">
      <li @click="onVR"
        v-if="currentScene.type == 'pano' || (fdkkCurrentVersion == 'v3') || (currentScene.type == '4dkk' && (fdkkmetadata.controls && fdkkmetadata.controls.showVR))">
        <img :src="require(`@/assets/images/icon/vr@2x.png`)" alt="" />
      </li>

      <li @click="onShare">
        <img :src="require(`@/assets/images/icon/share@2x.png`)" alt="" />
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useApp } from "@/app";
import { useStore } from "vuex";
import { Dialog } from "@/global_components";

import { ref, watch, computed, onMounted, watchEffect, nextTick } from "vue";

const store = useStore();
const showMore = ref(false)
const currentScene = computed(() => store.getters["scene/currentScene"]);
const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);
const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);
const vrStatus = computed(() => store.getters["functions/vrStatus"]);

// 授权
const $iosGrantedTips = (cb) => {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf("like mac os x") > 0) {
    var reg = /os [\d._]*/gi;
    var verinfo = ua.match(reg);
    var version = (verinfo + "")
      .replace(/[^0-9|_.]/gi, "")
      .replace(/_/gi, ".");
    var arr = version.split(".");
    console.log(arr);

    if (arr[0] > 12 && arr[1] >= 0) {
      //对13.3以后的版本处理,包括13.3,
      DeviceMotionEvent && DeviceMotionEvent.requestPermission()
        .then((permissionState) => {
          if (permissionState == "granted") {
            cb({
              msg: '授权成功',
              code: 1
            })
            this.reload();
          } else {
            cb({
              msg: '授权失败',
              code: 0
            })
          }
        })
    }
    else {
      //13.3以前的版本
      cb({
        msg: '无需授权，直接成功',
        code: 1
      })
    }
  } else {
    cb({
      msg: '无需授权，直接成功',
      code: 1
    })
  }
}

const onVR = () => {
  $iosGrantedTips((data) => {
    console.log(data);
    if (data.code == 1) {
      store.commit("functions/setVrStatus", !vrStatus.value);
      if (currentScene.value.type == 'pano') {
        useApp().then((app) => {
          app.krpanoDom.call(vrStatus.value ? "webvr.enterVR()" : "webvr.exitVR()")
        });
      } else {
        if (fdkkCurrentVersion.value == 'v4') {
          document.querySelector('#fdkkifr') && document.querySelector('#fdkkifr').contentWindow.postMessage(
            {
              source: "qjkankan",
              event: "enterVr",
              params: {
                toggle: vrStatus.value
              }
            },
            "*"
          );
        } else {
          let ele = document.getElementById("showifr");
          ele && ele.contentWindow.postMessage(
            {
              source: "mingyuan",
              event: vrStatus.value ? "vr-in" : "vr-out",
            },
            "*"
          );
        }
      }
    } else {
      Dialog.alert('运动和方向访问失败，您需要完全关闭此应用，然后再次打开，并允许访问运动与方向')
    }
  });

};

const onShare = () => {
  store.commit("functions/setShareUrl", true);
};

watch(currentScene, () => {
  store.commit("functions/setVrStatus", false);
  useApp().then((app) => {
    app.krpanoDom && app.krpanoDom.call('webvr.exitVR()')
  });
})

</script>>

<style lang="scss" scoped>
.rightcon {
  width: 36px;
  height: 36px;
  position: relative;

  .more-icon {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .more {
      font-size: 30px;
    }


    &.show {
      backdrop-filter: blur(0);
      background: rgba(0, 0, 0, 0);
      border-bottom-color: transparent;
      >ul {
        padding: 6px 0 30px;
        height: 114px;
        border: 1px solid rgba(255, 255, 255, 0.2);
      }
    }
  }

  >ul {
    width: 36px;
    padding: 0;
    position: absolute;
    bottom: 0;
    z-index: -2;
    width: 36px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 18px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 0 38px;

    >li {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 4px  0;

      >img {
        width: 26px;
      }
    }
  }

}
</style>