<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
// import { getAnnouncementDetail } from '@/api'
// import type { AnnouncementDetailResponse } from '@/api'

const route = useRoute();
const router = useRouter();

const loading = ref(false);
const announcementDetail = ref<any | null>(null);

// 获取公告详情
async function fetchAnnouncementDetail() {
  const id = route.params.id as string;
  if (!id)
    return;

  loading.value = true;
  try {
    // const res = await getAnnouncementDetail(id)
    // announcementDetail.value = res.data
  }
  catch (error) {
    console.error('获取公告详情失败:', error);
    ElMessage.error('获取公告详情失败');
  }
  finally {
    loading.value = false;
  }
}

// 返回上一页
function goBack() {
  router.back();
}

// 格式化时间
function formatDateTime(time?: string) {
  if (!time)
    return '-';
  const date = new Date(time);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
}

// 页面加载时获取详情
onMounted(() => {
  fetchAnnouncementDetail();
});
</script>

<template>
  <div class="announcement-detail-page">
    <el-card v-loading="loading" class="detail-card">
      <template #header>
        <div class="card-header">
          <el-button type="primary" link @click="goBack">
            <el-icon><i-ep-arrow-left /></el-icon>
            返回
          </el-button>
        </div>
      </template>

      <div v-if="announcementDetail" class="detail-content">
        <!-- 公告头部 -->
        <div class="detail-header">
          <h1 class="detail-title">
            <el-icon v-if="announcementDetail.isImportant" color="#f56c6c" class="important-icon">
              <i-ep-warning />
            </el-icon>
            {{ announcementDetail.title }}
          </h1>
          <div class="detail-meta">
            <el-tag
              v-if="announcementDetail.type === 'latest'"
              type="success"
              size="large"
            >
              最新公告
            </el-tag>
            <el-tag
              v-else
              type="info"
              size="large"
            >
              历史公告
            </el-tag>
            <span class="meta-item">
              <el-icon><i-ep-view /></el-icon>
              浏览 {{ announcementDetail.views || 0 }}
            </span>
            <span class="meta-item">
              <el-icon><i-ep-clock /></el-icon>
              发布时间: {{ formatDateTime(announcementDetail.publishTime) }}
            </span>
          </div>
        </div>

        <!-- 公告详细内容 -->
        <div class="detail-body">
          <div class="content-html" v-html="announcementDetail.content" />
        </div>

        <!-- 公告底部信息 -->
        <div class="detail-footer">
          <el-divider />
          <div class="footer-info">
            <span>创建时间: {{ formatDateTime(announcementDetail.createdAt) }}</span>
            <span v-if="announcementDetail.updatedAt">
              更新时间: {{ formatDateTime(announcementDetail.updatedAt) }}
            </span>
          </div>
        </div>
      </div>

      <el-empty v-else description="暂无公告详情" />
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.announcement-detail-page {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;

  .detail-card {
    max-width: 1200px;
    margin: 0 auto;
  }

  .card-header {
    display: flex;
    align-items: center;
  }

  .detail-content {
    .detail-header {
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid #e4e7ed;

      .detail-title {
        margin: 0 0 16px 0;
        font-size: 28px;
        font-weight: 600;
        color: #303133;
        line-height: 1.4;
        display: flex;
        align-items: center;
        gap: 8px;

        .important-icon {
          font-size: 30px;
          animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
          0%, 100% {
            opacity: 1;
          }
          50% {
            opacity: 0.6;
          }
        }
      }

      .detail-meta {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;

        .meta-item {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 14px;
          color: #606266;

          .el-icon {
            font-size: 16px;
          }
        }
      }
    }

    .detail-body {
      margin-bottom: 24px;

      .content-html {
        font-size: 16px;
        color: #303133;
        line-height: 1.8;

        :deep(img) {
          max-width: 100%;
          height: auto;
          border-radius: 4px;
        }

        :deep(p) {
          margin: 12px 0;
        }

        :deep(h1),
        :deep(h2),
        :deep(h3),
        :deep(h4),
        :deep(h5),
        :deep(h6) {
          margin: 24px 0 12px;
          font-weight: 600;
          color: #303133;
        }

        :deep(ul),
        :deep(ol) {
          padding-left: 24px;
          margin: 12px 0;
        }

        :deep(li) {
          margin: 8px 0;
        }

        :deep(blockquote) {
          margin: 16px 0;
          padding: 12px 16px;
          background: #f5f7fa;
          border-left: 4px solid #409eff;
          color: #606266;
        }

        :deep(code) {
          padding: 2px 6px;
          background: #f5f7fa;
          border-radius: 3px;
          font-family: 'Courier New', monospace;
          font-size: 14px;
        }

        :deep(pre) {
          margin: 16px 0;
          padding: 16px;
          background: #282c34;
          border-radius: 4px;
          overflow-x: auto;

          code {
            background: none;
            padding: 0;
            color: #abb2bf;
          }
        }

        :deep(table) {
          width: 100%;
          margin: 16px 0;
          border-collapse: collapse;
          border-spacing: 0;

          th,
          td {
            padding: 12px;
            border: 1px solid #e4e7ed;
            text-align: left;
          }

          th {
            background: #f5f7fa;
            font-weight: 600;
          }

          tr:hover {
            background: #fafafa;
          }
        }
      }
    }

    .detail-footer {
      .footer-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        color: #909399;
        flex-wrap: wrap;
        gap: 12px;
      }
    }
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .announcement-detail-page {
    padding: 12px;

    .detail-card {
      :deep(.el-card__header) {
        padding: 12px;
      }

      :deep(.el-card__body) {
        padding: 12px;
      }
    }

    .detail-content {
      .detail-header {
        margin-bottom: 16px;
        padding-bottom: 16px;

        .detail-title {
          font-size: 20px;

          .important-icon {
            font-size: 24px;
          }
        }

        .detail-meta {
          gap: 8px;

          .meta-item {
            font-size: 12px;
          }
        }
      }

      .detail-body {
        margin-bottom: 16px;

        .content-html {
          font-size: 14px;

          :deep(table) {
            display: block;
            overflow-x: auto;
            white-space: nowrap;

            th,
            td {
              padding: 8px;
              font-size: 12px;
            }
          }
        }
      }

      .detail-footer {
        .footer-info {
          font-size: 11px;
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
        }
      }
    }
  }
}
</style>
