<template>
  <div class="content_body">
    <div class="grid-box">
      <div class="btn flex-ct" @click.stop="other(1)">
        <span>SOBRE NÓS</span>
        <h-img
          style="width: 0.2rem; height: 0.3rem"
          type="local"
          :class="rote1 ? 'rote' : ''"
          src="base/jt.png"
        />
      </div>
      <div class="content" ref="emailRef1">
        <p>
          1. Este produto é para uso de usuários maiores de 18 anos e é
          destinado apenas para fins de entretenimento.
        </p>
        <p>2. este jogo contém compras noapp.</p>
        <p>
          3. O fato de um jogador jogar ou ganhar em um jogo de apostas sociais
          não significa que ele ganhará em apostas com dinheiro real e jogos
          relacionados no futuro.
        </p>
      </div>
      <div class="btn flex-ct" @click.stop="other(2)">
        <span>COMO JOGAR</span>
        <h-img
          style="width: 0.2rem; height: 0.3rem"
          type="local"
          :class="rote2 ? 'rote' : ''"
          src="base/jt.png"
        />
      </div>
      <div class="content" ref="emailRef2">
        <h3>Como criar uma conta</h3>
        <p>1. Abra seu navegador e digite. 18n.com</p>
        <p>2. Quando a p¡gina 18n.com abrir, clique em "Cadastre-Se"</p>
        <p>
          3.Insira seu número e senha de seis ou mais caracterese selecione
          "Criar Usuário" para receber um PlN porSms.
        </p>
        <p>4.Insira o PlN e sua conta será ativada.</p>
        <p>
          Obs.:Selecione uma senha que nǎo vai esquecer,pois ela sera utilizada
          para visitar 18n.com
        </p>
        <h3>Como fazer uma ApostaWEB</h3>
        <p>1. Abra seu navegador e digite: 18n.com</p>
        <p>2. Quando a p¡gina 18n.com abrir, clique em login.</p>
        <p>3. Selecione um jogo e clique no botao de jogar.</p>
        <p>4. Você verá a interface principal do jogo.</p>
        <p>5. Clique em "Fazer aposta"</p>
      </div>
      <div class="btn flex-ct" @click.stop="other(3)">
        <span>CONTAIE-NOS</span>
        <h-img
          style="width: 0.2rem; height: 0.3rem"
          type="local"
          :class="rote3 ? 'rote' : ''"
          src="base/jt.png"
        />
      </div>
      <div class="content" ref="emailRef3">
        <span>E-mail:</span>
        <span>
          {{ emile }}
        </span>
      </div>
    </div>
    <div class="flex-cl top">
      <div class="flex-ct">
        <h-img src="home/kefu.png" @click="openLinkPath" />
      </div>
      <p>Posso ajudar?</p>
      <div>
        18N.COM irá responder todas suas dúvidas. Entre em contato usando uma
        das formas abaixo.
      </div>
    </div>
    <div class="flex-sad">
      <h-img
        @click="goLink(item.path, item.type)"
        :src="item.icon"
        v-for="(item, index) in shareList"
        :key="index"
      />
    </div>
    <div class="bottom-text">
      <h-img width="4rem" class="logo" src="base/2logo.png" type="local" />
      <p>
        As informações sobre handicap e probabilidades esportivas contidas neste
        site são apenas para fins de entretenimento. Favor verificar os
        regulamentos de apostas em sua jurisdição, pois eles variam de estado
        para estado, de província para província e de país para país. É proibido
        usar estas informações para violar qualquer lei ou estatuto. O site não
        está associado a nenhuma liga, associação ou equipe profissional ou
        colegiada, nem é endossado por ela. A 18n não tem como alvo público
        menores de 18 anos de idade.
      </p>

      <p>
        1.Este produto é para uso de usuários maiores de 18 anos e é destinado
        apenas para fins de entretenimento.
      </p>

      <p>2.este jogo contém compras noapp.</p>

      <p>
        3.O fato de um jogador jogar ou ganhar em um jogo de apostas sociais não
        significa que ele ganhará em apostas com dinheiro real e jogos
        relacionados no futuro.
      </p>
      <div class="icon">
        <h-img
          width="1.5rem"
          type="local"
          class="img"
          src="base/bottom-2.png"
        />
        <h-img
          width="1.5rem"
          type="local"
          class="img"
          src="base/bottom-1.png"
        />
      </div>
      <p>
        O site 18n.com é operado pela Brilliant Star Services B.V. (registro nº
        159982), com endereço em Julianaplein 36 Curaçao. Este site é operado
        sob número de licença: 8048/JAZ Emitido pelo Provedor de Serviços de
        Jogos, Autorizado e Regulamentado pelo Governo de Curaçao. Bstar
        Services LTD, Reg No. HE 430899
      </p>
      <p class="res">All rights reserved 2024 ©</p>
    </div>
    <div class="flex-cl gotop" @click="goTop">
      <van-icon name="arrow-up" />
      <span>Top</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { useBaseStore } from "@/stores/modules/base";
