<template>
  <van-overlay :z-index="2147483640" :show="modelValue" :lock-scroll="false">
    <div class="overlay">
      <div class="overlay-body">
        <div class="details-box">
          <h-img
            class="close"
            width=".5rem"
            type="local"
            src="menu/close.png"
            @click="goBack"
          />
          <div class="flex-sb">
            <img
              class="game-icon"
              :src="getImage(gameStore.gameInfo.gameImg2)"
            />
            <div class="game-title" :title="gameStore.gameInfo.gameAlias">
              <div class="gameName">{{ gameStore.gameInfo.gameAlias }}</div>
              <van-loading
                size=".6rem"
                color="#268C71"
                v-if="loading"
              ></van-loading>
              <h-img
                width=".6rem"
                type="local"
                v-else
                :src="heartSrc"
                @click="collectGame"
              />
            </div>
          </div>
          <div class="btnBox">
            <div class="btn1" @click="start(1)" v-show="showDemo">Demo</div>
            <div class="btn2" @click="start(2)">JOGUE</div>
          </div>
        </div>
      </div>
    </div>
  </van-overlay>
</template>
<script setup lang="ts">
import { ref, watch, computed, inject } from "vue";
import { getImage } from "@/utils";
import { useRouter } from "vue-router";
import { useGameStore } from "@/stores/modules/game";
import { toast } from "@/utils/toast";
import socketApi from "@/socket/socketApi";
import { useUserStore } from "@/stores/modules/user";
import storage, { actions } from "@/utils/storage";
import emitter from "@/utils/eventBus";
import http from "@/https";
const socket: any = inject("socket");
const gameStore = useGameStore();
const userStore = useUserStore();
const router = useRouter();
const modelWidth = ref(false);
const modelValue = ref(false);
const loading = ref(false);
const showDemo = computed(() => {
  if (!userStore.userInfo) {
    return true;
  } else {
    return (
      gameStore.gameInfo.canDemoPayLimit &&
      userStore.userInfo.totalPay < gameStore.gameInfo.canDemoPayLimit
    );
  }
});
const goBack = () => {
  localStorage.removeItem("game");
  modelValue.value = false;
};
const open = () => {
  modelValue.value = true;
};
const heartSrc = computed(() => {
  if (!userStore.userInfo) {
    return "base/heart.png";
  } else {
    if (userStore.userInfo.collectionGameIds) {
      let collectionGameIds: Array<any> =
        userStore.userInfo.collectionGameIds || [];
      let game = collectionGameIds.filter(
        (item: any) => item === gameStore.gameInfo.gameId
      );
      if (game.length > 0) {
        return "base/heart2.png";
      } else {
        return "base/heart.png";
      }
    } else {
      return "base/heart.png";
    }
  }
});
const collectGame = async () => {
  if (!storage.getStorage(actions.USER_TOEKN)) {
    modelValue.value = false;
    router.replace("/login");
    return;
  }
  loading.value = true;
  let res: any;
  let collectionGameIds: Array<any> =
    userStore.userInfo.collectionGameIds || [];
  let game = collectionGameIds.filter(
    (item: any) => item === gameStore.gameInfo.gameId
  );
  if (game.length > 0) {
    // 已收藏
    res = await http.uncollectGame({ gameId: gameStore.gameInfo.gameId });
  } else {
    // 未收藏
    res = await http.collectGame({ gameId: gameStore.gameInfo.gameId });
  }
  if (res.code !== 0) {
    toast(res.txt);
    loading.value = false;
    return;
  }
  userStore.getUserInfo();
  setTimeout(() => {
    loading.value = false;
  }, 2000);
};
emitter.on("openGameDetail", open);
const start = async (type: any) => {
  // 1 试玩  2 正式
  if (!storage.getStorage(actions.USER_TOEKN)) {
    modelValue.value = false;
    router.replace("/login");
    return;
  }
  let obj: any;

  if (type === 1) {
    obj = {
      gameId: gameStore.gameInfo.gameId,
      isDemo: true,
    };
  } else if (type === 2) {
    // 加入历史记录列表
    let gameIds = storage.getStorage(actions.COLLECT_GAME_IDS)
      ? JSON.parse(storage.getStorage(actions.COLLECT_GAME_IDS) || "")
      : [];
    gameIds.push(gameStore.gameInfo.gameId);
    storage.setStorage(
      actions.COLLECT_GAME_IDS,
      JSON.stringify(Array.from(new Set(gameIds)))
    );
    obj = {
      gameId: gameStore.gameInfo.gameId,
    };
  }
  const res: ResultData = await http.getGameUrl(obj);
  if (res.code === 1027 || res.code === 1046 || res.code === 1047) {
    //游戏在线 从新链接
    if (navigator.userAgent.search("Windows") != -1 && res.data.y) {
      modelWidth.value = true;
    }
    socket.disconnectMsg();
    gameStore.setStartGameInfo(res.data);
    modelValue.value = false;
    return;
  }
  if (res.code !== 0) {
    toast(res.txt);
    return;
  }
  // web 端打开第三方 修改画布 大小
  if (navigator.userAgent.search("Windows") != -1 && res.data.y) {
    modelWidth.value = true;
  }
  socket.disconnectMsg();
  gameStore.setStartGameInfo(res.data);
  modelValue.value = false;
};
watch(
  () => modelValue.value,
  () => {
    const dome = document.body;
    if (modelValue.value && dome) {
      dome.style.overflow = "hidden";
    } else if (!modelValue.value && dome) {
      dome.style.overflow = "auto";
    }
  }
);
</script>
<style lang="scss" scoped>
.overlay {
  position: relative;
  height: 100%;
}
.overlay-body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0;
  height: 4.8rem;
  // animation: animationChange 0.5s linear;
  .details-box {
    width: 96%;
    position: relative;
    background-color: #1c1c1c;
    padding: 0.4rem 2%;
    .btnBox {
      width: 65%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 1rem;
      right: 0;
    }
    .btn1,
    .btn2 {
      width: 35%;
      padding: 0.2rem 0.3rem;
      font-size: 0.4rem;
      font-weight: 800;
      border-radius: 0.1rem;
      text-align: center;
      cursor: pointer;
    }
    .btn2 {
      background: #268c71;
    }
    .btn1 {
      background: #3a3a3a;
    }
    .close {
      position: absolute;
      right: 0.2rem;
      top: 0.2rem;
    }
    .flex-sb {
      align-items: flex-start;
      .game-icon {
        width: 30%;
        min-height: 4rem;
        border-radius: $border-radius;
        box-shadow: 0px 0px 0.1rem 3px rgba($color: #0e0d0d, $alpha: 0.8);
      }
      .game-title {
        width: 65%;
        text-align: left;
        font-size: 0.4rem;
        color: #fff;
        font-weight: 600;
        padding: 0.5rem 0;
        display: flex;
        justify-content: left;
        align-items: center;
        > .gameName {
          width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
@keyframes animationChange {
  0% {
    bottom: -4.8rem;
  }
  50% {
    bottom: -2.4rem;
  }
  100% {
    bottom: 0;
  }
}
</style>
