<template>
  <div class="h-tabbar flex-ct">
    <img
      :src="getAssets('tabbar/bg_dibu.png')"
      style="width: 100%; height: 100%"
    />
    <div class="grid-se icon-box">
      <div class="flex-sa" @click="linkPage('/')">
        <h-img
          type="local"
          v-if="activeNav == '/'"
          src="tabbar/icon_jia2.png"
        />
        <h-img type="local" v-else src="tabbar/icon_jia.png" />
        <span :style="{ color: currentColor('/') }"> lnício </span>
      </div>
      <div class="flex-sa" @click="linkPage('/deposit')">
        <h-img
          type="local"
          v-if="activeNav == '/deposit'"
          src="tabbar/icon_cz2.png"
        />
        <h-img type="local" v-else src="tabbar/icon_cz.png" />
        <span :style="{ color: currentColor('/deposit') }"> Depósito </span>
      </div>
      <div></div>
      <div class="flex-sa" @click="linkPage('/turntable')">
        <h-img
          type="local"
          v-if="activeNav == '/turntable'"
          src="tabbar/icon_dzp2.png"
        />
        <h-img type="local" v-else src="tabbar/icon_dzp.png" />
        <span :style="{ color: currentColor('/turntable') }"> Roleta </span>
      </div>
      <div class="flex-sa" @click="linkPage('/perfil')">
        <h-img
          type="local"
          v-if="activeNav == '/perfil'"
          src="tabbar/icon_jwd2.png"
        />
        <h-img type="local" v-else src="tabbar/icon_jwd.png" />
        <span :style="{ color: currentColor('/perfil') }"> Perfil </span>
      </div>
    </div>
    <div class="flex-sa center" @click="linkPage('/infiniteProxy')">
      <h-img
        type="local"
        v-if="activeNav == 'perfil'"
        src="tabbar/icon_cuxhuod2.png"
      />
      <h-img type="local" v-else src="tabbar/icon_cuxhuod.png" />
      <span :style="{ color: currentColor('/infiniteProxy') }"> Afiliado </span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, onBeforeMount,computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import { gameListStore } from "@/stores/modules/game-list";
import { toast } from "@/utils/toast";
import { getAssets } from "@/utils";
import socketApi from "@/socket/socketApi";
import { useGameStore } from "@/stores/modules/game";
import http from "@/https/index";
// import emitter from "@/utils/eventBus";

const userStore = useUserStore();
const gameDataStore = gameListStore();
const gameStore = useGameStore();

const router = useRouter();
const route = useRoute();

const activeNav = ref<string>("/");
// const emit = defineEmits(["on-open"]);
const showOne = computed(() => {
  return userStore.userInfo && userStore.userInfo.totalPay == 0
});
function linkPage(path: string) {
  // console.log(path, "?path");
  activeNav.value = path;
  if (path != "/Esportes") {
    return router.push(path);
  } else {
    // 打开体育游戏
    if (userStore.userInfo && userStore.userInfo.uid) {
      openGame();
      activeNav.value = "/";
    } else {
      toast("Please log in");
      router.push("/login");
    }
  }
}
const currentColor = (path: string) => {
  return activeNav.value == path ? "#00E7BB" : "#8D9E9A";
};

const openGame = async () => {
  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.setGameUrl(res.data.url);
  gameStore.setStartGameInfo(res.data);
};

watch(
  route,
  () => {
    activeNav.value = route.path;
  },
  {
    deep: true,
  }
);
onBeforeMount(() => {
  activeNav.value = route.path;
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
