<template>
  <div v-if="show" class="user-tips-overlay">
    <img :src="metadata.appIcon || require('@/assets/images/default/show/img_tipsmb_default.png')" alt="" />
  </div>
</template>
<script setup>
import { onMounted, watch, computed, ref, nextTick } from "vue";
import { useApp } from "@/app";
import { useStore } from "vuex";
const store = useStore();
const metadata = computed(() => store.getters["scene/metadata"]);

const show = ref(false);

useApp().then((app) => {
  app.Scene.on("sceneReady", () => {
    console.log(metadata.value.isRemind);
    let locoR = "localRemind" + metadata.value.id;
    if (metadata.value.isRemind) {
      show.value = localStorage.getItem(locoR) == 1 ? false : !!metadata.value.remindTime;
      localStorage.setItem(locoR, 1);
    } else {
      console.log(metadata.value.remindTime);
      if (metadata.value.remindTime) {
        show.value = true;
      }
      localStorage.setItem(locoR, 0);
    }

    if (show.value) {
      setTimeout(() => {
        show.value = false;
      }, (metadata.value.remindTime || 3) * 1000);
    }
  });
});
</script>

<style lang="scss" scoped>
.user-tips-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: display 0.3s ease;
  > img {
    max-width: 200px;
  }
}
</style>
