<template>
  <view class="game-category" @click="handleClick">
    <view class="category-icon" :style="{ background: getCategoryGradient(category.color) }">
      <text class="icon-text">{{ category.icon }}</text>

      <!-- 霓虹光圈 -->
      <view class="glow-ring" :style="{ borderColor: category.color }"></view>
    </view>

    <view class="category-name">{{ category.name }}</view>

    <view v-if="category.hot" class="hot-badge">
      <text class="hot-text">HOT</text>
    </view>

    <view v-if="showCount" class="service-count">
      {{ category.serviceCount }}
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  category: {
    type: Object,
    required: true
  },
  showCount: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click', props.category)
}

const getCategoryGradient = (color) => {
  return `linear-gradient(135deg, ${color}40 0%, ${color}20 100%)`
}
</script>

<style lang="scss" scoped>
.game-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 20rpx;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
  }
}

.category-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  position: relative;
  border: 1px solid rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;
}

.game-category:active .category-icon {
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow:
    0 0 20rpx rgba(0, 255, 255, 0.4),
    0 0 40rpx rgba(0, 255, 255, 0.2);
}

.icon-text {
  font-size: 56rpx;
  position: relative;
  z-index: 2;
}

.glow-ring {
  position: absolute;
  top: -4rpx;
  left: -4rpx;
  right: -4rpx;
  bottom: -4rpx;
  border: 2px solid;
  border-radius: 26rpx;
  opacity: 0;
  transition: all 0.3s ease;
}

.game-category:active .glow-ring {
  opacity: 0.6;
  animation: glow 1.5s infinite;
}

@keyframes glow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.3;
  }
}

.category-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  margin-bottom: 8rpx;
}

.hot-badge {
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  padding: 4rpx 12rpx;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 71, 71, 0.9) 100%);
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.4);
}

.hot-text {
  font-size: 20rpx;
  font-weight: bold;
  color: #ffffff;
}

.service-count {
  font-size: 22rpx;
  color: #7a7e9d;
}
</style>
