<template>
  <view class="project-card bg-white rounded-card p-4 mb-3 clickable" @click="onClick">
    <view class="flex justify-between items-start mb-2">
      <view class="flex-1 min-w-0 mr-2">
        <text class="project-name text-sm font-semibold text-gray-800 truncate">{{ project.name }}</text>
      </view>
      <StatusTag type="project" :status="project.status" />
    </view>

    <view class="gap-y-1 mb-3">
      <view class="text-xs text-gray-500 flex items-center">
        <text class="mr-1">客</text>
        <text class="truncate">{{ project.customerName }} {{ project.customerPhone }}</text>
      </view>
      <view class="text-xs text-gray-500 flex items-center">
        <text class="mr-1">地</text>
        <text class="truncate">{{ project.address }}</text>
      </view>
      <view class="text-xs text-gray-500 flex items-center">
        <text class="mr-1">类</text>
        <text>{{ getProjectTypeText(project.type) }}</text>
      </view>
    </view>

    <view class="flex justify-between items-center pt-3 border-t border-gray-100">
      <view class="flex gap-2">
        <text class="text-xs text-gray-400">{{ project.servicePoints.length }} 个服务点</text>
        <text class="text-xs text-gray-400">{{ project.contacts.length }} 位联系人</text>
      </view>
      <text class="text-xs text-gray-400">{{ formatDate(project.createTime, 'YYYY-MM-DD') }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { Project } from '@/types'
import StatusTag from '../common/StatusTag.vue'
import { formatDate, getProjectTypeText } from '@/utils'

const props = defineProps<{
  project: Project
}>()

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

function onClick() {
  emit('click', props.project.id)
}
</script>

<style scoped>
.project-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.project-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
</style>
