<template>
  <van-popup
    teleport="#app"
    z-index="9999999999999999"
    v-model:show="addToHomeVisible"
    position="bottom"
    @closed="close"
  >
    <div class="add-to-home-content">
      <div class="tips">
        <h-img width="3.5rem" src="base/144.png" />
        <span>
          Gostaríamos de adicionar o 18N à sua tela inicial para as últimas
          apostas grátis e atualizações de bônus.
        </span>
      </div>
      <div class="button">
        <div class="cancelar" @click="close">Cancelar</div>
        <div class="continuar" @click="submit">Continuar</div>
      </div>
    </div>
  </van-popup>
  <!-- ios添加主屏幕提示 -->
  <van-popup
    teleport="#app"
    z-index="9999999999999999"
    v-model:show="showIosAddToHomVisible"
    position="bottom"
    closeable
  >
    <div class="is-ios">
      <div class="title">Adicionar à Tela de Início</div>
      <div class="tip">
        <span>
          1.Toque no ícone [Mais] e, em seguida, toque em Adicionar à Tela
          Inicial
        </span>
        <h-img src="base/ios-tip-1.png" />
      </div>
      <div class="tip">
        <span>2.clique em Adicionar à tela inicial, selecione [Adicionar]</span>
        <h-img src="base/ios-tip-2.png" />
      </div>
      <h-img class="dianji" src="base/dianji.png" />
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import storage, { actions } from "@/utils/storage";
import { useBaseStore } from "@/stores/modules/base";
const baseStore = useBaseStore();

const addToHomeVisible = ref(false);
const showIosAddToHomVisible = ref(false);

watchEffect(() => {
  if (baseStore.showAddToHomeVisible) {
    addToHomeVisible.value = true;
  }
});

const close = () => {
  addToHomeVisible.value = false;
  storage.setSessionStorage(actions.ADD_TO_HOME, 1);
  baseStore.setShowAddToHomeVisible(false);
};

const submit = () => {
  const browser = JSON.parse(
    <string>storage.getSessionStorage(actions.BROWSER)
  );
  if (browser.isIos) {
    showIosAddToHomVisible.value = true;
    addToHomeVisible.value = false;
  } else {
    baseStore.deferredPrompt.prompt();
    baseStore.deferredPrompt.userChoice.then((choiceResult: any) => {
      if (choiceResult.outcome === "accepted") {
        addToHomeVisible.value = false;
      }
    });
  }
  storage.setSessionStorage(actions.ADD_TO_HOME, 1);
};
</script>

<style lang="scss" scoped>
.add-to-home-content {
  font-size: 0.4rem;
  padding: 0.25rem 0.3rem;
  .tips {
    display: flex;
    align-items: flex-start;
    span {
      padding-left: 0.2rem;
      color: #000;
    }
  }
  .button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .cancelar {
      color: #313160;
      padding: 0.15rem 0.25rem;
      margin-right: 0.25rem;
      @extend .more;
    }
    .continuar {
      background: $nav-bar;
      color: #fff;
      padding: 0.15rem 0.25rem;
      border-radius: 0.1rem;
      @extend .more;
    }
  }
}

.is-ios {
  display: flex;
  flex-direction: column;
  background: $nav-bar;
  padding: 0.1rem 1rem;
  color: #fff;
  position: relative;
  .title {
    font-size: 0.5rem;
    text-align: center;
    margin: 0.25rem;
  }
  .tip {
    font-size: 0.35rem;
    margin: 0.2rem 0;
    span {
      padding-bottom: 0.2rem;
      display: block;
    }
  }
  .dianji {
    position: absolute;
    bottom: 0;
    width: 10%;
    left: 43%;
    animation: topToBottom 2000ms forwards infinite;
    transition: all 200ms linear;
    z-index: 1;
  }
}
:deep(.van-popup__close-icon) {
  color: #fff;
  font-size: 0.6rem;
}

@keyframes topToBottom {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 20px;
  }
  100% {
    bottom: 0;
  }
}
</style>
