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

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

const loading = ref(false);
// const activityDetail = ref<ActivityDetailResponse | null>(null)
const activityDetail = ref<any | null>(null);

// 获取活动详情
async function fetchActivityDetail() {
  const id = route.params.id as string;
  if (!id)
    return;

  loading.value = true;
  try {
    // const res = await getActivityDetail(id)
    // activityDetail.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(() => {
  fetchActivityDetail();
});
</script>

<template>
  <div class="activity-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="activityDetail" class="detail-content">
        <!-- 活动头部 -->
        <div class="detail-header">
          <h1 class="detail-title">
            {{ activityDetail.title }}
          </h1>
          <div class="detail-meta">
            <el-tag
              v-if="activityDetail.status === 'active'"
              type="success"
              size="large"
            >
              进行中
            </el-tag>
            <el-tag
              v-else-if="activityDetail.status === 'expired'"
              type="info"
              size="large"
            >
              已结束
            </el-tag>
            <span class="meta-item">
              <el-icon><i-ep-view /></el-icon>
              浏览 {{ activityDetail.views || 0 }}
            </span>
            <span class="meta-item">
              <el-icon><i-ep-user /></el-icon>
              参与 {{ activityDetail.participantCount || 0 }}
            </span>
          </div>
        </div>

        <!-- 活动封面 -->
        <div v-if="activityDetail.coverImage" class="detail-cover">
          <img :src="activityDetail.coverImage" :alt="activityDetail.title">
        </div>

        <!-- 活动描述 -->
        <div class="detail-description">
          <h3>活动简介</h3>
          <p>{{ activityDetail.description }}</p>
        </div>

        <!-- 活动时间 -->
        <div class="detail-time">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="开始时间">
              {{ formatDateTime(activityDetail.startTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="结束时间">
              {{ formatDateTime(activityDetail.endTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="发布时间">
              {{ formatDateTime(activityDetail.createdAt) }}
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
              {{ formatDateTime(activityDetail.updatedAt) }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 活动详细内容 -->
        <div class="detail-body">
          <h3>活动详情</h3>
          <div class="content-html" v-html="activityDetail.content" />
        </div>
      </div>

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

<style scoped lang="scss">
.activity-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;
      }

      .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-cover {
      margin-bottom: 24px;
      border-radius: 8px;
      overflow: hidden;

      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }

    .detail-description {
      margin-bottom: 24px;
      padding: 20px;
      background: #f9fafb;
      border-radius: 8px;

      h3 {
        margin: 0 0 12px 0;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }

      p {
        margin: 0;
        font-size: 15px;
        color: #606266;
        line-height: 1.8;
      }
    }

    .detail-time {
      margin-bottom: 24px;
    }

    .detail-body {
      h3 {
        margin: 0 0 16px 0;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }

      .content-html {
        font-size: 15px;
        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: 20px 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;
          }
        }
      }
    }
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .activity-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;
        }

        .detail-meta {
          gap: 8px;

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

      .detail-description {
        padding: 12px;
        margin-bottom: 16px;

        h3 {
          font-size: 16px;
        }

        p {
          font-size: 14px;
        }
      }

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

        :deep(.el-descriptions__label) {
          font-size: 12px;
        }

        :deep(.el-descriptions__content) {
          font-size: 12px;
        }
      }

      .detail-body {
        h3 {
          font-size: 16px;
        }

        .content-html {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
