<template>
	<view class="index">
		<view class="notice">
			<view class="notice-item  margin-top" v-for="(item,index) in noticeList" :key="index" @click="viewNoticeDetail(item)"  hover-class="cell-hover"  :hover-stay-time="50">
				<view class="flex">
					<span class="left-content text-cut text-left basis-lg">{{item.announcementTitle}}</span>
					<span class="right-content text-right text-xs basis-sm">
						{{ item.announcementDate.split(" ")[0] }}
						<text class="notice-flag"> {{ item.hospitalBean?'医院发布':'平台发布'}}  </text>
					</span>
				</view>
				<view class="text-cut notice-item-content">
					<span :class="item.type == '2'?'bg-notice':'bg-announcement'">
					</span>
					<span :class="item.type == '2'?'padding-notice':'padding-announcement'">
						{{item.announcementDesc}}
					</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeList:[]
			}
		},
		mounted() {
			this.getNotice()
		},
		methods: {
			viewNoticeDetail(item){
				uni.navigateTo({url:`/personModule/notice/detail?id=${item.id}&type=announce` })
			},
			// 获取通知/公告列表
			getNotice(){
				const data = { params:{pageNum:1,pageSize:10,hospitalId: this.$store.getters.userInfo.hospitalId} }
				this.$http.get(`/gastric-cancer-data/announcement/announce/list`,data).then(res => {
					const d = res.data
					if(d.code == 1){
						this.noticeList = d.object.list
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
	    height: 100%;
		.notice{
			padding: 0 30upx;
			padding-bottom:30upx;
			.left-content{
				color:#000;
			}
			.right-content{
				vertical-align: bottom;
				padding-top: 8upx;
				color:rgba(0,0,0,0.5);
			}
			.notice-item{
				// border:2upx solid rgba(153, 153, 153, 0.4);
				padding: 20upx;
				background-color: #FFFFFF;
				border-radius: 10upx;
				.notice-item-content{
					font-size: 26upx;
					margin-top: 12upx;
					color:#666666;
				}
				
				&.cell-hover{
					background:#fafafa;
				}
			}
			
			.bg-announcement,.bg-notice{
				height: 28upx;
				width: 32upx;
				display: inline-block;
				background-position: left;
				vertical-align: text-top;
				background-size: cover;
				background-repeat: no-repeat;
				background-image: url(../../static/announcement.png);
			}
			.bg-notice{
				background-image: url(../../static/notice.png);
			}
			.padding-notice{
				padding-left: 4upx;
			}
			.padding-announcement{
				padding-left: 14upx;
			}
		}
		.cu-tag{
			padding: 0px 12upx;
			height: 42upx;
			line-height:43upx;
			font-size: 20upx;
		}   
	}
	.notice-flag{
		border-radius: 14upx;
		border: 2upx solid #59A0F6;
		padding: 3upx 4upx;
		margin-left: 7upx;
		font-size: 24upx;
	}
</style>
