<template>
    <div style="background-color: white">
      <div class="main-container wrap main-fullScreen">
        <div v-if="state.flag" class="rich-text" v-html="state.richTextContent"></div>
        <div v-else>
            <div class="not-found">
                <h1>404 - 页面未找到</h1>
                <p>抱歉，您要访问的页面不存在。</p>
            </div>
        </div>
    </div>
    <el-backtop :bottom="100" :visibility-height="100">
        <el-icon color="#409efc" class="no-inherit">
        <ArrowUpBold />
        </el-icon>
    </el-backtop>
    </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive} from 'vue';
import ApiConstant from '@/utils/ApiConstant';
import axiosInstance from '@/utils/http';
import { useRoute } from 'vue-router';
const { query, params } = useRoute();
document.title = '招生章程|' + import.meta.env.VITE_PROGRAM_TYPE;
//获取页面传参
let articleId = params.articleId
const state = reactive({
    flag:true,
    richTextContent: ''
})
onMounted(() => {
    getArticleDetail()
})

function getArticleDetail(){
    if(!articleId || articleId===undefined || articleId===null){
        state.flag = false
        return false
    }
    axiosInstance({
    url: ApiConstant.Article.articleContent+'/'+articleId,
    method: 'get',
    params:{},
    showLoading: false,//是否显示加载图标
  }).then((response) => {
    return response.data
  }).then((data) => {
    if(data.result){
      state.richTextContent = data.result.content
      document.title = data.result.title+'|' + import.meta.env.VITE_PROGRAM_TYPE;
    }else{
        state.flag = false
    }
  }).catch((error: any) => {
    console.log(error);
  }).finally(() => {
  });
}

</script>
<style lang="scss" scoped>
*{
  background-color: white;
}
.rich-text{
    margin: 0 auto;
}
.not-found {
  text-align: center;
  margin-top: 50px;
}

.not-found h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

.not-found p {
  font-size: 1.2em;
}
</style>