<template>
  <div class="related-apis">
    <h3 class="title">相关API</h3>
    <div
      class="api-item"
      v-for="api in apis"
      :key="api.id"
      @click="goToDetail(api.id)"
    >
      <img class="api-icon" :src="api.image" :alt="api.name" />
      <div class="api-info">
        <p class="api-title">{{ api.name }}</p>
        <p class="api-desc">{{ api.description }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const props = defineProps({
  apis: {
    type: Array,
    required: true,
  },
});

const goToDetail = (appId) => {
  router.push({ path: "/marketplace/ai/detail", query: { id: appId } });
};
</script>

<style scoped>
.related-apis {
  margin-top: 32px;
}
.title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}
.api-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  cursor: pointer;
  transition: all 0.2s;
  padding: 8px;
  border-radius: 8px;
}
.api-item:hover {
  background-color: #f5f5f5;
}
.api-icon {
  width: 50px;
  /* height: 40px; */
  border-radius: 8px;
  background: #f5f5f5;
  /* width: 64px; */
  height: auto;
  max-height: 50px;
}
.api-info {
  flex: 1;
}
.api-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.api-desc {
  font-size: 13px;
  color: #888;
  height: 48px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示两行 */
}
</style>
