<template>
  <div class="custom-card">
    <!-- Card 的内容，包含 Grid 展示四个图片 -->
    <div class="card-header">
      <!-- 左侧文字 -->
      <div class="card-title">热门服务</div>

      <!-- 右侧文字 -->
      <router-link to="/found" class="card-more">更多</router-link>
    </div>
 
   
    <van-card  
      v-for="(item, index) in items"  @click="goToDetailPage"
      :key="index"
      :num="item.num"
      :price="item.price"
      :desc="item.desc"
      :title="item.title"
      :thumb="item.thumb"
    >
      <template #tags>
        <van-tag
          v-for="(tag, tagIndex) in item.tags"
          :key="tagIndex"
          plain
          type="primary"
        >
          {{ tag }}
        </van-tag>
      </template>
      <template #footer>
        <van-button
          v-for="(button, buttonIndex) in item.buttons"
          :key="buttonIndex"
          size="mini"
        >
          {{ button }}
        </van-button>
      </template>
    </van-card>
 <br>
 <br>
   




  </div>
</template>

<script  setup>
import s1Image from "@/assets/ser/service1.jpg";
import s2Image from "@/assets/ser/service2.jpg";
import s3Image from "@/assets/ser/service3.jpg";
import { useRouter } from 'vue-router';

const router = useRouter();
const items= [
        {
          num: "1",
          price: "3.00",
          desc: "早15午20晚上20",
          title: "上门送餐（早中晚）",
          thumb: s3Image,
          tags: ["武汉市幸福养老服务中心"],
          buttons: ["订购", "收藏"],
        },
        {
          num: "2",
          price: "2.00",
          desc: "描述信息1",
          title: "商品标题1",
          thumb: s1Image,
          tags: ["标签1", "标签2"],
          buttons: ["按钮1", "按钮2"],
        },
        {
          num: "3",
          price: "3.00",
          desc: "描述信息2",
          title: "商品标题2",
          thumb: s2Image,
          tags: ["标签3", "标签4"],
          buttons: ["按钮3", "按钮4"],
        },
        // 可以添加更多的商品信息对象
      ]
      
      const goToDetailPage = () => {
  // 导航到详情页面，并携带参数 机构ID
  router.push({ path: '/serviceDetail', query: { id: 123} });
};
</script>

<style scoped>
/* 卡片样式 */
.custom-card {
  border: 1px solid #ebedf0;
  border-radius: 8px;
  overflow: hidden;
  margin: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 卡片头部样式（推荐机构和更多并排） */
.card-header {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
}

/* 卡片标题样式 */
.card-title {
  font-size: 28px;
  font-weight: bold;
  padding: 10px;
}

/* 更多文字样式 */
.card-more {
  text-align: right;
  font-size: 28px;
  padding: 10px;
  color: #007aff;
}
</style>
