<template>
	<div class="mainView">
		<bread-crumb />
		<div class="titleBox">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span class="title content">{{ articleData.title }}</span>
						<el-tag size="large" class="ml-2"
							:type="articleData.replyStatus == 1 ? 'success' : 'danger'">{{ articleData.replyStatus == 1 ? "已回复" : "未回复" }}</el-tag>
					</div>
				</template>
				<div class="letterBox content">
					<el-card class="box-card">
						<template #header>
							<div class="card-header">
								<span class="title">信件内容</span>
								<span><b>来信时间：</b> {{ articleData.letterTime }}</span>
							</div>
						</template>
						<div class="articleContent">
							{{ articleData.content }}
						</div>
					</el-card>
				</div>
				<div class="letterBox recover">
					<el-card class="box-card">
						<template #header>
							<div class="card-header">
								<span class="title">答复内容</span>
								<span><b>回复时间：</b>{{ articleData.replyTime }}</span>
								<span><b>回复单位：</b>{{ articleData.replyUser }}</span>
							</div>
						</template>
						<div class="articleContent">
							{{ articleData.replyContent }}
						</div>
					</el-card>
				</div>
			</el-card>
		</div>
	</div>
</template>
<script setup lang="ts" name="letterContent">
	import api from "@/api/hdjl.js";
	import { ref, onMounted } from "vue";
	import { useRouter } from "vue-router";
	import "@/style/hdjl/letterContent.less";
	import BreadCrumb from "@/components/breadcrumbModule/index.vue";
	const articleData = ref({});
	const articleId = useRouter().currentRoute.value.query.id;

	onMounted(() => {
		api.getMailboxDetail({ id: articleId }).then((res) => {
			if (res.code == 200) {
				articleData.value = res.data;
			}
		});
	});
</script>