<template>
  <view class="category-grid">
    <view
      v-for="item in list"
      :key="item.id"
      class="category-item"
      @click="handleClick(item)"
    >
      <view class="icon-wrapper">
        <text class="icon" :class="item.icon"></text>
      </view>
      <text class="name">{{ item.name }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { Category } from '@/typings/mall'

interface Props {
  list: Category[] // 分类列表
  columns?: number // 列数
}

const props = withDefaults(defineProps<Props>(), {
  columns: 4,
})

const emit = defineEmits<{
  click: [item: Category]
}>()

function handleClick(item: Category) {
  emit('click', item)
  // 跳转到分类页面
  // 注意：因为分类页面是 tabBar 页面，需要使用 switchTab 而不是 navigateTo
  uni.switchTab({
    url: `/pages/sort/index`,
    success: () => {
      // 跳转成功后，通过全局事件通知分类页面选中指定分类
      uni.$emit('selectCategory', item.id)
    }
  })
}
</script>

<style lang="scss" scoped>
.category-grid {
  display: grid;
  grid-template-columns: repeat(v-bind(columns), 1fr);
  gap: 24rpx;
  padding: 24rpx;
  background: #fff;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.icon-wrapper {
  width: 96rpx;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);

  .icon {
    font-size: 48rpx;
    color: #fff;
  }
}

.name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}
</style>
