<template>
  <transition mode="out-in">
    <div class="treasure" v-if="tagclick.type == 'treasure'">
      <div class="treasurecon">
        <p>恭喜您，找到寶藏！</p>
        <img :src="require('@/assets/images/icon/gift.gif')" alt="" />
        <div @click.stop="goto_now" class="btn">立即前往</div>
      </div>
      <ui-icon class="close" @click.stop="emit('close')" type="close"></ui-icon>

    </div>
  </transition>
</template>

<script setup>
import { onMounted, watch, defineEmits, computed, ref, nextTick, defineProps } from "vue";
import { useApp, getApp } from "@/app";
import { useStore } from "vuex";
import browser from "@/utils/browser";

const store = useStore();

const tagclick = computed(() => store.getters["tag/tagClickType"]);

const emit = defineEmits(["close"]);

const goto_now = () => {

  let tag = {};

  try {
    tag = JSON.parse(tagclick.value.data.hotContent);
    browser.openLink(
      "/subPackage/pages/activity/activity?pageId=" + tag.couponLink,
      `https://m.cdfmembers.com/shop/600667208/showactivity?pageId=${tag.couponLink}`,
      `/pages/showactivity/showactivity?pageId=${tag.couponLink}`
    );
    emit("close");
  } catch (error) {
    console.log(error);
  }
};
</script>

<style lang="scss" scoped>
.treasure {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: unset;
  z-index: 101;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .treasurecon {
    text-align: center;
    width: 90%;
    max-width: 500px;
    p {
      height: 33px;
      font-size: 24px;
      font-weight: 400;
      color: #ffd980;
      line-height: 33px;
      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    }
    > img {
      width: 100%;
      margin: 12% auto;
    }

    .btn {
      max-width: 122px;
      margin: 0 auto;
      height: 32px;
      line-height: 32px;
      color: #ed5d18;
      background: linear-gradient(180deg, #fbecc7 0%, #fff8e8 6%, #f8e0b4 15%, #f1c387 52%, #fad78c 87%, #f8e2ad 94%, #fdde8e 100%);
      border-radius: 16px;
      font-size: 16px;
      font-weight: bold;
      z-index: 99;
    }
  }

  .close{
    position: absolute;
    right: 30px;
    font-size: 20px;
    top: 50px;
    color: #fff;
  }
}
</style>
