<template>
    <div class="notice-detail">

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
            <el-skeleton :rows="8" animated>
                <template #template>
                    <el-skeleton-item variant="text" style="width: 60%; margin-bottom: 20px;" />
                    <el-skeleton-item variant="text" style="width: 30%; margin-bottom: 30px;" />
                    <el-skeleton-item variant="text" style="width: 100%; margin-bottom: 15px;" />
                    <el-skeleton-item variant="text" style="width: 100%; margin-bottom: 15px;" />
                    <el-skeleton-item variant="text" style="width: 80%; margin-bottom: 15px;" />
                    <el-skeleton-item variant="text" style="width: 100%; margin-bottom: 15px;" />
                    <el-skeleton-item variant="text" style="width: 90%; margin-bottom: 15px;" />
                    <el-skeleton-item variant="text" style="width: 70%;" />
                </template>
            </el-skeleton>
        </div>

        <!-- 错误状态 -->
        <div v-else-if="error" class="error-container">
            <el-empty description="加载失败">
                <el-button type="primary" @click="fetchNoticeDetail">重新加载</el-button>
            </el-empty>
        </div>

        <!-- 公告内容 -->
        <div v-else-if="noticeDetail" class="notice-content">
            <!-- 头部信息 -->
            <div class="notice-header">
                <h1 class="notice-title">{{ noticeDetail.title }}</h1>
                <div class="notice-meta" style="padding-bottom: 10px;">
                    <span v-if="noticeDetail.titleText" class="notice-time">
                        {{ noticeDetail.titleText }}
                    </span>
                </div>
                <div class="notice-meta">
                    <span v-if="noticeDetail.typeText" class="notice-type">
                        <el-tag :type="getTagType(noticeDetail.typeText)">{{ noticeDetail.typeText }}</el-tag>
                    </span>
                    <span v-if="noticeDetail.createTime" class="notice-time">
                        发布时间：{{ formatTime(noticeDetail.createTime) }}
                    </span>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="notice-body">
                <div v-if="noticeDetail.details" class="notice-text" v-html="noticeDetail.details"></div>
                <div v-else class="no-content">
                    <el-empty description="暂无内容" />
                </div>
            </div>

            <!-- 返回按钮 -->
            <div class="notice-footer">
                <el-button @click="goBack">返回</el-button>
            </div>
        </div>

        <!-- 无数据状态 -->
        <div v-else class="no-data">
            <el-empty description="公告不存在" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { homeApi } from '@/api/home.js';
import Breadcrumb from '@/layout/components/Breadcrumb.vue';

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

// 响应式数据
const loading = ref(true);
const error = ref(false);
const noticeDetail = ref(null);

// 获取公告详情
const fetchNoticeDetail = async () => {
    try {
        loading.value = true;
        error.value = false;

        const noticeId = route.params.id;
        if (!noticeId) {
            throw new Error('公告ID不存在');
        }

        const response = await homeApi.getNoticeById(noticeId);
        if (response && response.success) {
            noticeDetail.value = response.result;
        } else {
            throw new Error(response?.message || '获取公告详情失败');
        }
    } catch (err) {
        console.error('获取公告详情失败:', err);
        error.value = true;
        ElMessage.error(err.message || '获取公告详情失败');
    } finally {
        loading.value = false;
    }
};

// 格式化时间
const formatTime = (timeStr) => {
    if (!timeStr) return '';
    const date = new Date(timeStr);
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    });
};

// 获取标签类型
const getTagType = (typeText) => {
    const typeMap = {
        '系统公告': 'info',
        '活动公告': 'success',
        '维护公告': 'warning',
        '紧急公告': 'danger'
    };
    return typeMap[typeText] || 'info';
};

// 返回上一页
const goBack = () => {
    if (window.history.length > 1) {
        router.go(-1);
    } else {
        router.push('/');
    }
};

// 组件挂载时获取数据
onMounted(() => {
    fetchNoticeDetail();
});
</script>

<style lang="scss" scoped>
.notice-detail {
    // margin: 0 auto;
    margin: 20px 0;
    padding: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    .loading-container,
    .error-container,
    .no-data {
        padding: 40px 20px;
        text-align: center;
    }

    .notice-content {
        .notice-header {
            border-bottom: 2px solid #f5f5f5;
            padding-bottom: 20px;
            margin-bottom: 30px;

            .notice-title {
                font-size: 28px;
                font-weight: 600;
                color: #333;
                line-height: 1.4;
                margin: 0 0 15px 0;
            }

            .notice-meta {
                display: flex;
                align-items: center;
                gap: 20px;
                font-size: 14px;
                color: #666;

                .notice-type {
                    :deep(.el-tag) {
                        font-size: 12px;
                    }
                }

                .notice-time {
                    color: #999;
                }
            }
        }

        .notice-body {
            margin-bottom: 40px;

            .notice-text {
                font-size: 16px;
                line-height: 1.8;
                color: #333;
                word-wrap: break-word;

                // 富文本内容样式
                :deep(h1),
                :deep(h2),
                :deep(h3),
                :deep(h4),
                :deep(h5),
                :deep(h6) {
                    margin: 20px 0 15px 0;
                    color: #0A2463;
                }

                :deep(p) {
                    margin: 15px 0;
                    line-height: 1.8;
                }

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

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

                :deep(li) {
                    margin: 8px 0;
                    line-height: 1.6;
                }

                :deep(blockquote) {
                    margin: 20px 0;
                    padding: 15px 20px;
                    background: #f8f9fa;
                    border-left: 4px solid #0A2463;
                    border-radius: 4px;
                }

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

                :deep(pre) {
                    background: #f8f9fa;
                    padding: 15px;
                    border-radius: 4px;
                    overflow-x: auto;
                    margin: 15px 0;
                }

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

                :deep(th),
                :deep(td) {
                    border: 1px solid #e0e0e0;
                    padding: 10px;
                    text-align: left;
                }

                :deep(th) {
                    background: #f5f5f5;
                    font-weight: 600;
                }

                :deep(a) {
                    color: #0A2463;
                    text-decoration: none;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            .no-content {
                padding: 60px 20px;
            }
        }

        .notice-footer {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #f5f5f5;
        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .notice-detail {
        margin: 0;
        padding: 15px;
        border-radius: 0;
        box-shadow: none;

        .notice-content .notice-header {
            .notice-title {
                font-size: 24px;
            }

            .notice-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }

        .notice-content .notice-body .notice-text {
            font-size: 15px;
        }
    }
}
</style>