<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" class="show-info-form">
				<template v-if="['通知详情'].includes(noticeType)">
					<el-row :gutter="0">
						<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 :width="450" trigger="click" popper-class="notice-container">
                  <template #reference>
                    <el-button  placement="right" link type="primary">{{ state.ruleForm?.readedNum + '/' + state.ruleForm?.needReadNum }}</el-button>
                  </template>
                  <div class="notice-container-box">
                    <div class="notice-container-box-inner">
                      已读：{{ state.ruleForm?.readedNum }}
                      <el-scrollbar class="mt5" v-if="state.ruleForm?.circularReadGroups?.length">
                        <el-tag v-for="item in state.ruleForm?.circularReadGroups.filter(i=>i.isRead)">{{state.ruleForm.circularType === 1 ? item.userName : item.orgName}}
                          <span v-if="item.isTimeOut" class="color-danger">(超时阅读)</span>
                        </el-tag>
                      </el-scrollbar>
                    </div>
                    <div class="notice-container-box-inner">
                      未读：{{ state.ruleForm?.needReadNum - state.ruleForm?.readedNum }}
                      <el-scrollbar class="mt5 mb10" v-if="state.ruleForm.circularReadGroups?.length">
                        <el-tag v-for="item in state.ruleForm.circularReadGroups.filter(i=>!i.isRead)">{{state.ruleForm.circularType === 1 ? item.userName : item.orgName}}</el-tag>
                      </el-scrollbar>
                    </div>
                  </div>
                </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="['公告详情'].includes(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" class="editor-content-view">
							<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="auxiliaryNoticeRead">
import { reactive, onMounted, ref} from 'vue';
import { useRoute } from 'vue-router';
import { formatDate } from '@/utils/formatTime';
import { bulletinDetail,circularRead } from '@/api/auxiliary/notice';

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	ruleForm: <EmptyObjectType>{},
	examineForm: <EmptyObjectType>{},
});
const noticeType = ref<any>('通知详情');
const loading = ref<boolean>(false);
const getDetail = async (id: string | string[]) => {
	loading.value = true;
	try {
		switch (noticeType.value) {
			case '通知详情':
        // 阅读
        const readCircularRes = await circularRead(id);
        state.ruleForm = readCircularRes.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 ?? '通知详情';
	getDetail(route.params.id);
});
</script>
