<template>
	<div class="mainView">
		<bread-crumb />
		<div class="contentBox">
			<articleModule :article="articleDetali">
				<div class="articleInfo">
					<span class="title">[征集部门]
						<span> {{ filterData(articleDetali.unitName) }}</span></span>
					<span class="title">[开始时间] <span> {{ articleDetali.startTime }}</span></span>
					<span class="title">[结束时间] <span> {{ articleDetali.endTime }}</span></span>
					<span class="title">[征集状态]
						<span> {{ articleDetali.progressStatusName }}</span></span>
				</div>
			</articleModule>
			<div class="leaveWords">
				<span class="statistics">(共有<b>{{ articleDetali.leaveMsgList.length }}</b>人提出意见)
					<span class="publish" @click="publish()"
						v-if="articleDetali.progressStatus == '1'">我要留言</span></span>
				<div class="commentatorBox" v-if="articleDetali.leaveMsgList.length">
					<div :key="item.id" class="commentator" v-for="item in articleDetali.leaveMsgList">
						<p class="letter">
							<span class="name">【{{ item.nickname }}】</span>
							{{ item.content }}
						</p>
						<p class="date">{{ item.createTime }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="">
	import api from "@/api/hdjl.js";
	import "@/style/hdjl/myDetail.less";
	import { useRouter } from "vue-router";
	import { ref, onMounted, reactive } from "vue";
	import dictStore from "@/store/dictionary.js"; //引入仓库
	import articleModule from "@/components/article/index.vue";
	import BreadCrumb from "@/components/breadcrumbModule/index.vue";

	const unitDict = dictStore().DICT_BM;
	const router = useRouter();
	const articleId = router.currentRoute.value.query.id;
	const articleDetali = reactive({
		fileList: [],
		attachments: "",
		leaveMsgList: [],
	});

	onMounted(() => {
		getDetalis();
	});

	// 获取文章详情
	function getDetalis() {
		api.popularWilldetail({ id: articleId }).then((res) => {
			if (res.code == 200) {
				let article = res.data.icPublicOpinionCollect;
				articleDetali.title = article.collectionTitle;
				articleDetali.endTime = article.endTime;
				articleDetali.startTime = article.startTime;
				articleDetali.attachments = article.attachments;
				articleDetali.progressStatus = article.progressStatus;
				articleDetali.contentHtml = article.announcementContent;
				articleDetali.unitName = article.ioDepartmentFunctionId;
				articleDetali.leaveMsgList = res.data.icPublicOpinionCollectMessages;
				articleDetali.progressStatusName =
					article.progressStatus == 0
						? "未开始"
						: article.progressStatus == 1
							? "征集中"
							: "已结束";
			}
		});
	}
	// 过滤部门
	function filterData(data) {
		let name = "";
		unitDict.map((item) => {
			if (item.id == data) {
				name = item.departmentName;
			}
		});
		return name;
	}

	// 留言
	function publish() {
		router.push({
			path: "/hdjl/myzj/wyly",
			query: {
				id: articleId,
			},
		});
	}
</script>