<script setup lang="ts">
import { pcHomeRecommendedApi } from '~/server/homeApi'

const { data: recommendedList, pending: listLoading } = await useAsyncData(async () => pcHomeRecommendedApi())
</script>

<template>
  <div v-for="item in recommendedList" :key="item.id" class="wrapper_1200 merchantIndex mb-50px">
    <div v-if="item.productList.length">
      <div class="mb-30px text-28px text-#333 ml-20px title font-700 alimama">{{ item.name }}</div>
      <div class="grid-container">
        <a v-if="item.linkUrl" :href="item.linkUrl" target="_blank">
          <el-image :src="item.imageUrl" class="w-471px h-340px b-rd-16px item"></el-image>
        </a>
        <el-image v-else :src="item.imageUrl" class="w-471px h-340px b-rd-16px item"></el-image>
        <div v-for="items in item.productList" :key="items.id" class="cursors">
          <product :item="items"></product>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 -8px;
  :deep(.content) {
    height: 112px !important;
  }
}
.item {
  margin: 7.5px;
}

:deep(.productItem) {
  margin: 7.5px;
}
:deep(.products-name) {
  line-height: 16px !important;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 17px !important;
}
</style>
