<template>
	<div class="plan-preview-container layout-pd">
		<el-card shadow="never">
			<el-row v-loading="loading">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb10">
					<h1 class="font18" style="text-align: center">{{ state.info.title }}</h1></el-col
				>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="color-info flex-center-between flex-warp">
					<div>
						<span class="mr10">创建时间：{{ formatDate(state.info.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
						<span class="mr10">创建人：{{ state.info.creatorName }}</span>
						<span>创建部门：{{ state.info.creatorOrgName }}</span>
					</div>
					<div>
						<span class="mr10" v-if="state.info.planTypeText">案例分类：{{ state.info.planTypeText }}</span>
						<span>已阅：{{ state.info.pageView }}</span>
					</div>
					<div v-if="haveId" style="display: flex; align-items: center">
						<el-button link class="flex-center-align" type="info" v-auth="'plan:index:rate'">
							<el-rate v-model="state.info.score" @change="onRate" /> 评分</el-button
						>
						<el-dropdown v-auth="'plan:index:export:detail'" @command="onExportDetail" class="ml12">
							<el-button type="info" :loading="state.loading" link> 导出详情<SvgIcon name="ele-ArrowDown" class="ml3" /> </el-button>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item :command="item.key" v-for="item in exportType" :key="item.key">{{ item.value }}</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
				</el-col>
				<el-divider />
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mt5 editor-content-view">
					<div v-html="state.info.content" class="lineHeight24"></div
				></el-col>
				<template v-if="haveId">
					<el-divider />
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mt10">
						<el-form-item label="附件">
							<annex-list name="预案附件" v-model="state.info.files" readonly classify="预案附件" />
						</el-form-item>
					</el-col>
				</template>
			</el-row>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="planPreview">
import { reactive, onMounted, onBeforeUnmount, ref, defineAsyncComponent, computed } from 'vue';
import { useRoute } 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 { getPlanBaseData, planDetail, planDetailExport, planScore } from '@/api/plan';
import { VxeUI } from 'vxe-pc-ui';

// 引入组件
const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/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 = () => {
	planScore({ 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 planDetail({ 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('planPreviewForm') ?? {};
		state.info.files = transformFile(state.info.files);
		loading.value = false;
	}
};
// 获取基础数据
const exportType = ref<EmptyArrayType>([]);
const getBaseData = async () => {
	state.loading = true;
	try {
		const { result } = await getPlanBaseData();
		exportType.value = result.fileType ?? []; // 导出文件类型
		state.loading = false;
	} catch (error) {
		state.loading = false;
	}
};
// 详情导出
const onExportDetail = (command: string | number | object) => {
	state.loading = true;
	planDetailExport({ 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';
});
onMounted(() => {
	getBaseData();
	getInfo();
});
onBeforeUnmount(() => {
	Local.remove('planPreviewForm'); // 删除本地缓存
});
</script>
<style lang="scss" scoped>
.plan-preview-container {
	.relevance {
		margin-bottom: 5px;
		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>
