<template>
  <div class="my-reports-container">
    <div class="page-header">
      <h2>我的评估报告</h2>
      <div class="header-desc">查看您的心理健康评估报告</div>
    </div>

    <div v-if="data.loading" class="loading-container">
      <el-skeleton style="width: 100%" animated :rows="5" />
    </div>

    <div v-else>
      <el-empty v-if="data.reports.length === 0" description="暂无评估报告"></el-empty>

      <div v-else class="reports-list">
        <el-card v-for="report in data.reports" :key="report.id" class="report-card" :body-style="{ padding: '0px' }">
          <div class="report-card-header" :class="{ 'unread': report.status === '未读' }">
            <div class="report-period-label">
              <el-tag :type="report.reportPeriod === '周报' ? 'success' : 'primary'" size="small">
                {{ report.reportPeriod }}
              </el-tag>
              <el-tag v-if="report.status === '未读'" type="danger" size="small" class="status-tag">未读</el-tag>
            </div>
            <div class="report-date">
              {{ formatDate(report.startDate) }} 至 {{ formatDate(report.endDate) }}
            </div>
          </div>

          <div class="report-card-body">
            <div class="report-title">
              {{ report.reportPeriod === '周报' ? '每周' : '每月' }}心理健康评估报告
            </div>
            <div class="report-summary">
              {{ truncateSummary(report.summary) }}
            </div>
            <div class="report-meta">
              <div class="report-time">生成于 {{ formatDateTime(report.createTime) }}</div>
              <div class="report-has-comment" v-if="report.doctorComment">
                <el-icon><ChatDotRound /></el-icon> 包含医生批注
              </div>
            </div>
          </div>

          <div class="report-card-actions">
            <el-button type="primary" plain @click="viewReport(report.id)">查看详情</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { ChatDotRound } from '@element-plus/icons-vue';

const router = useRouter();
const currentUser = JSON.parse(localStorage.getItem('xm-user') || '{}');

const data = reactive({
  reports: [],
  loading: true
});

// 格式化日期
const formatDate = (dateStr) => {
  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 formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '';
  const date = new Date(dateTimeStr);
  return `${formatDate(dateTimeStr)} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

// 截断摘要文本
const truncateSummary = (text) => {
  if (!text) return '';
  return text.length > 100 ? text.substring(0, 100) + '...' : text;
};

// 查看报告详情
const viewReport = (reportId) => {
  router.push(`/manager/reportDetail/${reportId}`);
};

// 获取我的评估报告列表
const getMyReports = async () => {
  data.loading = true;
  try {
    const res = await request.get(`/assessmentReport/patient/${currentUser.id}`);
    if (res.code === '200') {
      data.reports = res.data || [];
    } else {
      ElMessage.error(res.msg || '获取评估报告失败');
    }
  } catch (error) {
    console.error('获取评估报告失败:', error);
    ElMessage.error('获取评估报告失败');
  } finally {
    data.loading = false;
  }
};

// 页面加载时获取报告列表
onMounted(() => {
  getMyReports();
});
</script>

<style scoped>
.my-reports-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #303133;
}

.header-desc {
  color: #909399;
  font-size: 14px;
}

.loading-container {
  padding: 20px;
}

.reports-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.report-card {
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.report-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.report-card-header {
  background-color: #f5f7fa;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-card-header.unread {
  background-color: #ecf5ff;
}

.report-period-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-tag {
  margin-left: 8px;
}

.report-date {
  font-size: 13px;
  color: #606266;
}

.report-card-body {
  padding: 15px;
  flex-grow: 1;
}

.report-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.report-summary {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.report-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.report-has-comment {
  display: flex;
  align-items: center;
  color: #E6A23C;
}

.report-has-comment .el-icon {
  margin-right: 4px;
}

.report-card-actions {
  padding: 10px 15px;
  border-top: 1px solid #EBEEF5;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .reports-list {
    grid-template-columns: 1fr;
  }
}
</style>