<template>
    <!-- <nut-navbar title="Title" left-show @click-back="onClick"></nut-navbar> -->
    <van-nav-bar
  title="机构列表"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>

<van-search v-model="value" placeholder="请输入搜索关键词" />

<!-- 
<van-field
  v-model="fieldValue"
  readonly
  label="选择城市"
  placeholder="亲 请输入选择的城市呐"
  @click="showPicker = true"
  :clearable="true" 
  :right-icon="''" 
/>
<van-popup v-model:show="showPicker" round position="bottom">
  <van-picker
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup> -->


 <!--下拉选项-->
 <van-dropdown-menu active-color="#ee0a24">
     <van-dropdown-item v-model="value1" :options="option1" />
     <van-dropdown-item v-model="value2" :options="option2" />
     <van-dropdown-item v-model="value3" :options="option3" />
     <van-dropdown-item v-model="value4" :options="option4" />
     <!-- <van-dropdown-item v-model="value5" :options="option5" /> -->
   </van-dropdown-menu>



  <div>
    <div class="custom-card" v-for="(item, index) in items" :key="index" @click="goToDetailPage(item)">
      <div class="card-content">
        <!-- 图片展示 -->
        <img :src="item.image" alt="图片" class="card-image" />

        <!-- 图片标题 -->
        <div class="card-title">{{ item.title }}</div>

        <!-- 详细描述 -->
        <div class="card-description">{{ item.description }}</div>

        <!-- 右侧小字 -->
        <div class="card-footer">人气 {{ item.popularity }}</div>

        <!-- 位置显示 -->
        <div class="card-location">
          <van-icon name="location-o" />
          <span>{{ item.location }}</span>
        </div>
      </div>
    </div>
  </div>



</template>


  <script setup>
  import { ref,onBeforeMount,defineProps } from 'vue';
  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 onClickLeft = () => history.back();

  const goToDetailPage = () => {
  // 导航到详情页面，并携带参数 机构ID
  router.push({ path: '/institutionDetail', query: { id: 123} });
};

  const columns = [
      { text: '杭州', value: 'Hangzhou' },
      { text: '宁波', value: 'Ningbo' },
      { text: '温州', value: 'Wenzhou' },
      { text: '绍兴', value: 'Shaoxing' },
      { text: '湖州', value: 'Huzhou' },
    ];
    const fieldValue = ref('');
    const showPicker = ref(false);

    const onConfirm = ({ selectedOptions }) => {
      showPicker.value = false;
      fieldValue.value = selectedOptions[0].text;
    };



     
    const value1 = ref(0);
     const value2 = ref('a');
     const value3 = ref('a');
     const value4 = ref('a');
     const value5 = ref('a')
     const option1 = [
       { text: '距离优先', value: 0 },
       { text: '低价优先', value: 1 },
       { text: '高价优先', value: 2 },
     ];
     const option2 = [
       { text: '机构类型', value: 'a' },
       { text: '养老机构', value: 'b' },
       { text: '养老公寓', value: 'c' },
       { text: '医疗服务机构', value: 'd' },
       { text: '养老服务', value: 'e' },
       { text: '日间照料', value: 'f' },
     ];
     const option3 = [
       { text: '区县选择', value: 'a' },
       { text: '江岸区', value: 'b' },
       { text: '江汉区', value: 'c' },
     ];
     const option4 = [
       { text: '机构特色', value: 'a' },
       { text: '环境优美', value: 'b' },
       { text: '设施齐全', value: 'c' },
     ];
     const option5 = [
       { text: '收住对象', value: 'a' },
       { text: '自理型护理', value: 'b' },
       { text: '半自理护理', value: 'c' },
     ];

     const items=[
        {
          title: '武汉市黄陂区红叶养老院',
          description: '详细描述1',
          popularity: 73,
          location: '详细位置1',
          image: y1Image,
        },
        {
          title: '武汉市黄陂区红叶养老院',
          description: '详细描述2',
          popularity: 85,
          location: '详细位置2',
          image: y2Image,
        },
        // 可以添加更多的卡片数据对象
      ]

  </script>
  
  
  <style scoped>
  /* 自定义样式 */
  .custom-card {
  border: 1px solid #ebedf0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  margin-left: 7px;
  margin-right: 7px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-content {
  position: relative;
  background: linear-gradient(45deg, #ff6d6d, #ff51b5);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-top: 12px;
}

.card-description {
  font-size: 16px;
  color: #fff;
  margin-top: 8px;
}

.card-footer {
  font-size: 14px;
  color: #fff;
  margin-top: 12px;
}

.card-location {
  display: flex;
  align-items: center;
  color: #fff;
  margin-top: 12px;
}

.location-icon {
  font-size: 16px;
  margin-right: 5px;
}

.location-text {
  font-size: 14px;
}
  </style>