<template>
  <Teleport to="#app">
    <div class="menu" ref="menuRef" @click.stop="emit('update:modelValue')">
      <div class="menu-box">
        <div class="right" style="padding-left:0.6rem;">
          <h-img width="3rem" src="base/2logo.png" type="local" />
          <h-img type="local" src="menu/close.png" @click="emit('update:modelValue')" />
        </div>
        <div class="flex-cl">
          <div class="item">
            <div class="item-top item-new1">
              <div @click.stop="openSlots(168)">
                <h-img width=".5rem" type="local" src="menu/icon_01.png" />
                <span>Slots</span>
              </div>
              <div @click="openLink(9)">
                <h-img width=".5rem" type="local" src="menu/icon_02.png" />
                <span>casino vivo</span>
              </div>
              <div @click="openLink(10)">
                <h-img width=".5rem" type="local" src="menu/icon_03.png" />
                <span>Esportes</span>
              </div>
            </div>
          </div>
          <!-- 拼多多入口 -->
          <!-- <div class="item bg-item">
            <h-img width=".5rem" type="local" src="base/icon_sz025.png" />
            <span>Loteria</span>
          </div> -->
          <div class="item">
            <div class="item-top">
              <div @click="openLink(4)" style="
                  background: linear-gradient(
                    to bottom,
                    #292024,
                    #312023,
                    #3b2021
                  );
                ">
                <h-img width=".5rem" type="local" src="menu/icon_05.png" />
                <span style="color: #fff">Cashback 25%</span>
              </div>
              <div @click="openLink(5)" style="
                  background: linear-gradient(
                    to bottom,
                    #1b1b2b,
                    #2b213f,
                    #392652
                  );
                ">
                <h-img width=".5rem" type="local" src="menu/icon_06.png" />
                <span style="color: #fff">Receba R$ 200 de graça</span>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-top item-new">
              <div @click.stop="openHome(23)">
                <h-img width=".5rem" type="local" src="base/icon_01.png" />
                <span>Popular</span>
              </div>
              <div @click="openLink(11)">
                <h-img width=".5rem" type="local" src="base/icon_02.png" />
                <span>Coleção</span>
              </div>
              <div @click="openLink(12)">
                <h-img width=".5rem" type="local" src="base/icon_03.png" />
                <span>Recentes</span>
              </div>
            </div>
          </div>
          <div class="car-box flex-sb" @click="openLink(8)">
            <span>Promoções</span>
            <h-img type="local" src="menu/arrows.png" />
          </div>
          <div class="item mg-left" @click="openLink(1)">
            <h-img width=".5rem" type="local" src="menu/icon_1.png" />
            <span>Depósito</span>
          </div>
          <div class="item mg-left" @click="openLink(2)">
            <h-img width=".5rem" type="local" src="menu/icon_2.png" />
            <span>Sacar</span>
          </div>
          <div class="item mg-left" @click="openLink(3)" v-if="hasShowOneOfThree">
            <h-img width=".5rem" type="local" src="base/icon_17.png" />
            <span>Escolha uma das três promoções de recarga</span>
          </div>
          <div class="item mg-left" style="justify-content: space-between" @click="openLink(7)">
            <div style="
                display: flex;
                justify-content: center;
                align-items: center;
              ">
              <h-img style="margin-left: 0.2rem" width=".5rem" src="menu/icon_7.png" />
              <span>18N APP</span>
            </div>
            <div class="btn">INSTALAR</div>
          </div>
          <div class="item mg-left">
            <span>Baixe o APP e ganhe um bônus grátis de R$9,00 </span>
          </div>

          <div class="item mg-left">
            <span>Junte-se a nossa comunidade</span>
          </div>
          <div class="item mg-left">
            <img v-for="(item, index) in baseStore.groupList" class="group" :key="index" :src="getImage(item.iconUrl)"
              @click="jumpOhterLink(item.url)" />
          </div>
          <div class="item mg-left">
            <span>Suporte</span>
          </div>
          <div class="item mg-left">
            <span>
              Consiga ajuda ligando ou visitando nosso centro de ajuda
            </span>
          </div>
          <div class="item mg-left" @click="goPage('/help')">
            <h-img width=".5rem" src="menu/icon_8.png" />
            <span>Visitar o Centro de Ajuda</span>
          </div>
          <div class="item mg-left" @click="openPropLink">
            <h-img width=".5rem" src="menu/icon_9.png" />
            <span>Relatar Problema</span>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>
