<template>
    <div class="custom-card">
      <!-- Card 的内容，包含 Grid 展示四个图片 -->
      <div class="card-header">
        <!-- 左侧文字 -->
        <div class="card-title">推荐机构</div>
  
        <!-- 右侧文字 -->
      <router-link to="/institution" class="card-more">更多</router-link>
      </div>
  
      <!-- Card 的内容，包含 Grid 展示四个图片 -->
      <div class="grid-container">
        <div v-for="(item, index) in gridItems" @click="goToDetailPage" :key="index" class="grid-item">
          <!-- 这里可以放置图片和文字 -->
          <img :src="item.image" alt="" class="grid-image" />
          <div class="grid-item-title">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
import { useRouter } from 'vue-router';
import y1Image from "@/assets/yanglao/y1.jpg";
import y2Image from "@/assets/yanglao/y2.jpg";
import y3Image from "@/assets/yanglao/y3.jpg";
import y4Image from "@/assets/yanglao/y4.jpg";

const router = useRouter();

const gridItems = [
  { id: 1, title: '武汉市黄陂区红叶养老院', image: y1Image },
  { id: 2, title: '武汉市黄陂区夕阳颐养院', image: y2Image },
  { id: 3, title: '武汉市黄陂区夕阳颐养院', image: y3Image },
  { id: 4, title: '武汉市黄陂区夕阳颐养院', image: y4Image },
];

const goToDetailPage = (id) => {
  // 导航到详情页面，并携带参数 机构ID
  router.push({ path: '/institutionDetail', 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;
}

/* 网格容器样式 */
.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
}

/* 网格项样式 */
.grid-item {
  width: calc(50% - 10px); /* 两列，考虑间距 */
  margin-bottom: 20px;
  padding: 10px;
  box-sizing: border-box;
}

/* 图片样式 */
.grid-image {
  width: 100%;
  height: 250px;
  border-radius: 8px;
}

/* 网格项标题样式 */
.grid-item-title {
  text-align: center;
  padding: 10px;
  font-size: 26px;
}
</style>