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

    <!-- ========== 2. 导航栏 ========== -->
    <view class="nav-bar">
      <!-- 返回按钮 -->
      <view class="nav-btn" @click="goBack">
        <text class="wlIcon wlIcon-fanhui1"></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>
        <!-- 输入框，placeholder-class 自定义占位文本样式 -->
        <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="section">
      <!-- 区域头部：标题 + 右侧操作按钮 -->
      <view class="section-header">
        <text class="section-title">最近的搜索</text>
        <text class="section-action" @click="clearAllSearches">全部清除</text>
      </view>

      <!-- 搜索历史标签列表 -->
      <view class="search-tags">
        <!-- 单个搜索标签，使用v-for循环渲染 -->
        <view class="tag" v-for="(item, index) in recentSearches" :key="item.id" @click="onTagClick(item)">
          <!-- 时钟图标 -->
          <text class="tag-icon"></text>
          <!-- 标签内容：酒店名称 + 地址 -->
          <view class="tag-content">
            <text class="tag-text">{{ item.name }}</text>
            <text class="tag-location">{{ item.location }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- ========== 5. 最近查看区域 ========== -->
    <view class="section">
      <!-- 区域头部 -->
      <view class="section-header">
        <text class="section-title">最近查看</text>
        <text class="section-action" @click="viewAllHotels">查看全部</text>
      </view>

      <!-- 酒店列表 -->
      <scroll-view class="hotel-scroll" scroll-y>
        <view class="hotel-list">
          <!-- 酒店卡片，使用v-for循环渲染 -->
          <view class="hotel-item" v-for="(hotel, index) in recentHotels" :key="hotel.id"
            @click="goToHotelDetail(hotel)">
            <!-- 左侧：酒店图片 -->
            <image class="hotel-image" :src="hotel.img" mode="aspectFill"></image>
            <!-- 右侧：酒店信息 -->
            <view class="hotel-info">
              <!-- 第一行：酒店名称 + 评分 -->
              <view class="hotel-top">
                <text class="hotel-name">{{ hotel.name }}</text>
                <view class="rating">
                  <text class="rating-star">⭐</text>
                  <text class="rating-score">{{ hotel.rating }}</text>
                </view>
              </view>
              <!-- 第二行：位置 -->
              <view class="hotel-location">
                <text class="loc-icon"></text>
                <text class="loc-text">{{ hotel.location }}</text>
              </view>
              <!-- 第三行：价格 -->
              <text class="hotel-price">{{ hotel.price }}元/晚</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HotelSearch',
  data() {
    return {
      // 最近搜索列表
      recentSearches: [
        {
          id: 1,
          name: '金沙度假村',
          location: '佛罗里达州克利尔沃特'
        },
        {
          id: 2,
          name: '水晶峰旅馆',
          location: '科罗拉多州阿斯彭'
        },
        {
          id: 3,
          name: '珊瑚湾度假村',
          location: '佛罗里达州迈阿密海滩'
        }
      ],
      // 最近查看的酒店列表
      recentHotels: [
        {
          id: 1,
          name: '神秘的棕榈',
          location: '加州棕榈泉',
          rating: 4.0,
          price: 230,
          img: '' // 后端接口就绪后替换为真实图片URL
        },
        {
          id: 2,
          name: '蓝宝石海湾酒店',
          location: '佛罗里达州基韦斯特',
          rating: 3.8,
          price: 290,
          img: ''
        },
        {
          id: 3,
          name: '极乐套房',
          location: '加利福尼亚州圣地亚哥',
          rating: 3.8,
          price: 320,
          img: ''
        }
      ]
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    // 跳转订单页面
    toOrder() {
      uni.navigateTo({ url: '/pages/order/order' })
    },
    // 清除所有搜索历史
    clearAllSearches() {
      uni.showToast({
        title: '已清除所有搜索记录',
        icon: 'success'
      })
    },
    // 查看全部酒店
    viewAllHotels() {
      uni.navigateTo({ url: '/pages/travel/hotel/hotel-list' })
    },
    // 点击搜索标签
    onTagClick(item) {
      console.log('点击搜索:', item.name)
    },
    // 点击酒店卡片，跳转详情
    goToHotelDetail(hotel) {
      console.log('跳转酒店详情:', hotel.name)
    }
  }
}
</script>

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

// 页面容器
.hotel-search {
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* ========== 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;
    }
  }

  // 导航标题
  .nav-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #222;
  }
}

/* ========== 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. 区块（最近搜索/最近查看） ========== */
.section {
  padding: 0 32rpx;
  margin-bottom: 32rpx;

  // 区块头部
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;

    .section-title {
      font-size: 34rpx;
      font-weight: bold;
      color: #222;
    }

    // 操作按钮（全部清除/查看全部）
    .section-action {
      font-size: 28rpx;
      color: #ff4757; // 红色
    }
  }
}

/* ========== 5. 最近搜索标签 ========== */
.search-tags {
  display: flex;
  flex-direction: column;

  .tag {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #eee; // 底部分割线

    &:last-child {
      border-bottom: none; // 最后一个去掉分割线
    }

    // 时钟图标
    .tag-icon {
      font-size: 36rpx;
      color: #999;
      margin-right: 20rpx;
    }

    // 标签内容
    .tag-content {
      flex: 1;
      display: flex;
      flex-direction: column;

      .tag-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #222;
        margin-bottom: 8rpx;
      }

      .tag-location {
        font-size: 26rpx;
        color: #999;
      }
    }
  }
}

/* ========== 6. 酒店列表 ========== */
.hotel-scroll {
  max-height: 800rpx; // 设置最大高度,超出部分可滚动
  overflow-y: auto;
}

.hotel-list {
  display: flex;
  flex-direction: column;

  .hotel-item {
    display: flex;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    // 酒店图片
    .hotel-image {
      width: 200rpx;
      height: 160rpx;
      border-radius: 16rpx;
      flex-shrink: 0; // 防止被压缩
      background-color: #e8e8e8; // 占位背景色
    }

    // 酒店信息
    .hotel-info {
      flex: 1;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      // 第一行：名称 + 评分
      .hotel-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

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

        // 评分
        .rating {
          display: flex;
          align-items: center;
          flex-shrink: 0;

          .rating-star {
            font-size: 28rpx;
            margin-right: 6rpx;
          }

          .rating-score {
            font-size: 30rpx;
            color: #222;
            font-weight: 500;
          }
        }
      }

      // 第二行：位置
      .hotel-location {
        display: flex;
        align-items: center;
        margin: 8rpx 0;

        .loc-icon {
          font-size: 24rpx;
          margin-right: 6rpx;
        }

        .loc-text {
          font-size: 26rpx;
          color: #999;
        }
      }

      // 第三行：价格
      .hotel-price {
        font-size: 34rpx;
        color: #0066ff; // 蓝色价格
        font-weight: bold;
      }
    }
  }
}
</style>