<template>
	<div class="auxiliary-notice-detail-container layout-pd">
		<el-card shadow="never" v-loading="loading">
			<el-form :model="state.ruleForm" label-width="110px" ref="ruleFormRef">
				<template v-if="noticeType === '通知详情'">
					<el-row :gutter="10">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="通知类型">
								{{ state.ruleForm.circularTypeName }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="通知标题">
								{{ state.ruleForm.title }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="必须阅读">
								{{ state.ruleForm.isMustRead ? '是' : '否' }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="失效时间：">
								{{ formatDate(state.ruleForm.lostEfficacyTime, 'YYYY-mm-dd HH:MM:SS') }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="通知对象：">
								{{ state.ruleForm.circularTypeText }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="已阅读数量：">
								<el-popover placement="right" :width="400" trigger="click">
									<template #reference>
										<el-button link type="primary">{{ state.ruleForm.readedNum + '/' + state.ruleForm.needReadNum }}</el-button>
									</template>
									<el-table :data="state.ruleForm.circularReadGroups" v-loading="state.loading" row-key="id" ref="multipleTableRef">
										<el-table-column prop="userName" label="姓名" show-overflow-tooltip v-if="state.ruleForm.circularType === 1"></el-table-column>
										<el-table-column prop="orgName" label="部门名称" show-overflow-tooltip v-if="state.ruleForm.circularType === 2"></el-table-column>
										<el-table-column prop="isRead" label="阅读状态" show-overflow-tooltip>
											<template #default="{ row }">
												{{ row.isRead ? '已读' : '未读' }}
											</template>
										</el-table-column>
										<el-table-column prop="isTimeOut" label="超时" show-overflow-tooltip>
											<template #default="{ row }">
												{{ row.isTimeOut ? '已超时' : '未超时' }}
											</template>
										</el-table-column>
									</el-table>
								</el-popover>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="文档内容：">
								<div v-html="state.ruleForm.content"></div>
							</el-form-item>
						</el-col>
					</el-row>
				</template>
				<template v-if="noticeType === '公告详情'">
					<el-row :gutter="10">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="公告类型：">
								{{ state.ruleForm.bulletinTypeName }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="公告标题：">
								{{ state.ruleForm.title }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="失效时间：">
								{{ formatDate(state.ruleForm.loseEfficacyTime, 'YYYY-mm-dd HH:MM:SS') }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
							<el-form-item label="来源单位：">
								{{ state.ruleForm.sourceOrgName }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="公告范围：">
								{{ state.ruleForm.pushRangesText }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="文档内容：">
								<div v-html="state.ruleForm.content"></div>
							</el-form-item>
						</el-col>
					</el-row>
				</template>
			</el-form>
		</el-card>
	</div>
</template>
<script setup lang="ts" name="auxiliaryNoticeDetail">
import { reactive, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { formatDate } from '/@/utils/formatTime';
import { bulletinDetail, circularDetail, circularRead } from '/@/api/auxiliary/notice';

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	ruleForm: <EmptyObjectType>{},
});
const noticeType = ref<string | string[]>('通知详情');
const loading = ref<boolean>(false);
const isRead = ref<string | string[]>('0');
const getDetail = async (id: string | string[]) => {
	loading.value = true;
	try {
		switch (noticeType.value) {
			case '通知详情':
				if (isRead.value === '1') {
					// 阅读
					const readCircularRes = await circularRead(id);
					state.ruleForm = readCircularRes.result;
				} else {
					// 查看详情
					const circularRes = await circularDetail(id);
					state.ruleForm = circularRes.result;
				}
				break;
			case '公告详情':
				const bulletinRes = await bulletinDetail(id);
				state.ruleForm = bulletinRes.result;
				break;
			default:
				break;
		}
		loading.value = false;
	} catch (error) {
		loading.value = false;
		console.log(error);
	}
};
const route = useRoute();
onMounted(() => {
	noticeType.value = route.params?.tagsViewName ?? '通知详情';
	isRead.value = route.params?.isRead ?? '0';
	getDetail(route.params.id);
});
</script>

<style scoped lang="scss"></style>
