<template>
	<div class="knowledge-preview-container layout-pd">
		<el-card shadow="never">
			<el-row :gutter="35" v-loading="loading">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb30">
					<h1 class="font18">{{ state.info.title }}</h1></el-col
				>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb10"> 类别：{{ state.info.knowledgeTypeName }}</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb10"> 热点：{{ state.info.hotspotName }}</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb10" v-if="state.info.keywords"> 关键词：{{ state.info.keywords }}</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb10"> 是否公开：{{ state.info.isPublic ? '是' : '否' }}</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb10"> 创建人：{{ state.info.creatorName }}</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb10">
					创建时间：{{ formatDate(state.info.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</el-col
				>
				<div style="border-bottom: var(--el-border); height: 1px" class="w100 mt10"></div>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mt30" v-if="state.info.summary"> 摘要：{{ state.info.summary }}</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mt20"> <div v-html="state.info.content" class="lineHeight24"></div></el-col>
			</el-row>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="knowledgePreview">
import {reactive, onMounted, onBeforeUnmount, ref} from 'vue';
import { useRoute } from 'vue-router';
import { Local } from '/@/utils/storage';
import { KnowledgeInfo } from '/@/api/knowledge';
import { formatDate } from '/@/utils/formatTime';

// 定义变量内容
const state = reactive<any>({
	info: {
    knowledgeTypeName: '', // 类别
    hotspotName: '', // 热点
    keywords: '', // 关键词
    isPublic: false, // 是否公开
    creatorName: '', // 创建人
    creationTime: '', // 创建时间
    summary: '', // 摘要
    content: '', // 内容
  },
});
const loading = ref<Boolean>(false); // 加载状态
// 查询知识详情
const route = useRoute(); //  获取路由参数
onMounted(async () => {
  loading.value = true;
	if (route.params.id) {
		try {
			const { isAddPv } = route.params;
			let IsAddPv = isAddPv ? 'true' : false;
			const res: any = await KnowledgeInfo(route.params.id, { isAddPv: IsAddPv });
			state.info = res.result ?? {};
      loading.value = false;
		} catch (error) {
      loading.value = false;
		}
	} else {
		state.info = Local.get('previewForm') ?? {};
    loading.value = false;
	}
});
onBeforeUnmount(() => {
	Local.remove('previewForm'); // 删除本地缓存
});
</script>
<style lang="scss" scoped>
.knowledge-knowledge-Standard-container {
	.el-card {
		color: var(--el-text-color-regular) !important;
	}
}
</style>
