<script setup lang="ts">
import { computed } from 'vue'
import { fullUrl } from '@/utils/common'
import type { categoryPanelItem } from '@/types/home'
import { pageUrl } from '@/utils/constants'

const props = defineProps<{
  list: categoryPanelItem[]
}>()

const change = (event: UniHelper.UniGridOnChangeEvent) => {
  uni.setStorageSync('activeCategoryIndex', event.detail.index)
  uni.navigateTo({
    url: pageUrl['shopping-mall-category'],
  })
}
const groupedCategoryList = computed(() => {
  if (!props.list) return []
  const chunkSize = 5
  const groups = []
  for (let i = 0; i < props.list.length; i += chunkSize) {
    groups.push(props.list.slice(i, i + chunkSize))
  }
  return groups
})
</script>

<template>
  <swiper class="swiper" :indicator-dots="true" v-if="props.list.length > 0">
    <swiper-item v-for="(group, groupIndex) in groupedCategoryList" :key="groupIndex">
      <uni-grid :column="5" :highlight="true" @change="change" :showBorder="false" :square="false">
        <uni-grid-item v-for="(item, index) in group" :index="index" :key="index">
          <view class="grid-item-box">
            <image :src="fullUrl(item.icon)" class="image" mode="aspectFill" />
            <text class="text">{{ item.name }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </swiper-item>
  </swiper>
</template>

<style lang="scss" scoped>
.swiper {
  background-color: white;
}

.image {
  width: 75rpx;
  height: 75rpx;
  margin-top: 10rpx;
}

.text {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.grid-dynamic-box {
  margin-bottom: 10rpx;
}

.grid-item-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
}

.grid-item-box-row {
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
}

.grid-dot {
  position: absolute;
  top: 5rpx;
  right: 15rpx;
}

.swiper {
  height: 190rpx;
  margin-top: 15rpx;
}
</style>
