<template>
  <div class="tree-card" @click="$emit('click')">
    <div class="tree-cover" :style="tree.coverImage ? {} : { background: gradient }">
      <img v-if="tree.coverImage" :src="tree.coverImage" class="tree-img" />
      <template v-else>
        <span class="tree-emoji">{{ emoji }}</span>
        <span class="tree-label">{{ tree.name }}</span>
      </template>
    </div>
    <div class="tree-card-info">
      <h4 class="tree-name">{{ tree.name }}</h4>
      <p class="tree-address ellipsis">{{ tree.address }}</p>
      <div class="tree-meta">
        <span class="tree-distance">
          <van-tag :type="tree.isInRange ? 'success' : 'warning'" round size="medium">
            {{ tree.isInRange ? `可许愿 · ${formatDistance(tree.distance)}` : formatDistance(tree.distance) }}
          </van-tag>
        </span>
        <span class="tree-wish-count">💬 {{ tree.totalWishes }} 个愿望</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  tree: {
    id: number
    name: string
    coverImage: string
    address: string
    distance: number
    isInRange: boolean
    totalWishes: number
  }
}>()

defineEmits<{ click: [] }>()

import { getTreeGradient, getTreeEmoji } from '@/utils/theme'

const gradient = computed(() => getTreeGradient(props.tree.id))
const emoji = computed(() => getTreeEmoji(props.tree.id))

function formatDistance(m: number) {
  return m >= 1000 ? (m / 1000).toFixed(1) + 'km' : m + 'm'
}
</script>

<style scoped>
.tree-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 0.15s;
}
.tree-card:active {
  transform: scale(0.98);
}
.tree-cover {
  width: 100%;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.tree-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.tree-emoji {
  font-size: 40px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.tree-label {
  font-size: 12px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.tree-card-info {
  padding: 12px;
}
.tree-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.tree-address {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}
.tree-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tree-wish-count {
  font-size: 12px;
  color: #666;
}
</style>
