<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.projectName }}</text>
        <text v-if="project.projectCode" class="text-xs text-gray-400 block mt-1">{{ project.projectCode }}</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">{{ addressText }}</text>
      </view>
      <view class="text-xs text-gray-500 flex items-center">
        <text class="mr-1">类</text>
        <text>{{ getCooperationTypeText(project.cooperationType) }}</text>
      </view>
    </view>

    <view class="flex justify-between items-center pt-3 border-t border-gray-100">
      <view class="flex gap-2 flex-wrap">
        <text
          v-for="ft in facilityList"
          :key="ft"
          class="px-2 py-1 bg-cyan-50 text-cyan-600 rounded text-xs"
        >{{ getFacilityTypeText(ft) }}</text>
        <text v-if="servicePointCount > 0" class="text-xs text-gray-400 self-center">{{ servicePointCount }} 个服务点</text>
      </view>
      <text class="text-xs text-gray-400">{{ formatDate(project.createTime || '', 'YYYY-MM-DD') }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { FacilityType, Project, ServicePoint } from '@/types'
import StatusTag from '../common/StatusTag.vue'
import {
  formatDate,
  getCooperationTypeText,
  getFacilityTypeText,
  parseJsonArray
} from '@/utils'

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

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

const facilityList = computed(() => parseJsonArray<FacilityType>(props.project.facilityTypes))
const servicePointCount = computed(() => parseJsonArray<ServicePoint>(props.project.servicePoints).length)

const addressText = computed(() => {
  const p = props.project
  if (p.address) return p.address
  return [p.province, p.city, p.district, p.street, p.detailAddress].filter(Boolean).join('') || '-'
})

function onClick() {
  emit('click', props.project.projectId)
}
</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>
