<template>
	<view class="fullHeight workStationNoticePage">
		<scroll-view class="smallHeight" scroll-y>
			<headers :tabIndex="1" :navList="navList">
			</headers>
			<view class="notice-nav">
				<view class="list_title">
					<view class="list_h2">{{ listTitle }}</view>
					<view class="list_btn">
						<ul>
							<li v-for="(item, index) in listNav" :key="index" :class="{ activeNav: btnIndex == index }" @click="checkTab(index)">{{ item.name }}</li>
						</ul>
					</view>
				</view>
			</view>
			<view class="notice_List" v-if="noticeList.length>0">
				<view class="notice_item" v-for="(item, index) in noticeList" :key="index" @click="priviewDetail(item)">
					<view class="notice_content">
						{{item.noticeTitle}}
					</view>
					<view class="flex a-center">
						<view class="notice_message flex a-center">
							<image src="/static/workstation/icon_people.png"></image>
							{{item.createUserAme}}
						</view>
						<view class="notice_message flex a-center">
							<image src="/static/workstation/icon_notice_date.png"></image>
							{{item.mounth}}月{{item.day}}日
						</view>
						<view class="notice_message notice_read flex a-center">
							<image src="/static/workstation/icon_notice_read.png"></image>
							<span>{{item.seeNoticePersonNum}}人已读</span>
							{{item.notSeeNoticePersonNum}}人未读
						</view>
					</view>
				</view>
			</view>
			<view v-else class="no-data">
				暂无数据
			</view>
			<view class="add_btn" @click="addNotice">
				<span>+</span>
				新建通知
			</view>
		</scroll-view>
		<footers2></footers2>
	</view>
</template>

<script>
	import footers2 from '../../../components/footers/footers2.vue';
	import headers from '../headers.vue';
	export default {
		data() {
			return {
				listTitle: '通知列表',
				navList: [
					{
						name: "任务清单"
					},
					{
						name: "通知公告"
					},
					{
						name: "工作日程"
					}
				],
				listNav: [
					{
						name: '未读'
					},
					{
						name: '已读'
					}
				],
				btnIndex: 0,
				noticeList: []
			}
		},
		components:{
			footers2,
			headers
		},
		created(){
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.projectSn = this.userInfo.sn
			this.loadData()
		},
		methods: {
			loadData(){
				let _this = this
				this.sendRequest({
					url: "xmgl/workstationNotice/selectNoticePageList",
					data: {
						projectSn: this.projectSn,
						pageNo: 1,
						pageSize: 100,
						userId: this.userInfo.userId,
						opType: this.btnIndex + 1
					},
					method: "POST",
					success(res){
						res.result.records.forEach((item)=>{
							let date = item.createTime.split(" ")[0]
							item.mounth = parseInt(date.split("-")[1])
							item.day = parseInt(date.split("-")[2])
						})
						_this.noticeList = res.result.records
						console.log(res)
					}
				})
			},
			checkTab(index){
				this.btnIndex = index
				this.loadData()
			},
			addNotice(){
				if(uni.getStorageSync('attendee')){
					uni.removeStorage({
						key: 'attendee',
						success: function (res) {
						   console.log('success');
						}
					})
					console.log(2)
				}
				uni.navigateTo({
					url: './addNotice'
				})
			},
			priviewDetail(val){
				uni.navigateTo({
					url: './noticeDetail?id='+ val.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.smallHeight {
	height: calc(100% - 54rpx);
}
.flex{
	display: flex;
}
.j-between{
	justify-content: space-between;
}
.j-center{
	justify-content: center;
}
.a-center{
	align-items: center;
}
.add_btn{
	position: fixed;
	right: 12rpx;
	bottom: 124rpx;
	// width: 84rpx;
	// height: 84rpx;
	width: 124rpx;
	height: 124rpx;
	display: flex;
	font-size: 16rpx;
	background: #fff;
	border-radius: 50%;
	border: 8rpx solid rgba(18, 127, 236, 0.08);
	color: #127FEC;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	span{
		font-size: 20rpx;
	}
}
.workStationNoticePage{
	padding-top: 220rpx;
	box-sizing: border-box;
	background: #f6f6f6;
	:deep( .headers_box ){
		// padding-bottom: 156rpx;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.notice-nav{
		background: #127FEC;
		padding-bottom: 156rpx;
		border-radius: 0px 0px 40rpx 40rpx;
	}
	.list_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.list_h2 {
			color: #fff;
			font-size: 30rpx;
			font-weight: 500;
			margin-left: 54rpx;
		}
		.list_btn {
			margin-right: 30rpx;
			ul {
				list-style: none;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 12rpx;
				background: rgba(255, 255, 255, 0.2);
				padding: 0;
				overflow: hidden;
				li {
					color: rgba(255, 255, 255, 0.6);
					width: 120rpx;
					height: 46rpx;
					line-height: 46rpx;
					font-size: 28rpx;
					text-align: center;
				}
				.activeNav {
					background: #fff;
					color: #127fec;
				}
			}
		}
	}
	
	.notice_List{
		margin-top: -128rpx;
		padding-bottom: 58rpx;
		.notice_item{
			width: 704rpx;
			margin: 0 auto;
			background: #fff;
			border-radius: 16rpx;
			box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 16rpx;
			.notice_content{
				color: #262D4A;
				font-size: 28rpx;
				margin-bottom: 12rpx;
			}
		}
		.notice_message{
			font-size: 22rpx;
			color: #6C7178;
			margin-right: 48rpx;
			image{
				width: 24rpx;
				height: 24rpx;
				margin-right: 12rpx;
			}
			span{
				color: #127FEC;
				margin-right: 20rpx;
				font-weight: 600;
			}
		}
		.notice_read{
			margin-left: 12rpx;
		}
	}
}
.no-data{
	text-align: center;
	padding-top: 200rpx;
}
</style>