<script setup lang="ts">
import { nextTick, ref, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { jumpOhterLink, getImage } from "@/utils";
import storage, { actions } from "@/utils/storage";
import useGift from "@/hooks/useGift";
import { useUserStore } from "@/stores/modules/user";
import { useBaseStore } from "@/stores/modules/base";
import { gameListStore } from "@/stores/modules/game-list";
import socketApi from "@/socket/socketApi";
import { useGameStore } from "@/stores/modules/game";
import { toast } from "@/utils/toast";
import emitter from "@/utils/eventBus";
import http from "@/https/index";
const userStore = useUserStore();
const baseStore = useBaseStore();
const gameDataStore = gameListStore();
const gameStore = useGameStore();
const router = useRouter();

const hasShowOneOfThree = computed(() => {
  let data = baseStore.globalConfig.switchConfig
    ? baseStore.globalConfig.switchConfig.one_of_three_state &&
      baseStore.globalConfig.switchConfig.one_of_three_state == 2
      ? true
      : false
    : false;
  return data;
});

const props = defineProps({
  modelValue: { type: Boolean, default: false, required: false },
});
const openSlots = () => {
  gameStore.setSearchData({
    type: 2,
    value: 2
  });
  router.push("/search");
  emit("update:modelValue");
}
const openHome = (type: number) => {
  emit("update:modelValue");
  // router.push("/");
  storage.setStorage(actions.ALL_GAME_CLASS, type);
  router.push("/allGame");
};
const emit = defineEmits(["close", "update:modelValue"]);
// 兑换码
const menuRef = ref();

const showRedemptionCode = computed(() => {
  return baseStore.globalConfig.switchConfig
    ? baseStore.globalConfig.switchConfig.giftcode_state
    : -1;
});
watch(
  () => props.modelValue,
  () => {
    let app: any = document.getElementById("app");
    if (props.modelValue) {
      app.style.overflow = "hidden";
      nextTick(() => {
        menuRef.value.style.transform = "translateX(0)";
      });
    } else {
      app.style.overflow = "";
      nextTick(() => {
        menuRef.value.style.transform = "translateX(-100%)";
      });
    }
  },
  {
    deep: true,
  }
);

const openPropLink = () => {
  emit("update:modelValue");
  emitter.emit("openService", baseStore.globalConfig.platformConfig.web_gm_tg);
};

const close = () => {
  emit("update:modelValue");
};

const goPage = (path: string) => {
  router.push(path);
  close();
};

async function openLink(num: number) {
  switch (num) {
    case 1:
      router.push("/deposit");
      break;
    case 2:
      router.push("/withdrawal");
      break;
    case 3:
      emit("update:modelValue");
      emitter.emit("openThreeInOne");
      break;
    case 4:
      router.push("/cashback");
      break;
    case 5:
      router.push("/turntable");
      break;
    case 6:
      router.push("/gameTask");
      break;
    case 7:
      router.push("/download");
      break;
    case 8:
      router.push("/activity");
      break;
    case 11:
      storage.setStorage(actions.COLLECT_TYPE, 1);
      router.push("/collect");
      break;
    case 12:
      storage.setStorage(actions.COLLECT_TYPE, 2);
      router.push("/collect");
      break;
    case 9:
      // 跳转真人
      emit("update:modelValue");
      // router.push("/");
      storage.setStorage(actions.ALL_GAME_CLASS, 11);
      router.push("/allGame");
      //跳转体育游戏
      // if (userStore.userInfo && userStore.userInfo.uid) {
      //   let Esportes =
      //     <any>(
      //       gameDataStore.gameList.find(
      //         (item: any) => item.gameClassName === "Esportes"
      //       )
      //     ) || {};
      //   if (!Esportes.gameList || Esportes.gameList.length === 0) return;
      //   const res: ResultData = await socketApi.getGameUrl({
      //     gameId: Esportes.gameList[0].gameId,
      //   });
      //   if (res.code != 0) return toast(res.txt);
      //   gameStore.setStartGameInfo(res.data);
      // } else {
      //   toast("Please log in");
      //   router.push("/login");
      // }
      break;
    case 10:
      // 跳转体育游戏;
      if (userStore.userInfo && userStore.userInfo.uid) {
        let Esportes =
          <any>(
            gameDataStore.gameList.find(
              (item: any) => item.gameClassName === "Esportes"
            )
          ) || {};
        if (!Esportes.gameList || Esportes.gameList.length === 0) return;
        const res: ResultData = await http.getGameUrl({
          gameId: Esportes.gameList[0].gameId,
        });
        if (res.code != 0) return toast(res.txt);
        gameStore.setStartGameInfo(res.data);
      } else {
        toast("Please log in");
        router.push("/login");
      }
      break;
  }
  close();
}
</script>
<style lang="scss" scoped>
.menu {
  height: 100%;
  // backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  transform: translateX(-100%);
  transition: transform 300ms ease;
  width: 100%;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 2147483640;
  overflow: auto;

  &-box {
    width: 9.2rem;
    min-height: 100vh;
    background: #1e2428;

    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.2rem;
      background: #1b2f31;
      position: sticky;
      top: 0%;
      z-index: 9;
    }

    .flex-cl {
      justify-content: left;
      padding: 0 0.6rem;

      >.flex-sb2 {
        display: flex;
        align-items: center;
        justify-content: space-between;

        >div {
          display: flex;
          align-items: center;
          width: 45%;
          border: 1px solid $other-color;
          justify-content: center;
          border-radius: $border-radius;
          padding: 0.15rem 0;
          background-color: #3a3a3a;
          font-size: 0.4rem;

          >.van-image {
            width: 0.7rem;
          }
        }
      }
    }

    .car-box {
      width: 100%;
      padding: 0.3rem 0;
      font-size: 0.3rem;
      color: #949f9e;
      font-weight: 600;
      border-radius: 0.1rem;
      background-color: #2d353c;

      >span {
        margin-left: 0.2rem;
      }

      >.van-image {
        margin-right: 0.2rem;
      }
    }

    .bg-item {
      background-color: #2d353c;
      border-radius: 0.1rem;

      >.van-image {
        margin-left: 0.2rem;
      }
    }

    .mg-left {
      border-bottom: 2px solid #2d353c;
      padding: 0.3rem 0 !important;

      >.van-image {
        margin-left: 0.2rem;
      }
    }

    .item {
      width: 100%;
      display: flex;
      padding: 0.15rem 0;
      justify-content: left;
      align-items: center;

      &-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >div {
          display: flex;
          align-items: center;
          background-color: #2d353c;
          padding: 0.2rem;
          border-radius: 0.1rem;
        }
      }

      &-new1 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: flex-end;
        grid-gap: 0.2rem;

        >div {
          padding: 0.2rem 0;
          justify-content: center;
        }
      }

      &-new {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: flex-end;
        grid-gap: 0.2rem;

        >div {
          flex-direction: column !important;
          padding: 0.1rem;

          >span {
            color: #fff !important;
          }
        }
      }

      >img {
        width: 0.7rem;
        margin-right: 0.4rem;
      }

      span {
        font-size: 0.3rem;
        font-weight: 600;
        color: #949f9e;
        margin-left: 0.2rem;
      }

      .btn {
        font-size: 0.3rem;
        background-color: #2f6368;
        border-radius: 0.1rem;
        padding: 0.1rem 0.3rem;
        color: #addad5;
      }

      .group {
        width: 0.8rem;
        margin-left: 0.2rem;
      }
    }
  }
}

.menu::-webkit-scrollbar {
  display: none;
}
</style>
