<template>
  <view class="room-card" :class="{ 'is-full': !isAvailable }" @tap="handleTap">
    <!-- 房源图片 -->
    <view class="room-image-wrap">
      <image
        class="room-cover"
        :src="room.coverImage || '/static/default-room.png'"
        mode="aspectFill"
      />

      <!-- 满房遮罩 -->
      <view v-if="!isAvailable" class="full-overlay">
        <view class="full-badge">
          <text class="full-text">已满房</text>
        </view>
      </view>

      <!-- 特价标签 -->
      <view v-if="room.isSpecial" class="special-badge">
        <text class="special-text">特价</text>
      </view>

      <!-- 推荐标签 -->
      <view v-if="room.isRecommend" class="recommend-badge">
        <text class="recommend-text">推荐</text>
      </view>
    </view>

    <!-- 房源信息 -->
    <view class="room-info">
      <text class="room-name">{{ room.name }}</text>

      <view class="room-meta">
        <text v-if="room.address" class="room-address">{{ room.address }}</text>
      </view>

      <!-- 标签列表 -->
      <tag-list
        v-if="tags.length > 0"
        :tags="tags"
        type="primary"
        size="small"
        :scrollable="false"
        :limit="3"
      ></tag-list>

      <!-- 底部信息 -->
      <view class="room-bottom">
        <!-- 评分 -->
        <rating-stars
          v-if="room.rating"
          :score="room.rating"
          :count="room.reviewCount"
          size="small"
          :show-score="true"
          :show-stars="true"
        ></rating-stars>

        <!-- 价格和预订按钮 -->
        <view class="room-price-row">
          <price-tag
            :price="room.price"
            :original-price="room.originalPrice"
            unit="/晚"
            size="large"
            type="primary"
          ></price-tag>

          <view
            class="book-btn"
            :class="{ 'disabled': !isAvailable }"
            @tap.stop="handleBook"
          >
            <text class="book-text">订</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import PriceTag from './business/PriceTag.vue'
import RatingStars from './business/RatingStars.vue'
import TagList from './business/TagList.vue'

interface Room {
  id: number
  name: string
  coverImage?: string
  type?: string
  bedType?: string
  price: number
  originalPrice?: number
  rating?: number
  reviewCount?: number
  address?: string
  isAvailable?: boolean
  isSpecial?: boolean
  isRecommend?: boolean
  facilities?: string[]
}

const props = defineProps<{
  room: Room
}>()

const emit = defineEmits<{
  (e: 'tap'): void
  (e: 'book'): void
}>()

const isAvailable = computed(() => props.room.isAvailable !== false)

const typeLabels: Record<string, string> = {
  hotel: '酒店',
  homestay: '民宿',
  apartment: '公寓',
  hostel: '青旅'
}

// 标签列表
const tags = computed(() => {
  const result: string[] = []
  if (props.room.type) {
    result.push(typeLabels[props.room.type] || props.room.type)
  }
  if (props.room.bedType) {
    result.push(props.room.bedType)
  }
  if (props.room.facilities && props.room.facilities.length > 0) {
    result.push(...props.room.facilities.slice(0, 2))
  }
  return result
})

function handleTap() {
  emit('tap')
}

function handleBook() {
  if (!isAvailable.value) return
  emit('book')
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.room-card {
  display: flex;
  position: relative;
  background: $bg-card;
  border-radius: $radius-md;
  margin-bottom: $spacing-lg;
  overflow: hidden;
  box-shadow: $shadow-sm;
  transition: $transition-all;

  &:active {
    transform: scale(0.98);
    box-shadow: $shadow-xs;
  }
}

.room-card.is-full {
  opacity: 0.85;
}

/* ========== 房源图片 ========== */
.room-image-wrap {
  position: relative;
  width: 240rpx;
  height: 220rpx;
  flex-shrink: 0;
}

.room-cover {
  width: 100%;
  height: 100%;
  background: $bg-page;
}

/* 满房遮罩 */
.full-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  @include flex-center;
}

.full-badge {
  background: rgba($error-color, 0.95);
  padding: 8rpx 16rpx;
  border-radius: $radius-sm;
}

.full-text {
  font-size: $font-sm;
  color: $text-inverse;
  font-weight: $font-medium;
}

/* 特价标签 */
.special-badge {
  position: absolute;
  top: $spacing-sm;
  left: $spacing-sm;
  background: $gradient-warm;
  padding: 4rpx 12rpx;
  border-radius: $radius-xs;
  box-shadow: $shadow-sm;
}

.special-text {
  font-size: $font-xs;
  color: $text-inverse;
  font-weight: $font-semibold;
}

/* 推荐标签 */
.recommend-badge {
  position: absolute;
  top: $spacing-sm;
  right: $spacing-sm;
  background: $gradient-secondary;
  padding: 4rpx 12rpx;
  border-radius: $radius-xs;
  box-shadow: $shadow-sm;
}

.recommend-text {
  font-size: $font-xs;
  color: $text-inverse;
  font-weight: $font-semibold;
}

/* ========== 房源信息 ========== */
.room-info {
  flex: 1;
  padding: $spacing-md $spacing-lg;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.room-name {
  font-size: $font-md;
  font-weight: $font-semibold;
  color: $text-primary;
  line-height: $line-height-tight;
  @include text-ellipsis-multi(2);
}

.room-meta {
  margin-top: 6rpx;
}

.room-address {
  font-size: $font-xs;
  color: $text-tertiary;
  @include text-ellipsis;
}

/* ========== 底部信息 ========== */
.room-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: $spacing-sm;
  gap: $spacing-sm;
}

/* 价格和预订 */
.room-price-row {
  display: flex;
  align-items: flex-end;
  gap: $spacing-md;
}

/* 预订按钮 */
.book-btn {
  background: $gradient-primary;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  @include flex-center;
  box-shadow: $shadow-primary;
  transition: $transition-all;

  &:active {
    transform: scale(0.9);
    box-shadow: $shadow-sm;
  }

  &.disabled {
    background: $gray-300;
    box-shadow: none;
  }
}

.book-text {
  font-size: $font-lg;
  font-weight: $font-bold;
  color: $text-inverse;
}
</style>
