<script setup>
import { resolveImageUrl } from "@/utils/image";
import { formatSpotPrice } from "@/utils/spot";

defineProps({
  spot: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["click"]);

const handleClick = () => {
  emit("click");
};
</script>

<template>
  <view class="spot-card" @tap="handleClick">
    <image
      v-if="spot.cover_image_url"
      class="cover"
      :src="resolveImageUrl(spot.cover_image_url)"
      mode="aspectFill"
    />
    <view v-else class="cover cover-placeholder">
      <uni-icons type="camera" size="40" color="#94a3b8" class="placeholder-icon" />
    </view>
    <view class="info">
      <text class="title">{{ spot.title }}</text>
      <view class="meta">
        <view class="city-tag">{{ spot.city || "未知城市" }}</view>
        <view
          class="price-tag"
          :class="{ free: formatSpotPrice(spot).isFree, paid: !formatSpotPrice(spot).isFree }"
        >
          {{ formatSpotPrice(spot).label }}
        </view>
      </view>
      <text class="desc" v-if="spot.description">
        {{ spot.description }}
      </text>
    </view>
  </view>
</template>

<style scoped>
.spot-card {
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  margin-bottom: 24rpx;
}

.cover {
  width: 100%;
  height: 320rpx;
}

.cover-placeholder {
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-icon {
  font-size: 80rpx;
}

.info {
  padding: 20rpx 24rpx 24rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1e293b;
  display: block;
  margin-bottom: 12rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-bottom: 12rpx;
}

.city-tag {
  font-size: 22rpx;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}

.price-tag {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}

.price-tag.free {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
}

.price-tag.paid {
  color: #d97706;
  background: rgba(245, 158, 11, 0.14);
}

.desc {
  font-size: 26rpx;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
</style>
