nl-blogs/client/src/components/admin/InquiryDetailModal.vue

<template>
  <Teleport to="body">
    <div
      v-if="isOpen"
      class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
      @click.self="close"
    >
      <div class="bg-[#1a1a1a] border border-white/10 rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-hidden flex flex-col animate-reveal">
        <div class="p-4 border-b border-white/10 flex justify-between items-center shrink-0">
          <h3 class="text-lg font-serif italic text-white">咨询详情</h3>
          <button type="button" @click="close" class="text-white/50 hover:text-white p-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>

        <div v-if="inquiry" class="p-6 overflow-y-auto flex-1 space-y-4">
          <div class="admin-card p-5 space-y-4">
            <div class="flex items-start justify-between gap-3">
              <div>
                <p class="text-xs text-art-muted mb-1">姓名</p>
                <p class="text-white font-medium">{{ inquiry.name }}</p>
              </div>
              <span class="px-2 py-1 rounded text-xs shrink-0" :class="statusClass">{{ statusLabel }}</span>
            </div>

            <div>
              <p class="text-xs text-art-muted mb-1">公司 / 组织</p>
              <p class="text-white/90">{{ inquiry.company || '—' }}</p>
            </div>

            <div>
              <p class="text-xs text-art-muted mb-1">联系方式</p>
              <p class="text-xs text-art-muted mb-2">{{ contactMethodLabel }}</p>
              <div class="flex items-center gap-2 flex-wrap">
                <span class="text-white font-mono break-all">{{ inquiry.contactValue }}</span>
                <button
                  type="button"
                  class="admin-btn-secondary py-1 px-2 text-xs shrink-0"
                  @click="copyContact"
                >
                  复制
                </button>
              </div>
            </div>

            <div>
              <p class="text-xs text-art-muted mb-1">预估预算</p>
              <p class="text-white/90">{{ inquiry.budget || '—' }}</p>
            </div>

            <div>
              <p class="text-xs text-art-muted mb-1">需求描述</p>
              <p class="text-white/90 text-sm leading-relaxed whitespace-pre-wrap">{{ inquiry.description || '—' }}</p>
            </div>

            <div>
              <p class="text-xs text-art-muted mb-1">提交时间</p>
              <p class="text-white/70 text-sm">{{ formattedCreatedAt }}</p>
            </div>
          </div>
        </div>

        <div class="p-4 border-t border-white/10 flex justify-end gap-2 shrink-0 bg-white/[0.02]">
          <button type="button" class="admin-btn-secondary py-1.5 px-3 text-sm" @click="close">关闭</button>
          <button
            v-if="inquiry?.status === 0"
            type="button"
            class="admin-btn-secondary py-1.5 px-3 text-sm"
            @click="emitStatus(1)"
          >
            标记已读
          </button>
          <button
            v-if="inquiry?.status !== 2"
            type="button"
            class="admin-btn-primary py-1.5 px-3 text-sm"
            @click="emitStatus(2)"
          >
            标记已联系
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Inquiry } from '../../services/api'
import { useToast } from '../../composables/useToast'

const props = defineProps<{
  isOpen: boolean
  inquiry: Inquiry | null
}>()

const emit = defineEmits<{
  'update:isOpen': [value: boolean]
  'update-status': [status: number]
}>()

const toast = useToast()

const close = () => {
  emit('update:isOpen', false)
}

const contactMethodLabel = computed(() => {
  const map: Record<string, string> = {
    wechat: '微信',
    email: '邮箱',
    phone: '电话'
  }
  return map[props.inquiry?.contactMethod || ''] || props.inquiry?.contactMethod || '—'
})

const statusLabel = computed(() => {
  switch (props.inquiry?.status) {
    case 0: return '未读'
    case 1: return '已读'
    case 2: return '已联系'
    default: return '未知'
  }
})

const statusClass = computed(() => {
  switch (props.inquiry?.status) {
    case 0: return 'bg-red-500/20 text-red-400'
    case 1: return 'bg-blue-500/20 text-blue-400'
    case 2: return 'bg-green-500/20 text-green-400'
    default: return 'bg-gray-500/20 text-gray-400'
  }
})

const formattedCreatedAt = computed(() => {
  const raw = props.inquiry?.createdAt
  if (raw === undefined || raw === null || raw === '') return '—'
  const timestamp = typeof raw === 'number' ? raw : Number(raw)
  if (Number.isNaN(timestamp)) return '—'
  const ms = timestamp > 1e12 ? timestamp : timestamp * 1000
  return new Date(ms).toLocaleString()
})

const copyContact = async () => {
  const value = props.inquiry?.contactValue
  if (!value) return
  try {
    await navigator.clipboard.writeText(value)
    toast.success('已复制到剪贴板')
  } catch {
    toast.error('复制失败，请手动复制')
  }
}

const emitStatus = (status: number) => {
  emit('update-status', status)
}
</script>