<template>
	<div class="knowledge-knowledge-Standard-container">
		<el-dialog title="预览" v-model="state.isShowDialog" draggable width="70%">
			<el-row :gutter="35" v-loading="state.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="mb10 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"></div></el-col>
			</el-row>
			<div></div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.isShowDialog = false" class="default-button">关 闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="knowledgePreview">
import { reactive } from 'vue';
import { KnowledgeInfo } from '/@/api/knowledge';
import { formatDate } from '/@/utils/formatTime';

// 定义变量内容
const state = reactive<any>({
	isShowDialog: false,
	info: {},
});
// 打开弹窗
const openDialog = async (row: any, isDraft: boolean = false) => {
	state.isShowDialog = true;
	state.loading = true;
	if (isDraft) {
		state.info = row;
		state.loading = false;
	} else {
		try {
			const res: any = await KnowledgeInfo(row.id);
			state.info = res.result ?? {};
			state.isShowDialog = true;
			state.loading = false;
		} catch (error) {
			state.loading = false;
		}
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 查询知识详情
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
