<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.img" :url="item.url" hover-class="none" class="navigator icon-container"
            :class="props.perRow > 4 ? 'quintet' : ''">
            <image :src="item.img" alt="icon" style="width: 50rpx; height: 50rpx" />
          </navigator>
        </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;

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

      .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 {
        width: 100%;
        flex-basis: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;

        .section-item-text {
          width: 100rpx;
          text-align: center;
          padding-top: 10rpx;
          font-size: 24rpx;
          color: #333;
          white-space: nowrap;
          /* 强制文字不换行 */
          overflow: hidden;
          /* 超出容器部分隐藏 */
          text-overflow: ellipsis;
          /* 溢出部分显示省略号 */

        }
      }

      .quintet {
        flex-basis: 20%;
      }

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

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