import useShare from "@/hooks/useShare";
import emitter from "@/utils/eventBus";

import { useRouter } from "vue-router";
const baseStore = useBaseStore();

const router = useRouter();

const emailRef1 = ref();
const emailRef2 = ref();
const emailRef3 = ref();

const { shareList, goLink } = useShare();

const emitFun = defineEmits(["goTop"]);
const goTop = () => {
  emitFun("goTop");
};

const rote1 = ref(false);
const rote2 = ref(false);
const rote3 = ref(false);

const goPage = (path: string) => {
  router.push(path);
};
const other = (type: number) => {
  if (type === 1) {
    let val = emailRef1.value.style.display;
    if (val == "none" || val == "") {
      emailRef1.value.style.display = " block";
      rote1.value = true;
    } else {
      emailRef1.value.style.display = " none";
      rote1.value = false;
    }
  } else if (type === 2) {
    let val = emailRef2.value.style.display;
    if (val == "none" || val == "") {
      emailRef2.value.style.display = " block";
      rote2.value = true;
    } else {
      emailRef2.value.style.display = " none";
      rote2.value = false;
    }
  } else if (type === 3) {
    let val = emailRef3.value.style.display;
    if (val == "none" || val == "") {
      emailRef3.value.style.display = " block";
      rote3.value = true;
    } else {
      emailRef3.value.style.display = " none";
      rote3.value = false;
    }
  }
};

const joinList = [
  { btnText: "ABOUT US", link: "/about-us" },
  { btnText: "HOW TO PLAY", link: "/help" },
];

function openLinkPath() {
  emitter.emit("openService", baseStore.globalConfig.platformConfig.web_gm_tg);
}
const emile = computed(() => {
  return baseStore.globalConfig
    ? baseStore.globalConfig.platformConfig
      ? baseStore.globalConfig.platformConfig.web_gm_mail
        ? baseStore.globalConfig.platformConfig.web_gm_mail
        : " "
      : ""
    : "";
});
</script>
<style lang="scss" scoped>
.content_body {
  padding: 0.1rem 0.2rem 0.6rem 0.2rem;
  font-size: 0.35rem;
  .bot {
    text-align: left;
    margin-top: 0.4rem;
    p {
      padding: 0.2rem 0;
    }
  }
  .gotop {
    font-size: 0.6rem !important;
    padding: 0.3rem 0.8rem;
    background-color: #333d43;
    width: 0.4rem;
    margin: 0.5rem auto 1rem;
    border-radius: $border-radius;
  }
  .text {
    color: #929e9c;
    padding: 0 0.2rem;
    text-align: center;
    margin-top: 0.4rem;
    line-height: 0.6rem;

    h3 {
      margin-top: 0.4rem;
      border-bottom: 1px solid #929e9c;
      padding-bottom: 0.2rem;
    }
  }
  .grid-box {
    display: flex;
    flex-direction: column;
    .btn {
      font-size: 0.35rem;
      padding: 0.2rem;
      margin-bottom: 0.1rem;
      background-color: #1d2328;
      border-radius: 0.1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .content {
      display: none;
      font-size: 0.3rem;
      margin-left: 0.5rem;
      font-weight: 600;
      color: #838d9e;
      > h3 {
        color: #fff;
        font-size: 0.3rem;
      }
    }
  }
  .flex-cl {
    text-align: center;
    font-weight: 600;
    font-size: 0.2rem;
    color: #fff;
  }
  .top {
    padding: 1rem 0.35rem 0.35rem 0.35rem;
    font-size: 0.4rem;
    .flex-sb {
      width: 35%;
    }
    p {
      margin: 0.1rem 0 0.4rem 0;
    }
  }
  .rote {
    transform: rotate(-90deg);
  }
}

.bottom-text {
  margin-top: 0.4rem;
  padding: 0 0.1rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .logo {
    margin: 0.1rem auto;
  }
  P {
    color: #929e9c;
  }
  .icon {
    display: flex;
    justify-content: center;
    margin: 0.1rem 0;
    .img {
      padding: 0 0.2rem;
    }
  }
  .res {
    margin: 0.6rem 0;
    text-align: center;
  }
}
</style>
