<template>
	<div class="case-preview-container layout-pd">
		<el-card shadow="never" v-loading="loading">
			<h1 class="font18" style="text-align: center">
				<el-tag type="danger" class="mr10" effect="dark" v-if="state.info.isPopular">热门案例</el-tag> {{ state.info.title }}
			</h1>
			<div class="color-info flex-center-between" style="width: 50%; margin: 0 auto">
				<span>类型：{{ state.info.caseTypeText }}</span>
				<span class="mr10">创建时间：{{ formatDate(state.info.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
			</div>
			<div class="mt20 mb20" v-if="state.info.abstract">
				<p class="border-title">关键词</p>
				<p class="mt10 ml20">{{ state.info.keywords }}</p>
			</div>
			<div class="mt20 mb20" v-if="state.info.abstract">
				<p class="border-title">案例摘要</p>
				<div v-html="state.info.abstract" class="lineHeight24 mt10 ml20"></div>
			</div>
			<div class="mt20 mb20">
				<p class="border-title">案例描述</p>
				<div v-html="state.info.describe" class="lineHeight24 mt10 ml20"></div>
			</div>
			<div class="mt20 mb20">
				<p class="border-title">案例办理结果</p>
				<div v-html="state.info.result" class="lineHeight24 mt10 ml20"></div>
			</div>
			<div class="mt20 mb20" v-if="state.info.reason">
				<p class="border-title">推荐理由</p>
				<div v-html="state.info.reason" class="lineHeight24 mt10 ml20"></div>
			</div>
			<div class="mt20 mb20">
				<p class="border-title">关联信息</p>
				<div v-if="haveId" class="ml20 mt10">
					<el-form-item label="关联工单">
						<order-detail :order="{ id: state.info.orderId }">{{ state.info.orderTitle }}</order-detail>
					</el-form-item>
					<el-form-item label="关联知识" v-if="state.info.knowledgeId">
						<el-button link type="primary" @click="onPreviewKnowledge">{{ state.info.knowledgeTitle }}</el-button>
					</el-form-item>
					<el-form-item label="附件">
						<annex-list name="案例附件" v-model="state.info.files" readonly classify="案例附件" />
					</el-form-item>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="casePreview">
import { reactive, onMounted, onBeforeUnmount, ref, defineAsyncComponent, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Local } from '@/utils/storage';
import { formatDate } from '@/utils/formatTime';
import { ElMessage } from 'element-plus';
import { downloadFileByStream, transformFile } from '@/utils/tools';
import { VxeUI } from 'vxe-pc-ui';
import { caseDetail, caseDetailExport, caseScore, getCaseBaseData } from '@/api/case';

// 引入组件
const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情

// 定义变量内容
const state = reactive<any>({
	info: {
		planTypeText: '', // 类别
		hotspotName: '', // 热点
		keywords: '', // 关键词
		isPublic: false, // 是否公开
		creatorName: '', // 创建人
		creationTime: '', // 创建时间
		summary: '', // 摘要
		content: '', // 内容
		collect: false, // 收藏
		score: 0, // 评分
	},
});
const loading = ref<Boolean>(false); // 加载状态
// 查询详情
const route = useRoute(); //  获取路由参数
// 评分
const onRate = () => {
	caseScore({ id: state.info.id, score: state.info.score })
		.then(() => {
			ElMessage.success('评分成功');
			getInfo();
		})
		.catch(() => {
			getInfo();
		});
};
// 查询详情
const getInfo = async () => {
	loading.value = true;
	if (route.params.id && route.params.id !== '0') {
		try {
			const { isAddPv } = route.params;
			let IsAddPv = isAddPv ? 'true' : false;
			const res: any = await caseDetail({ id: route.params.id, isAddPv: IsAddPv });
			state.info = res.result ?? {};
			state.info.files = transformFile(state.info.files);
			loading.value = false;
		} catch (error) {
			loading.value = false;
		}
	} else {
		state.info = Local.get('casePreviewForm') ?? {};
		state.info.files = transformFile(state.info.files);
		loading.value = false;
	}
};
// 获取基础数据
const exportType = ref<EmptyArrayType>([]);
const getBaseData = async () => {
	state.loading = true;
	try {
		const { result } = await getCaseBaseData();
		exportType.value = result.fileType ?? []; // 导出文件类型
		state.loading = false;
	} catch (error) {
		state.loading = false;
	}
};
// 详情导出
const onExportDetail = (command: string | number | object) => {
	state.loading = true;
	caseDetailExport({ ids: [state.info.id], fileType: command })
		.then((res) => {
			downloadFileByStream(res);
			state.loading = false;
			VxeUI.modal.close('exportDetail');
			VxeUI.modal.message({
				content: `导出成功`,
				status: 'success',
			});
		})
		.catch(() => {
			state.loading = false;
			VxeUI.modal.close('exportDetail');
			VxeUI.modal.message({
				content: `导出失败`,
				status: 'error',
			});
		});
};
const haveId = computed(() => {
	return route.params.id && route.params.id !== '0';
});
// 预览知识库
const router = useRouter();
const onPreviewKnowledge = () => {
	router.push({
		name: 'knowledgePreview',
		params: {
			id: state.info.knowledgeId,
			tagsViewName: state.info.knowledgeTitle,
		},
	});
};
onMounted(() => {
	getBaseData();
	getInfo();
});
onBeforeUnmount(() => {
	Local.remove('casePreviewForm'); // 删除本地缓存
});
</script>
<style lang="scss" scoped>
.case-preview-container {
	.relevance {
		margin-bottom: 5px;
		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>
