<template>
  <div class="customer-reports">
    <h1 class="page-title">诊断报告</h1>
    
    <!-- 报告列表 -->
    <div v-if="reports.length > 0" class="report-list">
      <div v-for="report in reports" :key="report.id" class="report-card" @click="showDetail(report)">
        <div class="report-header">
          <div class="pet-info">
            <div class="pet-avatar">{{ getPetName(report.petId)?.[0] || '🐾' }}</div>
            <div class="pet-name">{{ getPetName(report.petId) }}</div>
          </div>
          <span class="report-date">{{ formatDate(report.createTime) }}</span>
        </div>
        <div class="report-body">
          <h3>{{ report.title || '诊断报告' }}</h3>
          <p class="type">类型：{{ report.type || '常规检查' }}</p>
          <p class="summary" v-if="report.summary">{{ report.summary }}</p>
        </div>
        <div class="report-footer">
          <span class="view-detail">查看详情 →</span>
        </div>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div v-else class="empty-state">
      <div class="empty-icon">📋</div>
      <p>暂无诊断报告</p>
      <p class="tip">诊断完成后，医生会为您生成报告</p>
    </div>
    
    <!-- 报告详情弹窗 -->
    <t-dialog v-model:visible="detailVisible" :header="selectedReport?.title || '诊断报告详情'" width="600">
      <div class="report-detail" v-if="selectedReport">
        <div class="detail-header">
          <div class="detail-pet">
            <div class="pet-avatar">{{ getPetName(selectedReport.petId)?.[0] || '🐾' }}</div>
            <div class="pet-info">
              <div class="name">{{ getPetName(selectedReport.petId) }}</div>
              <div class="date">{{ formatDate(selectedReport.createTime) }}</div>
            </div>
          </div>
          <div class="detail-type">{{ selectedReport.type || '常规检查' }}</div>
        </div>
        <div class="detail-content">
          <div class="content-section" v-if="selectedReport.summary">
            <h4>诊断摘要</h4>
            <p>{{ selectedReport.summary }}</p>
          </div>
          <div class="content-section" v-if="selectedReport.content">
            <h4>详细内容</h4>
            <p class="full-content">{{ selectedReport.content }}</p>
          </div>
          <div class="content-section" v-if="!selectedReport.summary && !selectedReport.content">
            <p class="no-content">暂无详细内容</p>
          </div>
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { api } from '../../api';

const reports = ref<any[]>([]);
const pets = ref<any[]>([]);
const detailVisible = ref(false);
const selectedReport = ref<any>(null);

const loadData = async () => {
  try {
    const [reportRes, petRes] = await Promise.all([
      api.reports({ page: 1, size: 50 }),
      api.pets({ page: 1, size: 100 })
    ]);
    
    if (reportRes.code === 0) {
      reports.value = reportRes.data?.records || [];
    }
    if (petRes.code === 0) {
      pets.value = petRes.data?.records || [];
    }
  } catch (error) {
    console.error('加载失败:', error);
  }
};

const getPetName = (petId: number) => {
  const pet = pets.value.find(p => p.id === petId);
  return pet?.name;
};

const formatDate = (dateStr: string) => {
  if (!dateStr) return '-';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

const showDetail = (report: any) => {
  selectedReport.value = report;
  detailVisible.value = true;
};

onMounted(() => {
  loadData();
});
</script>

<style scoped>
.customer-reports {
  padding-bottom: 40px;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 32px;
}

/* 报告列表 */
.report-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.report-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.report-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.report-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pet-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pet-avatar {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
  font-weight: 600;
}

.pet-name {
  color: white;
  font-weight: 600;
  font-size: 15px;
}

.report-date {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

.report-body {
  padding: 20px;
}

.report-body h3 {
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.report-body .type {
  font-size: 13px;
  color: #0d9488;
  font-weight: 500;
  margin-bottom: 8px;
}

.report-body .summary {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.report-footer {
  padding: 12px 20px;
  border-top: 1px solid #f3f4f6;
}

.view-detail {
  font-size: 14px;
  color: #0d9488;
  font-weight: 500;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 16px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 8px;
}

.empty-state .tip {
  font-size: 14px;
  color: #9ca3af;
}

/* 报告详情 */
.report-detail {
  padding: 8px 0;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.detail-pet {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-pet .pet-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  font-size: 20px;
}

.detail-pet .name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.detail-pet .date {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}

.detail-type {
  padding: 4px 12px;
  background: #f3f4f6;
  border-radius: 20px;
  font-size: 13px;
  color: #4b5563;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.content-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
}

.content-section p {
  font-size: 15px;
  line-height: 1.8;
  color: #4b5563;
}

.content-section .full-content {
  white-space: pre-wrap;
}

.no-content {
  text-align: center;
  color: #9ca3af;
  padding: 40px 0;
}

/* 响应式 */
@media (max-width: 640px) {
  .report-list {
    grid-template-columns: 1fr;
  }
}
</style>
