<template>
  <van-nav-bar
    title="服务详情"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />

  <div class="organization-detail">
    <!-- 图片展示 -->
    <img class="organization-image" :src="organization.image" alt="Organization Image" />

    <!-- 养老院标题 -->
    <h1 class="organization-title">{{ organization.name }}</h1>

    <!-- 机构性质信息 -->
    <div class="organization-info">{{ organization.type }}</div>

    <!-- 地址信息 -->
    <div class="organization-address">
      <van-icon name="location-o" class="address-icon" />
      <span class="address-text">{{ organization.address }}</span>
    </div>

    <!-- 房间类型 -->
    <div class="room-types">
      <span v-for="(roomType, index) in organization.roomTypes" :key="index" class="room-type">{{ roomType }}</span>
    </div>

    <!-- 空状态图片 -->
    <img class="empty-state" src="../../assets/logo.png" alt="Empty State Image" />

    <!-- 温馨提示 -->
    <div class="tip-panel">
      <h2 class="tip-panel-title">温馨提示</h2>
      <ul class="tip-list">
        <li v-for="(tip, index) in organization.tips" :key="index" class="tip-item">{{ tip }}</li>
      </ul>
    </div>

    <!-- 预约按钮 -->
    <van-button class="reservation-button" type="primary" round>立即预约</van-button>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router';
  import lun1 from '../../assets/fuwu/s1.png'
  import s1Image from "@/assets/ser/service2.jpg"

  const onClickLeft = () => history.back();

  const router = useRouter();
  console.log(router.currentRoute.value.query.id);

  const organization = {
    image: s1Image,
    name: "一日三餐",
    type: "机构性质信息",
    address: "详细地址",
    roomTypes: ["单人间", "双人间", "套房"],
    tips: ["温馨提示1", "温馨提示2", "温馨提示3"]
  };
</script>

<style scoped>
  .organization-detail {
    padding: 20px;
  }

  .organization-image {
    width: 100%;
    max-height: 300px; /* 设置最大高度 */
    object-fit: cover; /* 图片等比缩放 */
    border-radius: 8px;
    margin-bottom: 10px;
  }

  .organization-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 8px;
  }

  .organization-info {
    color: #999;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .organization-address {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
  }

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

  .room-types {
    margin-bottom: 20px;
  }

  .room-type {
    display: inline-block;
    background-color: #f0f0f0;
    color: #333;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .empty-state {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .tip-panel {
    margin-bottom: 20px;
  }

  .tip-panel-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .tip-list {
    padding-left: 20px;
  }

  .tip-item {
    color: #666;
    font-size: 14px;
    margin-bottom: 6px;
  }

  .reservation-button {
    width: 100%;
    border-radius: 8px;
  }
</style>
