<template>
  <view class="hotel-list-page">
    <!-- ========== 1. 顶部状态栏占位 ========== -->
    <!-- 自定义导航栏，需要预留状态栏位置（适配刘海屏） -->
    <view class="status-bar"></view>

    <!-- ========== 2. 导航栏 ========== -->
    <view class="nav-bar">
      <!-- 返回按钮 -->
      <view class="nav-btn" @click="goBack">
        <text class="nav-icon">‹</text>
      </view>
      <!-- 中间标题 -->
      <text class="nav-title"></text>
      <!-- 右侧订单按钮 -->
      <view class="nav-btn" @click="toOrder">
        <text class="order-icon">📋</text>
        <text class="order-text">订单</text>
      </view>
    </view>

    <!-- ========== 3. 搜索框 ========== -->
    <view class="search-container">
      <view class="search-box">
        <!-- 搜索图标 -->
        <text class="search-icon"></text>
        <!-- 搜索输入框 -->
        <input class="search-input" type="text" placeholder="搜索.." placeholder-class="placeholder" />
        <!-- 右侧筛选按钮 -->
        <view class="filter-btn">
          <text class="filter-icon">⚙</text>
        </view>
      </view>
    </view>

    <!-- ========== 4. 分类筛选标签 ========== -->
    <view class="filter-tabs">
      <!-- 所有 - 默认激活（蓝色背景） -->
      <view class="filter-tab active" @click="switchFilter('所有')">
        <text>所有</text>
      </view>
      <!-- 别墅 -->
      <view class="filter-tab" @click="switchFilter('别墅')">
        <text class="tab-icon">🏠</text>
        <text>别墅</text>
      </view>
      <!-- 酒店 -->
      <view class="filter-tab" @click="switchFilter('酒店')">
        <text class="tab-icon">🏨</text>
        <text>酒店</text>
      </view>
      <!-- 民宿 -->
      <view class="filter-tab" @click="switchFilter('民宿')">
        <text class="tab-icon">🏢</text>
        <text>民宿</text>
      </view>
    </view>

    <!-- ========== 5. 酒店列表 ========== -->
    <scroll-view class="hotel-scroll" scroll-y>
      <view class="hotel-list">
        <!-- 酒店卡片，使用v-for循环渲染 -->
        <view class="hotel-card" v-for="(hotel, index) in hotelList" :key="hotel.id" @click="goToHotelDetail(hotel)">
          <!-- 酒店图片区域（全宽） -->
          <view class="hotel-image-wrapper">
            <!-- 图片占位（后端接口就绪后替换为真实图片） -->
            <image class="hotel-image" :src="hotel.img" mode="aspectFill"></image>
            
            <!-- 评分徽章（左上角） -->
            <view class="rating-badge">
              <text class="rating-star">⭐</text>
              <text class="rating-score">{{ hotel.rating }}</text>
            </view>
            
            <!-- 收藏按钮（右上角） -->
            <view class="collect-btn" @click.stop="toggleCollect(hotel)">
              <text class="heart-icon">{{ hotel.collect ? '❤️' : '🤍' }}</text>
            </view>
          </view>

          <!-- 酒店信息区域（图片下方） -->
          <view class="hotel-info">
            <!-- 第一行：酒店名称 + 价格 -->
            <view class="info-row">
              <text class="hotel-name">{{ hotel.name }}</text>
              <view class="price-group">
                <text class="price-symbol">￥</text>
                <text class="price-number">{{ hotel.price }}</text>
              </view>
            </view>

            <!-- 第二行：位置 -->
            <text class="hotel-location">{{ hotel.location }}</text>

            <!-- 第三行：每晚标识（右对齐） -->
            <text class="price-per-night">每晚</text>

            <!-- 第四行：房间设施信息 -->
            <view class="hotel-amenities">
              <text class="amenity-icon">🛏</text>
              <text class="amenity-item">{{ hotel.beds }}</text>
              <text class="amenity-divider">·</text>
              <text class="amenity-icon">🛁</text>
              <text class="amenity-item">{{ hotel.bathrooms }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'HotelList',
  data() {
    return {
      // 当前选中的分类标签（默认"所有"）
      currentFilter: '所有',
      // 酒店列表数据（实际项目中从接口获取）
      hotelList: [
        {
          id: 1,
          name: '蓝宝石海湾酒店',
          location: '佛罗里达州基韦斯特',
          rating: 4.9,
          price: 290,
          beds: '3张床',
          bathrooms: '3浴室',
          img: '', // 后端接口就绪后替换为真实图片URL
          collect: true // 是否已收藏
        },
        {
          id: 2,
          name: '微风山酒店',
          location: '加州棕榈泉',
          rating: 4.9,
          price: 180,
          beds: '两张床',
          bathrooms: '3浴室',
          img: '',
          collect: false
        }
      ]
    }
  },
  methods: {
    // 切换分类筛选
    switchFilter(filter) {
      this.currentFilter = filter
      console.log('切换到分类:', filter)
    },
    // 点击酒店卡片，跳转到详情页
    goToHotelDetail(hotel) {
      console.log('跳转酒店详情:', hotel.name)
    },
    // 切换收藏状态
    toggleCollect(hotel) {
      hotel.collect = !hotel.collect
    },
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    // 跳转订单页面
    toOrder() {
      uni.navigateTo({ url: '/pages/order/order' })
    }
  }
}
</script>

