<template>
	<view class="page">
		<view class="cell" @click="jump('1')">
			<!-- <view style="display: flex; width: 100%;"> -->
				<img class="icon" src="/static/img/message/msg2.png" alt="">
				<view class="cell-c">
					<view class="t1">
						系统公告
					</view>
					<view class="t2">
						{{systemNotice.noticeTitle?systemNotice.noticeTitle:'暂无公告'}}
					</view>
				</view>
			<!-- </view> -->
			<view class="time" v-if="systemNotice.sendTime">
				{{$u.timeFrom(systemNotice.sendTime)}}
			</view>
			<view v-if="systemNotice.ifRead == 'unread'" class="red"></view>
		</view>
		<view class="cell" style="margin-top: 30px;" @click="jump('2')">
			<!-- <view style="display: flex; width: 100%;"> -->
				<img class="icon" src="/static/img/message/msg1.png" alt="">
				<view class="cell-c">
					<view class="t1">
						学校公告
					</view>
					<view class="t2">
						{{schoolNotice.noticeTitle?schoolNotice.noticeTitle:'暂无公告'}}
					</view>
				</view>
			<!-- </view> -->
			<view class="time" v-if="schoolNotice.sendTime">
				{{$u.timeFrom(schoolNotice.sendTime)}}
			</view>
			<view v-if="schoolNotice.ifRead == 'unread'" class="red"></view>
		</view>
	</view>
</template>

<script>	
	import {
		mapGetters,
		mapState,
		mapActions
	} from 'vuex'
	
	import {
		msginfoUrl,
	} from '@/config/api.js';
	
	export default {
		data() {
			return {
				systemNotice: {},
				schoolNotice: {}
			}
		},
		
		onShow() {
			if (this.hasLogin) {
				msginfoUrl().then(res => {
					if (res) {
						this.systemNotice = res.systemNotice
						this.schoolNotice = res.schoolNotice
					}
				})
			}
		},
		
		computed: {
			...mapState({
				hasLogin: 'hasLogin',
				vuex_user: 'vuex_user',
				teacher: (state) => state.vuex_user.teacher,
			}),
		
		
		},

		methods: {
			beforeSwitch(index) {
				return true
			},
			
			jump(type) {
				this.$u.route({
					url: "/pages/main/message/message-list/message-list",
					params: {
						type: type
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 16px;
		
		.cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 50px;
			position: relative;
			
			.icon {
				width: 50px;
				height: 50px;
			}
			
			.cell-c {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				
				.t1 {
					font-size: 16px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
				}
				
				.t2 {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					white-space: normal;
					word-break: break-all;
					word-wrap: break-word;
					margin-top: 20rpx;
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(18,18,18,0.45);
				}
			}
			
			.time {
				font-size: 14px;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: rgba(0,0,0,0.45);
			}
			
			.red {
				position: absolute;
				left: 3px;
				top: -1px;
				width: 12px;
				height: 12px;
				border-radius: 6px;
				background-color: red;
			}
		}
	}
</style>