<template>
	<div class="header-title"> <h3>最新通知 </h3> <h4 v-show="list.length > 0" @click="go2page">查看全部</h4></div>
	<div class="noticebody">
		<div class="notice-item" @click="titleClick(item)"  v-for="(item,index) in list" :key="index" >
		 <el-badge v-if="item.is_read == 0" is-dot class="item">
		    <el-image class="logo" src="./src/assets/icons/notice.png"></el-image>
		  </el-badge>
			   <el-image class="logo"  v-else   src="./src/assets/icons/notice.png"></el-image>
			<label class="notices">{{item.title}}</label>
		</div>
	</div>
	<div v-show="list.length < 1"  style="display: flex;justify-content: center;">
			<label style="color: darkgray;"> 暂无新通知</label>
	</div>
	<el-dialog draggable v-model="centerDialogVisible" :title="notice.title" width="30%" center>
	  <div class="flex flex-wrap break-all" v-html="notice.content"></div>
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="readNotice">我知道了</el-button>
	    </span>
	  </template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { Bell } from '@element-plus/icons-vue';
	import router from '@/router';
	import { noticeListMine, noticeDetail, noticeRead } from '@/api/notice/index';
	const centerDialogVisible = ref(false)
	const notice = ref({})
	const list = ref({});
	const readNotice = () => {
		if(notice.value.id > 0){
			noticeRead(notice.value.id);
		}
	  centerDialogVisible.value = false
	}
	const getList = () => {
		noticeListMine({limit:3}).then(res => {
			list.value = res.data;
		})
	};
	const titleClick = (e) => {
	  noticeDetail(e.id).then(res => {
	    centerDialogVisible.value = true;
	    notice.value.id = res.data.id
	    notice.value.title = res.data.title
	    notice.value.content = res.data.content
	  })
	}
	const go2page = () =>{
		router.push({ path: "/notice/mynotice" });
	}
	onMounted(() => {
		getList();
	});
</script>

<style lang="scss" scoped>
	
	.header-title {
	  display: flex;
	  align-items: center;
	  justify-content:space-between;
	  h4{
		  margin-right: 50px;
		  color: #29d;;
	  }
	}
	.notice-item{
		display: flex;
		margin-top: 5px;
	}
	.notices{
		margin-left: 10px;
		line-height: 18px;;
	}
	.logo{
		width: 18px;
		height: 18px;
	}
</style>