<style lang="scss" scoped>
// 全局样式
page {
  background-color: #f5f7fa; // 页面背景色（浅灰蓝）
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 页面容器
.hotel-list-page {
  min-height: 100vh;
}

/* ========== 1. 状态栏 ========== */
.status-bar {
  height: 88rpx; // 状态栏高度（适配刘海屏）
  background-color: #f5f7fa;
}

/* ========== 2. 导航栏 ========== */
.nav-bar {
  display: flex;
  justify-content: space-between; // 左右两端对齐
  align-items: center; // 垂直居中
  padding: 20rpx 32rpx;
  background-color: #f5f7fa;

  // 导航按钮（返回/订单）
  .nav-btn {
    width: 72rpx;
    height: 72rpx;
    background: #fff;
    border-radius: 16rpx; // 白色圆角按钮
    display: flex;
    align-items: center;
    justify-content: center;

    .nav-icon {
      font-size: 40rpx;
      color: #333;
    }

    .order-icon {
      font-size: 28rpx;
    }

    .order-text {
      font-size: 20rpx;
      color: #333;
    }
  }
}

/* ========== 3. 搜索框 ========== */
.search-container {
  padding: 16rpx 32rpx 24rpx;

  .search-box {
    display: flex;
    align-items: center;
    padding: 20rpx 24rpx;
    background-color: #fff; // 白色背景
    border-radius: 40rpx; // 胶囊形状
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06); // 轻微阴影

    // 搜索图标
    .search-icon {
      font-size: 32rpx;
      color: #999;
      margin-right: 12rpx;
    }

    // 输入框
    .search-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }

    // 占位文本样式
    .placeholder {
      color: #bbb;
    }

    // 右侧筛选按钮
    .filter-btn {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1rpx solid #eee; // 左侧分割线
      margin-left: 12rpx;
      padding-left: 12rpx;

      .filter-icon {
        font-size: 32rpx;
        color: #666;
      }
    }
  }
}

/* ========== 4. 分类筛选标签 ========== */
.filter-tabs {
  display: flex;
  padding: 0 32rpx 24rpx;
  gap: 16rpx; // 标签间距

  .filter-tab {
    padding: 16rpx 32rpx;
    border-radius: 12rpx;
    background-color: #fff; // 默认白色背景
    font-size: 28rpx;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8rpx;

    .tab-icon {
      font-size: 28rpx;
    }

    // 激活状态（蓝色背景）
    &.active {
      background-color: #0066ff; // 蓝色背景
      color: #fff; // 白色文字
      font-weight: 600;
    }
  }
}

/* ========== 5. 酒店列表滚动区域 ========== */
.hotel-scroll {
  padding: 0 32rpx;
  max-height: calc(100vh - 300rpx); // 动态计算最大高度
}

.hotel-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx; // 卡片间距
  padding-bottom: 40rpx;
}

/* 酒店卡片 */
.hotel-card {
  background-color: #fff;
  border-radius: 20rpx; // 大圆角
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  // 图片区域（全宽）
  .hotel-image-wrapper {
    width: 100%;
    height: 400rpx; // 图片高度
    position: relative; // 相对定位，用于徽章定位

    .hotel-image {
      width: 100%;
      height: 100%;
      background-color: #e8e8e8; // 占位背景色
    }

    // 评分徽章（左上角）
    .rating-badge {
      position: absolute;
      top: 20rpx;
      left: 20rpx;
      background-color: rgba(0, 0, 0, 0.6); // 半透明黑色
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      gap: 6rpx;

      .rating-star {
        font-size: 24rpx;
      }

      .rating-score {
        font-size: 26rpx;
        color: #fff;
        font-weight: 600;
      }
    }

    // 收藏按钮（右上角）
    .collect-btn {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      width: 64rpx;
      height: 64rpx;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      .heart-icon {
        font-size: 32rpx;
      }
    }
  }

  // 信息区域（图片下方）
  .hotel-info {
    padding: 24rpx;

    // 第一行：名称 + 价格
    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12rpx;

      .hotel-name {
        font-size: 34rpx;
        font-weight: bold;
        color: #222;
        flex: 1;
      }

      // 价格组
      .price-group {
        display: flex;
        align-items: baseline;
        flex-shrink: 0;

        .price-symbol {
          font-size: 28rpx;
          color: #0066ff; // 蓝色
          font-weight: 600;
        }

        .price-number {
          font-size: 40rpx;
          color: #0066ff; // 蓝色
          font-weight: bold;
        }
      }
    }

    // 位置信息
    .hotel-location {
      font-size: 26rpx;
      color: #999;
      margin-bottom: 16rpx;
    }

    // 每晚标识（右对齐）
    .price-per-night {
      font-size: 24rpx;
      color: #999;
      text-align: right;
      margin-bottom: 16rpx;
    }

    // 房间设施信息
    .hotel-amenities {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #666;

      .amenity-icon {
        font-size: 28rpx;
        margin-right: 6rpx;
      }

      .amenity-divider {
        margin: 0 12rpx;
        color: #ccc;
      }
    }
  }
}
</style>