<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    data: {
      name: string
      url: string
      icon: string
      iconPath: string
      count: string
    }[]
    perRow?: number
    bigSpace?: boolean
  }>(),
  {
    data: () => [],
    perRow: 4,
    bigSpace: false,
  },
)
</script>
<template>
  <view class="block">
    <slot name="header"></slot>
    <view class="section">
      <view
        class="section-item"
        v-for="(item, index) in props.data"
        :key="index"
        hover-class="none"
        :class="[
          { 'no-padding-bottom': index === props.data.length - 1 },
          props.perRow > 4 ? 'quintet' : '',
          props.bigSpace ? 'big-space' : '',
        ]"
      >
        <uni-badge :text="item.count" absolute="rightTop">
          <navigator
            v-if="item.iconPath"
            :url="item.url"
            hover-class="none"
            class="navigator icon-container"
            :class="props.perRow > 4 ? 'quintet' : ''"
          >
            <!-- #ifdef WEB -->
            <img :src="`.${item.iconPath}`" alt="icon" style="width: 60rpx; height: 60rpx" />
            <!-- #endif -->

            <!-- #ifdef MP-WEIXIN -->
            <img :src="`${item.iconPath}`" alt="icon" style="width: 60rpx; height: 60rpx" />
            <!-- #endif -->
          </navigator>
          <navigator
            v-else
            :url="item.url"
            hover-class="none"
            class="navigator icon-container"
            :class="[item.icon, props.perRow > 4 ? 'quintet' : '']"
          />
        </uni-badge>
        <view class="section-item-text">{{ item.name }}</view>
      </view>
      <slot name="footer"></slot>
    </view>
  </view>
</template>
<style lang="scss">
.block {
  position: relative;
  z-index: 99;
  padding: 10rpx;
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

  .section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 30rpx;
    padding-bottom: 20rpx;

    .navigator {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #333;
      &::before {
        display: block;
        font-size: 60rpx;
        color: #ff9545;
      }

      .icon-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60rpx;
        height: 60rpx;
      }

      .icon {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        font-size: 60rpx;
        width: 60rpx;
        height: 60rpx;
        color: #ff9545;
      }
    }

    &-item {
      flex-basis: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .section-item-text {
        padding-top: 10rpx;
        font-size: 28rpx;
      }
    }

    .quintet {
      flex-basis: 20%;
    }

    .big-space {
      padding-bottom: 40rpx;

      &:nth-last-child(-n + 4) {
        padding-bottom: 20rpx;
      }
    }
  }
}
</style>
