<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="newsList.length > 0" @click="onAllReadClick">全部标记已读</div>
		</div>
		<div class="content-box">
			<template v-if="newsList.length > 0">
				<div class="content-box-item" v-for="(v, k) in newsList" :key="k">
					<div>NO：{{ k+1 }}</div>
					<div class="content-box-msg" @click="v.checked=!v.checked">
						{{ v.taskPara }}
					</div>
					<div class="content-box-time" style="text-align: right;">
						<el-checkbox v-model="v.checked">已读</el-checkbox>
					</div>
					<!-- <div class="content-box-time"></div> -->
				</div>
			</template>
			<el-empty :description="$t('message.user.newDesc')" v-else></el-empty>
			<div   @click="getPage" style="text-align: center; color:rgb(64, 158, 255); cursor:pointer;" v-if="total-1>endRow">
				查看更多
			</div>
			
		</div>
		
		<div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">确认勾选已读消息</div>
	</div>
</template>

<script lang="ts">
import { onMounted, reactive, toRefs, watch  } from 'vue';
import { getNotifyMessages ,makeAsRead} from '/@/api/comm';
import { Session } from '/@/utils/storage';
import { useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
export default {
	name: 'layoutBreadcrumbUserNews',
	setup(props, context) {
		const route = useRoute();
		const state = reactive({
			page:1,
			size:3,
			total:0,
			endRow:0,
			newsList: [
				{
					taskSenderName: '张医生',
					taskPara: '这是一条新消息。。。。。。。。。。。。',
					taskReminderName: '王护士',
					checked:false,
					code:''
				}
			],
		});
		watch(
			() => route.path,
			() => {
				if (Session.get('token')){
					console.log('路由动作改')
					getNewsList()

				}
			}
		);
		// 全部已读点击
		const onAllReadClick = () => {
			makeAsRead({messageCode:'ALL'}).then(re=>{
				console.log(re)
				getNewsList()
				ElMessage.success('消息已经全部确认')
			})
		};
		// 前往通知中心点击
		const onGoToGiteeClick = () => {
			const list=[]
			state.newsList.map(e=>{
				if(e.checked){
					list.push(e.code)
				}
				
			})
			console.log('得到的code列表')
			console.log(list)
			if(list.length===0){
				ElMessage.warning('没有选中需要确认的消息')
				return false
			}
			const codes=list.toString()
			makeAsRead({messageCode:codes}).then(re=>{
				console.log(re)
				getNewsList()
				ElMessage.success('消息已经确认')
			})
		};
		const getPage=()=>{
			state.size+=state.size
			console.log('加一页显示的数据')
			getNewsList()
			console.log('查看更多')


		}
		// 获取list
		const getNewsList=()=>{
			const pas={
				page:state.page,
				size:state.size
			}
			state.newsList=[]
			getNotifyMessages(pas).then(re=>{
				console.log('请求通知--222--')
				console.log(re)
				// alert(re.data.list.length)
				state.newsList=re.data.list
				state.total=re.data.total
				state.endRow=re.data.endRow
				state.newsList.map(e=>{
					e.checked=false
					return e
				})
				state.newsList.forEach((el:any)=>{
					if(el.taskType==='OutputScheduleTemplate'){
						ElMessageBox.alert(
							el.taskPara,
							'提示',
							{
							dangerouslyUseHTMLString: true,
							}
						).then(()=>{
							makeAsRead({messageCode:el.code}).then(re=>{
								console.log(re)
							
							})
						})
					}
					else if(el.taskType==='RefreshPage'){
						ElMessageBox.alert(
							el.taskPara,
							'提示',
							{
							dangerouslyUseHTMLString: true,
							}
						).then(()=>{
							makeAsRead({messageCode:el.code}).then(re=>{
								location.reload()
							
							})
							
						})
					}
					else if(el.taskMessage==='alert'){
						ElMessageBox.alert(
							el.taskPara,
							'提示',
							{
							dangerouslyUseHTMLString: true,
							}
						).then(()=>{
							makeAsRead({messageCode:el.code}).then(re=>{
								console.log(re)
								// getNewsList()
							
							})
						})
					}
					
					else if(el.taskMessage==='WeightUpdated'){
						ElMessageBox.alert(
							el.taskPara,
							'提示',
							{
							dangerouslyUseHTMLString: true,
							}
						).then(()=>{
							makeAsRead({messageCode:el.code}).then(re=>{
								console.log(re)
								// getNewsList()
							
							})
						})
					}
				})
				context.emit('setmagLength',state.total) 
			})
		}
		onMounted(()=>{
			getNewsList()
		})
		return {
			getNewsList,
			onAllReadClick,
			onGoToGiteeClick,
			getPage,
			...toRefs(state),
		};
	},
};
</script>

<style scoped lang="scss">
.layout-navbars-breadcrumb-user-news {
	.head-box {
		display: flex;
		border-bottom: 1px solid #ebeef5;
		box-sizing: border-box;
		color: #333333;
		justify-content: space-between;
		height: 35px;
		align-items: center;
		.head-box-btn {
			color: var(--color-primary);
			font-size: 13px;
			cursor: pointer;
			opacity: 0.8;
			&:hover {
				opacity: 1;
			}
		}
	}
	.content-box {
		font-size: 13px;
		overflow:auto;
		max-height: 500px;
		
		.content-box-item {
			padding-top: 12px;
			&:last-of-type {
				padding-bottom: 12px;
			}
			.content-box-msg {
				color: #999999;
				margin-top: 5px;
				margin-bottom: 5px;
			}
			.content-box-time {
				color: #999999;
			}
		}
	}
	.foot-box {
		height: 35px;
		color: var(--color-primary);
		font-size: 13px;
		cursor: pointer;
		opacity: 0.8;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #ebeef5;
		&:hover {
			opacity: 1;
		}
	}
	::v-deep(.el-empty__description p) {
		font-size: 13px;
	}
}
</style>
