<template>
  <div class="pc-entertainment-list">
    <div v-if="type == 1 && hotList.length > 0" class="section-container">
      <div class="game-grid">
        <div
            class="game-card"
            v-for="(game, index) in hotList"
            :key="'hot-' + index"
            @click="goToGame(game.route)"
        >
          <div class="image-wrapper">
            <el-image :src="getImagePath(game.imgName)" fit="cover" class="game-cover"></el-image>

            <div class="text-overlay-bottom">
              <div class="game-name">{{ game.name }}</div>
            </div>

            <div class="hover-overlay">
              <div class="play-btn">
                <el-icon color="#000" :size="20" class="mr-1"><CaretRight /></el-icon>
                <span>{{ t('立即进入') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else-if="type == 2 && lotteryList.length > 0" class="section-container">
      <div class="game-grid">
        <div
            class="game-card"
            v-for="(game, index) in lotteryList"
            :key="'lottery-' + index"
            @click="goToGame(game.route)"
        >
          <div class="image-wrapper">
            <el-image :src="getImagePath(game.imgName)" fit="cover" class="game-cover"></el-image>

            <div class="text-overlay-bottom">
              <div class="game-name">{{ game.name }}</div>
            </div>

            <div class="hover-overlay">
              <div class="play-btn">
                <el-icon color="#000" :size="20" class="mr-1"><CaretRight /></el-icon>
                <span>{{ t('立即进入') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template v-else>
      <div v-if="hotList.length > 0" class="section-container">
        <div class="section-header">
          <span class="section-title">{{ t('热门') }}</span>
          <div v-if="showMore" class="more-btn" @click="handleMore(1)">
            <span>{{ t('查看更多') }} &gt;&gt;</span>
          </div>
        </div>
        <div class="game-grid">
          <div
              class="game-card"
              v-for="(game, index) in hotList"
              :key="'hot-' + index"
              @click="goToGame(game.route)"
          >
            <div class="image-wrapper">
              <el-image :src="getImagePath(game.imgName)" fit="cover" class="game-cover"></el-image>

              <div class="text-overlay-bottom">
                <div class="game-name">{{ game.name }}</div>
              </div>

              <div class="hover-overlay">
                <div class="play-btn">
                  <el-icon color="#000" :size="20" class="mr-1"><CaretRight /></el-icon>
                  <span>{{ t('立即进入') }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="lotteryList.length > 0" class="section-container">
        <div class="section-header">
          <span class="section-title">{{ t('彩票') }}</span>
          <div v-if="showMore" class="more-btn" @click="handleMore(2)">
            <span>{{ t('查看更多') }} &gt;&gt;</span>
          </div>
        </div>
        <div class="game-grid">
          <div
              class="game-card"
              v-for="(game, index) in lotteryList"
              :key="'lottery-' + index"
              @click="goToGame(game.route)"
          >
            <div class="image-wrapper">
              <el-image :src="getImagePath(game.imgName)" fit="cover" class="game-cover"></el-image>

              <div class="text-overlay-bottom">
                <div class="game-name">{{ game.name }}</div>
              </div>

              <div class="hover-overlay">
                <div class="play-btn">
                  <el-icon color="#000" :size="20" class="mr-1"><CaretRight /></el-icon>
                  <span>{{ t('立即进入') }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { CaretRight } from '@element-plus/icons-vue';
import { gameConfig } from "@/request/api";

import jnd28Img from '@/assets/image/Entertainment/jnd28.png';
import js28Img from '@/assets/image/Entertainment/js28.png';
import amlhcImg from '@/assets/image/Entertainment/amlhc.png';
import xamlhcImg from '@/assets/image/Entertainment/xamlhc.png';
import jslhcImg from '@/assets/image/Entertainment/jslhc.png';
import xglhcImg from '@/assets/image/Entertainment/xglhc.png';
import jsscImg from '@/assets/image/Entertainment/jssc.png';
import jssscImg from '@/assets/image/Entertainment/jsssc.png';
import jsftImg from '@/assets/image/Entertainment/jsft.png';
import jsk3Img from '@/assets/image/Entertainment/jsk3.png';

const props = defineProps({
  showMore: {
    type: Boolean,
    default: false
  },
  type: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['more']);

const { t } = useI18n();
const router = useRouter();

const apiGameList = ref([]);

const localMapping = {
  1: { imgName: jnd28Img, route: { name: 'Entertainment' } },
  2: { imgName: js28Img, route: { name: 'ExtremeSpeed28' } },
  3: { imgName: amlhcImg, route: { name: 'Digital' } },
  4: { imgName: xamlhcImg, route: { name: 'NewDigital' } },
  5: { imgName: jslhcImg, route: { name: 'SpeedDigital' } },
  6: { imgName: xglhcImg, route: { name: 'HKDigital' } },
  7: { imgName: jsscImg, route: { name: 'JisuGame', query: { type: 1, title: '极速赛车' } } },
  8: { imgName: jssscImg, route: { name: 'JisuGame', query: { type: 2, title: '极速时时彩' } } },
  9: { imgName: jsftImg, route: { name: 'JisuGame', query: { type: 3, title: '极速飞艇' } } },
  10: { imgName: jssscImg, route: { name: 'JisuGame', query: { type: 4, title: 'SG时时彩' } } },
  11: { imgName: jsftImg, route: { name: 'JisuGame', query: { type: 5, title: 'SG飞艇' } } },
  12: { imgName: jsk3Img, route: { name: 'JisuGame', query: { type: 7, title: 'SG快3' } } },
  13: { imgName: jsk3Img, route: { name: 'JisuGame', query: { type: 6, title: '极速快3' } } },
};

const fetchGameConfig = async () => {
  try {
    const res = await gameConfig();
    if (res && res.code === 1 && Array.isArray(res.data)) {
      apiGameList.value = res.data;
    }
  } catch (error) {
    console.error('获取游戏配置失败:', error);
  }
};

onMounted(() => {
  fetchGameConfig();
});

const processedList = computed(() => {
  return apiGameList.value.map(item => {
    const mapping = localMapping[item.type] || { imgName: jsftImg, route: null };
    return {
      ...item,
      imgName: mapping.imgName,
      route: mapping.route
    };
  });
});

const hotList = computed(() => {
  const list = processedList.value
      .filter(item => item.is_rec === 1)
      .sort((a, b) => (a.sort || 0) - (b.sort || 0));

  return props.showMore && props.type === 0 ? list.slice(0, 3) : list;
});

const lotteryList = computed(() => {
  const list = processedList.value
      .filter(item => item.is_rec !== 1)
      .sort((a, b) => (a.sort || 0) - (b.sort || 0));

  return props.showMore ? list.slice(0, 6) : processedList.value.sort((a, b) => (a.sort || 0) - (b.sort || 0));
});

const getImagePath = (imgModule) => {
  return imgModule;
};

const goToGame = (routeObj) => {
  if (routeObj) {
    router.push(routeObj);
  }
};

const handleMore = (type) => {
  router.push({ name: 'LotteryList', query: { type } });
  emit('more', type);
};
</script>

<style lang="scss" scoped>
$main-color: #f8b932;
$card-bg: #2d2d2d;

.pc-entertainment-list {
  box-sizing: border-box;
  padding: 0 10px;
}

.section-container {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10px;

  .section-title {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
  }

  .more-btn {
    font-size: 14px;
    color: #8e9cae;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;

    &:hover {
      color: $main-color;
    }
  }
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.game-card {
  background-color: $card-bg;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);

    .hover-overlay {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;

    .game-cover {
      width: 100%;
      height: 100%;
      display: block;
    }

    .text-overlay-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px 4px 6px 4px;
      text-align: center;
      z-index: 1;
      pointer-events: none;

      .game-name {
        font-size: 14px;
        font-weight: bold;
        color: #141414;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .hover-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 99;

      .play-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 14px;
        padding: 8px 16px;
        background-color: $main-color;
        border-radius: 20px;
        color: #000;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      }
    }
  }
}

.mr-1 {
  margin-right: 6px;
}
</style>