<!-- 文章详细页面 -->

<template>
    <div class="article-container">
        <!-- 面包屑导航栏 -->
        <div class="breadcrumb-nav">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: g_breadcrumbsData?.path }">
                    {{ g_breadcrumbsData?.title }}
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ g_articleData?.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="article-wrapper">
            <!-- 标题 -->
            <h1 class="article-title">
                {{ g_articleData?.title }}
            </h1>

            <!-- 图片 -->
            <div class="article-banner">
                <img :src="(g_articleData?.cover?.indexOf('http') == 0 ? '' : 'http://106.55.102.172:10/prod-api') + g_articleData?.cover"
                    alt="文章配图">
            </div>

            <!-- 文本内容 -->
            <article class="article-content" v-html="g_articleData?.content"></article>
        </div>
    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getArticle } from '@/http/api/pages/Article'


/************************************************
 * 全局变量
 * 
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 路由
const g_route = useRoute();
const g_router = useRouter();

// 路由参数
const g_routeParameter = ref({});
// 面包屑源头
const g_breadcrumbsData = ref({ path: "/", title: "首页" });
// 文章内容
const g_articleData = ref(null);


/************************************************
 * 生命周期函数
 ************************************************/
// 挂载完成
onMounted(() => {
    act_initRouteQuery();
    act_BreadcrumbsData();
    get_articleContent();
})



/************************************************
* 事件处理
* 
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/
// 初始化路由参数
const act_initRouteQuery = () => {
    g_routeParameter.value = g_route;
}




/************************************************
 * 获取数据
 * 
 * 格式: get_ + 事件名     例如: get_AppDataList
 ************************************************/
// 获取文章数据
const get_articleContent = async () => {
    // 获取文章内容
    const res = await getArticle(g_routeParameter.value.query.id);
    g_articleData.value = res.data;
}

// 获取来源面包屑
const act_BreadcrumbsData = () => {
    g_breadcrumbsData.value = {
        path: g_routeParameter.value.query.path,
        title: g_routeParameter.value.query.title
    }
}
</script>

<style scoped>
.article-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    min-height: 100vh;
}

.breadcrumb-nav {
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 24px;
}

.article-wrapper {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
}

.article-title {
    font-size: 32px;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    margin: 32px 0;
    line-height: 1.4;
}

.article-banner {
    margin: 32px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.article-banner img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

.article-content {
    font-size: 16px;
    line-height: 1.8;
    color: #2c3e50;
    margin: 32px 0;
}

.article-content :deep(h1) {
    display: none;
}

.article-content :deep(br) {
    content: "";
    display: block;
    margin: 16px 0;
}

:deep(.el-breadcrumb) {
    font-size: 14px;
}

:deep(.el-breadcrumb__item) {
    color: #666;
}

:deep(.el-breadcrumb__inner.is-link) {
    color: #409EFF;
    font-weight: normal;
}

:deep(.el-breadcrumb__inner.is-link:hover) {
    color: #66b1ff;
}

@media screen and (max-width: 768px) {
    .article-container {
        padding: 16px;
    }

    .article-wrapper {
        padding: 0 16px;
    }

    .article-title {
        font-size: 24px;
        margin: 24px 0;
    }

    .article-banner {
        margin: 24px -16px;
        border-radius: 0;
    }

    .article-content {
        font-size: 15px;
        line-height: 1.7;
    }
}
</style>