<template>
  <view class="service-grid">
    <view class="grid-container">
      <view
        v-for="(service, index) in props.list"
        :key="index"
        class="service-item"
        @click="handleServiceClick(service)"
      >
        <view class="service-icon flex-row align-center justify-center">
          <image
            :src="service.img"
            mode="aspectFit"
            :class="getIconClass(1)"
          ></image>
        </view>
        <text class="service-title">{{ service.name }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { pageUrl } from '@/utils/constants'
import type { menuItem } from '@/types/home'
interface ServiceItem {
  title: string
  iconPath: string
  route?: string
  floor?: number
}
//接收组件值
const props = withDefaults(
  defineProps<{
    list: menuItem[]
  }>(),
  {
    
  },
)


const handleServiceClick = (service: ServiceItem) => {
  if (service.url && service.url != "#") {
    uni.navigateTo({
      url: service.url,
    })
  }
}

const getIconClass = (floor: number | undefined) => {
  return floor === 1 ? 'icon-size-1' : floor === 2 ? 'icon-size-2' : 'icon-size-3'
}
</script>

<style lang="scss" scoped>
.service-grid {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40rpx;
  }

  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rpx;
    cursor: pointer;
    transition: transform 0.2s ease;

    .service-icon {
      .icon-size-1 {
        width: 80rpx;
        height: 80rpx;
      }
      .icon-size-2 {
        width: 50rpx;
        height: 50rpx;
      }
      .icon-size-3 {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .service-title {
      font-size: 24rpx;
      color: #333;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
