<!-- <template>
    <el-row>
        <el-col :span="24">
            <el-button @click="goBack()">
                < 返回列表</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <h1 v-if="detail.type === 'article'">{{ articleinfo.detail.title }}</h1>
            <p v-if="detail.type === 'article'" style="padding: 20px;">发布时间:{{ articleinfo.detail.created }}---更新时间:{{
                articleinfo.detail.updated }}</p>
            <h1 v-if="detail.type === 'news'">{{ newsinfo.detail.title }}</h1>
            <p v-if="detail.type === 'news'" style="padding: 20px;">发布时间:{{ newsinfo.detail.published }}</p>
            <h1 v-if="detail.type === 'project'">{{ projectinfo.detail.title }}</h1>
            <p v-if="detail.type === 'project'" style="padding: 20px;">发布时间:{{ projectinfo.detail.created }}---更新时间:{{
                projectinfo.detail.updated }}</p>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <div style="width: 100%;">
                <div v-html="Content" class="markdown-body"></div>
            </div>

        </el-col>
    </el-row>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { articleStore, detailsStore, newsStore, projectStore } from '@/store/details'
import { onMounted, ref } from 'vue'
import { marked } from 'marked'

const router = useRouter()

const detail = detailsStore()

const articleinfo = articleStore()
const newsinfo = newsStore()
const projectinfo = projectStore()

const Content = ref('')

const show = ref(null)


const setShow = () => {
    if (detail.type === 'article')
        show.value = articleinfo.detail
    else if (detail.type === 'news')
        show.value = newsinfo.detail
    else if (detail.type === 'project')
        show.value = projectinfo.detail
}



const goBack = () => {
    router.back()
}

const convertContent = () => {
    const markdownContent = show.value.content
    Content.value = marked.parse(markdownContent)
}


onMounted(() => {
    setShow()
    convertContent()
})
</script>

<style scoped>
@import 'github-markdown-css/github-markdown.css';

::v-deep(.markdown-body) {
    padding: 20px;
}

::v-deep(.markdown-body table) {
    width: 100%;
    border-collapse: collapse;
}

::v-deep(.markdown-body th),
::v-deep(.markdown-body td) {
    border: 1px solid #d0d7de;
    padding: 8px;
}

::v-deep(.markdown-body th) {
    background-color: #f6f8fa;
    font-weight: 600;
}

::v-deep(.markdown-body img) {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
</style> -->