<template>
    <div style="background: url('/images/Entertainment-bg.png'); background-size: cover; background-position: center;">
        <div class="entertainment-list" v-if="dzGames.length > 0">
            <div class="roll-ball-section" v-if="dzGames.length > 0">
                <div class="roll-ball-header">
                    <div class="header-left">
                        <img :src="iconDz" style="width: 20px; height: 20px;" />
                        <span class="roll-ball-title">{{ t("电子") }}</span>
                    </div>
                </div>
                <div class="lottery-games-scroll pc-scroll-view">
                    <div class="lottery-games-flex">
                        <div class="lottery-game-tabs" :class="tabIndex == index ? 'active' : ''"
                            v-for="(item, index) in dzGames" :key="index" @click="tabIndex = index">
                            <span class="lottery-game-tab">{{ item.name }}</span>
                        </div>
                    </div>
                </div>

                <div class="other-games-scroll pc-scroll-view">
                    <div class="other-games-flex">
                        <div class="other-game-item" v-for="(item, itemIndex) in dzGames[tabIndex].games"
                            :key="itemIndex" @click="goGame1(dzGames[tabIndex].platType, dzGameType, item.gameCode)">
                            <img :src="item.logo"
                                style="width: 140px; height: 140px; border-radius: 8px; object-fit: cover;" />
                        </div>
                    </div>
                </div>
            </div>

            <pcFooter :notBg="true" />
        </div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, computed, onUnmounted, onActivated } from "vue";
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from "vue-i18n";
import pcFooter from '@/businessComponents/pcFooter/index.vue'
import { getGameUrl, getDeomUrl, dzList } from "@/request/api.js";
import iconDz from '@/assets/images/Home/dz.png'
const { t, locale } = useI18n();

onMounted(() => {
    getDzList();
});
const dzGames = ref([])
const dzGameType = ref("")
const tabIndex = ref(0)
const getDzList = async () => {
    const res = await dzList();
    dzGames.value = res.data.list
    dzGameType.value = res.data.gameType
    console.log(res.data.list)
}
const goGame1 = (game, gameType, gameCode) => {
    let params = {
        platType: game,
        gameType: gameType,
        gameCode: gameCode
    }
    if (localStorage.getItem('youke_token')) {
        getDeomUrl(params).then(res => {
            console.log(res.data)
            window.location.href = res.data.url
        })
        // return ElMessage.warning(t('试玩账户不可进入'))
    } else {

        getGameUrl(params).then(res => {
            console.log(res.data)
            window.location.href = res.data.url
        })
    }
}
</script>
<style lang="scss" scoped>
$main-color: #f8b932;
$card-bg: #1e1e1e;
$border-color: #333;

.entertainment-list {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid transparent; // 替换为你原本的 border: 1px solid;
    box-sizing: border-box;
    padding: 20px 0;
}

/* ==================================
   核心网格布局 (CSS Grid 响应式)
   ================================== */
.game-grid {
    display: grid;
    /* 默认：大于 992px 时一行 3 个 */
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;

    /* 平板/小屏笔记本：一行 2 个 */
    @media screen and (max-width: 992px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* 手机端：一行 1 个 */
    @media screen and (max-width: 600px) {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ==================================
   卡片 UI 与悬浮交互
   ================================== */

.roll-ball-section {
    background-color: #212121;
    border-radius: 12px;
    margin-top: 15px;
    padding: 20px;
}

.roll-ball-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.roll-ball-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.more-roll-btn {
    cursor: pointer;
}

.more-text {
    font-size: 13px;
    color: #e0e0e0;
}

.lottery-games-scroll {
    margin-bottom: 12px;
}

.lottery-games-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 4px 0;
}

.lottery-game-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    cursor: pointer;
}

.lottery-game-tabs {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    cursor: pointer;
}

.lottery-game-tab {
    font-size: 12px;
    // color: #e0e0e0;
}

.active {
    color: #f8b932;
    background-color: rgba(248, 185, 50, 0.1);
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 6px;
}

.lottery-game-name {
    font-size: 12px;
    color: #e0e0e0;
}

.other-games-flex {
    display: flex;
    // flex-direction: row;
    // justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 4px;
}

.other-game-item {
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    cursor: pointer;
}
</style>