<route lang="json5">
{
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '%tabbar.category%',
  },
}
</route>
<template>
  <view
    style="height: 100vh; border-top: 2rpx solid #f2f2f2"
    class="flex justify-between box-border"
  >
    <view class="w-183rpx box-border h-full overflow-auto bg-[#F2F2F2] pb-144rpx">
      <view
        v-for="(i, idx) in 30"
        :key="i"
        @click="handleSelectItem(idx, [])"
        :class="`relative w-full   box-border p-32rpx h-[108rpx] text-28rpx ${idx === categoryIndex ? ' text-[#FF4C1B] bg-white font-600' : 'bg-[#F2F2F2] font-400'}`"
      >
        <view class="truncate">7{{ i }}Luggage</view>

        <view
          v-if="idx === categoryIndex"
          class="absolute top-1/2 left-0 -translate-y-1/2 w-6rpx h-28rpx bg-[#FF4C1B] rounded-full"
        ></view>
        <image
          v-if="idx === categoryIndex && categoryIndex != 0"
          class="absolute right-0 -top-18rpx w-18rpx z-20 h-18rpx object-cover"
          src="@/static/images/category/suffix.svg"
          mode="widthFix"
          alt=""
        />
        <image
          v-if="idx === categoryIndex"
          class="absolute right-0 -bottom-18rpx z-20 w-18rpx h-18rpx object-cover"
          src="@/static/images/category/prefix.svg"
          mode="widthFix"
          alt=""
        />
      </view>
    </view>

    <view style="width: calc(100vw - 183rpx)" class="box-border px-32rpx pt-24rpx overflow-auto">
      <view
        class="flex justify-start h-72rpx items-center box-border px-24rpx rounded-full border-2rpx border-solid border2 mb-32rpx"
      >
        <image class="w-32rpx h-32rpx object-cover" :src="search" mode="widthFix" alt="" />

        <text class="ml-20rpx text-28rpx text-[#999]">{{ t('category.search') }}</text>
      </view>

      <view
        style="height: calc(100vh - 72rpx - 24rpx - 32rpx - 144rpx)"
        class="category-list box-border w-full flex"
      >
        <view
          v-for="(item, index) in 50"
          :key="index"
          @click="goToDlite('1')"
          class="bg-white w-full"
        >
          <view class="w-110rpx h-110rpx mx-auto mb-16rpx">
            <image
              class="w-full"
              src="https://t.xiaoyaotravel.com/image/TourImComplait/messageContent/7ce4d7df18b1416d866483d55fd91ceb.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="line-clamp-1 overflow-hidden">Women's sports shoes</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { t } from '@/locale'
  import search from '@/static/images/category/search.svg'
  const { safeAreaInsets } = uni.getSystemInfoSync()
  type childrenObj = {
    name: string
    imageUrl: string
  }
  const categoryIndex = ref(0)
  const categoryChildrenList = ref([])

  function handleSelectItem(idx: number, children: Array<childrenObj>) {
    categoryIndex.value = idx
    categoryChildrenList.value = children
  }

  function goToDlite(uid: string | number) {
    uni.navigateTo({
      url: `/pages/product/details?id=${uid}`,
    })
  }

  onLoad(() => {
    console.log('分类')
    console.log(safeAreaInsets, 'safeAreaInsets')
  })

  onMounted(() => {})
</script>
<style lang="scss" scoped>
  .category-list {
    display: grid;
    grid-template-rows: repeat(auto-fill, minmax(192rpx, 1fr)); /* 自动填充行，每行高度为 192rpx */
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row; /* 确保项目会填充所有的网格单元 */
    grid-gap: 24rpx 32rpx;
  }
  /* 添加额外的空白行 */
  .category-list::after {
    grid-column: 1 / -1;
    height: 144rpx; /* 额外的空行高度 */
    content: '';
  }

  .border2 {
    border-color: $shop-bg-line;
  }
</style>
