<template>
  <view class="card" @tap="handleClick">
    <view class="card-image">
      <image
        :src="merchant.coverImage || '/static/default-merchant.png'"
        class="img"
        mode="aspectFill"
      />
      <view v-if="merchant.promotion" class="badge-promo">{{ merchant.promotion }}</view>
    </view>

    <view class="card-info">
      <view class="info-top">
        <text class="name">{{ merchant.name }}</text>
      </view>

      <view v-if="merchant.rating" class="info-rating">
        <text class="star">★</text>
        <text class="score">{{ merchant.rating.toFixed(1) }}</text>
        <text class="reviews">({{ merchant.reviewCount || 0 }})</text>
        <text v-if="merchant.salesCount" class="dot">·</text>
        <text v-if="merchant.salesCount" class="sales">已售{{ formatSales(merchant.salesCount) }}</text>
      </view>

      <view v-if="merchant.city || merchant.district" class="info-location">
        <text class="location-text">{{ getAddressShort() }}</text>
      </view>

      <view v-if="merchant.facilities && merchant.facilities.length > 0" class="info-tags">
        <text
          v-for="(item, i) in merchant.facilities.slice(0, 3)"
          :key="i"
          class="tag"
        >
          {{ item }}
        </text>
      </view>

      <view class="info-bottom">
        <view class="price-box">
          <text class="currency">¥</text>
          <text class="amount">{{ merchant.minPrice }}</text>
          <text class="unit">/晚</text>
        </view>
        <text v-if="merchant.distance" class="distance">{{ formatDistance(merchant.distance) }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
interface Merchant {
  id: number
  name: string
  coverImage?: string
  type?: string
  rating?: number
  reviewCount?: number
  facilities?: string[]
  minPrice: number
  originalPrice?: number
  distance?: number
  nearbyLandmark?: string
  hasVideo?: boolean
  recentPurchase?: string
  promotion?: string
  city?: string
  district?: string
  province?: string
  salesCount?: number
  [key: string]: any
}

const props = defineProps<{
  merchant: Merchant
}>()

const emit = defineEmits<{
  (e: 'click', merchant: Merchant): void
}>()

const formatDistance = (distance: number): string => {
  if (distance < 1000) {
    return `${Math.round(distance)}m`
  }
  return `${(distance / 1000).toFixed(1)}km`
}

const getAddressShort = (): string => {
  const parts = []
  if (props.merchant.city) parts.push(props.merchant.city)
  if (props.merchant.district) parts.push(props.merchant.district)
  return parts.join('')
}

const formatSales = (count: number): string => {
  if (count >= 10000) {
    return `${(count / 10000).toFixed(1)}万`
  }
  if (count >= 1000) {
    return `${(count / 1000).toFixed(1)}k`
  }
  return String(count)
}

const handleClick = () => {
  emit('click', props.merchant)
}
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:active {
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  }
}

.card-image {
  position: relative;
  width: 260rpx;
  height: 200rpx;
  flex-shrink: 0;
  background: #f0f0f0;

  .img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .badge-promo {
    position: absolute;
    top: 12rpx;
    left: 12rpx;
    padding: 6rpx 12rpx;
    background: #e74c3c;
    border-radius: 8rpx;
    font-size: 22rpx;
    font-weight: 600;
    color: #fff;
    line-height: 1;
  }
}

.card-info {
  flex: 1;
  padding: 16rpx 16rpx 14rpx;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.info-top {
  margin-bottom: 8rpx;

  .name {
    font-size: 32rpx;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.info-rating {
  display: flex;
  align-items: center;
  gap: 4rpx;
  margin-bottom: 10rpx;

  .star {
    font-size: 24rpx;
    color: #fbbf24;
    line-height: 1;
  }

  .score {
    font-size: 24rpx;
    font-weight: 600;
    color: #222;
    line-height: 1;
  }

  .reviews {
    font-size: 22rpx;
    color: #999;
    line-height: 1;
  }

  .dot {
    margin: 0 4rpx;
    font-size: 22rpx;
    color: #ddd;
    line-height: 1;
  }

  .sales {
    font-size: 22rpx;
    color: #999;
    line-height: 1;
  }
}

.info-location {
  margin-bottom: 10rpx;

  .location-text {
    font-size: 24rpx;
    color: #666;
    line-height: 1.3;
  }
}

.info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 12rpx;

  .tag {
    padding: 6rpx 12rpx;
    font-size: 22rpx;
    color: #555;
    background: #f5f5f5;
    border-radius: 6rpx;
    line-height: 1;
  }
}

.info-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;

  .price-box {
    display: flex;
    align-items: baseline;

    .currency {
      font-size: 26rpx;
      font-weight: 600;
      color: #222;
      line-height: 1;
    }

    .amount {
      font-size: 42rpx;
      font-weight: 700;
      color: #222;
      line-height: 1;
      margin: 0 2rpx;
    }

    .unit {
      font-size: 24rpx;
      color: #666;
      line-height: 1;
    }
  }

  .distance {
    font-size: 22rpx;
    color: #999;
    line-height: 1;
  }
}
</style>
