<template>
	<div class="layout-navBars-breadcrumb-user-news">
		<div class="head-box">
			<div class="head-box-title">通知</div>
			<!--					<div class="head-box-btn" v-if="state.newsList.length > 0" @click="onAllReadClick">全部已读</div>-->
		</div>
		<el-scrollbar class="mt5 content-box">
			<template v-if="state.newsList.length > 0">
				<div class="content-box-item" v-for="(v, k) in state.newsList" :key="k" @click="linkNews(v)">
					<div class="text-no-wrap">{{ v.title }} ({{ v.circularTypeText }})</div>
					<div class="content-box-msg">
						<div class="text-ellipsis2" v-html="v.content"></div>
					</div>
					<div class="content-box-time">{{ formatDate(v.circularTime, 'YYYY-mm-dd HH:MM:SS') }}</div>
				</div>
			</template>
			<el-empty description="暂无通知" v-else :image-size="120"></el-empty>
		</el-scrollbar>
	</div>
</template>

<script setup lang="ts" name="layoutBreadcrumbUserNews">
import { onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { muquery } from '@/api/auxiliary/notice';
import { formatDate } from '@/utils/formatTime';

const emit = defineEmits(['hideNws']);

const state = reactive<any>({
	newsList: [],
});
// 全部已读点击
const onAllReadClick = () => {
	state.newsList = [];
};

// 获取数量
const getNumAndList = async () => {
	try {
		const { result } = await muquery({ circularState: 2, IsRead: false, PageIndex: 1, PageSize: 999 });
		state.newsList = result?.items ?? [];
	} catch (e) {
		console.log(e, '获取消息数量失败');
	}
};
// 点击消息通知
const router = useRouter();
const linkNews = (v: any) => {
	emit('hideNws');
	router.push({
		name: 'auxiliaryNoticeRead',
		params: {
			id: v.id,
			isRead: 1,
			tagsViewName: '通知详情',
		},
	});
};
onMounted(() => {
	getNumAndList();
});
</script>

<style lang="scss" scoped>
.layout-navBars-breadcrumb-user-news {
	.head-box {
		display: flex;
		border-bottom: 1px solid var(--el-border-color-lighter);
		box-sizing: border-box;
		color: var(--el-text-color-primary);
		justify-content: space-between;
		height: 35px;
		align-items: center;

		.head-box-btn {
			color: var(--el-color-primary);
			font-size: 13px;
			cursor: pointer;
			opacity: 0.8;

			&:hover {
				opacity: 1;
			}
		}
	}

	.content-box {
		font-size: 13px;
		.content-box-item {
			padding: 12px 10px 5px 10px;
			border-radius: 5px;
			&:hover {
				background-color: var(--el-color-primary-light-9);
				cursor: pointer;
			}
			&:last-of-type {
				padding-bottom: 12px;
			}

			.content-box-msg {
				color: var(--el-text-color-secondary);
				margin-top: 5px;
				margin-bottom: 5px;
			}

			.content-box-time {
				color: var(--el-text-color-secondary);
			}
		}
	}

	.foot-box {
		height: 35px;
		color: var(--el-color-primary);
		font-size: 13px;
		cursor: pointer;
		opacity: 0.8;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid var(--el-border-color-lighter);

		&:hover {
			opacity: 1;
		}
	}
}
</style>
