<template>
	<view>
		<view class="upper-user">
			<view class="user-lef">
				<image src="/static/bg1.jpg" mode=""></image>
			</view>
			<view class="user-rig">
				<view>你好！{{ username }}</view>
				<view>欢迎使用智慧仓储（装备共享平台）</view>
			</view>
		</view>
		<view class="sliders">
			<view>
				<h2>{{ todayDatas.dayLeaseNum }}</h2>
				<span>当日领料</span>
			</view>
			<view>
				<h2>{{ todayDatas.dayBackNum }}</h2>
				<span>当日退料</span>
			</view>
			<view>
				<h2>{{ todayDatas.dayInputNum }}</h2>
				<span>当日入库</span>
			</view>
			<view>
				<h2>{{ todayDatas.dayOutNum }}</h2>
				<span>当日出库</span>
			</view>
		</view>
		<view class="sections">
			<view 
				v-for="(part, index) in isUsingList"
				:key="index"
				@click="jumpUrl(part.iconMark)"
			>
				<image :src="`/static/${part.iconMark}.png`" mode=""></image>
				<span>{{ part.iconName }}</span>
			</view>
			<!-- <view @click="jumpUrl('fetchMaterial')">
				<image src="/static/领料申请.png" mode=""></image>
				<span>领料申请</span>
			</view>
			<view @click="jumpUrl('exitMaterial')">
				<image src="/static/退料申请.png" mode=""></image>
				<span>退料申请</span>
			</view> -->
		</view>
		<h4 style="width: 90%; margin: 3vh auto;">待办事项</h4>
		<view class="wait-do">
			<view class="llsp" @click="jumpUrl('fetchExam')">
				<h4>{{ waitList.leaseNum }}</h4>
				<h5>领料待审批</h5>
			</view>
			<view class="tlsp" @click="jumpUrl('exitExam')">
				<h4>{{ waitList.backNum }}</h4>
				<h5>退料待审批</h5>
			</view>
			<view class="bfsh" @click="jumpUrl('crashExam')">
				<h4>{{ waitList.scrapNum }}</h4>
				<h5>报废待审核</h5>
			</view>
			<view class="sysh" @click="jumpUrl('testExam')">
				<h4>{{ waitList.trialNum }}</h4>
				<h5>试验检验待审核</h5>
			</view>
		</view>
		<h4 style="width: 90%; margin: 3vh auto; display: flex; justify-content: space-between; align-items: center;">
			<span>通知公告</span>
			<text @click="seeMore" style="color: #5297FF; font-weight: normal; font-size: 12px;">查看更多>></text>
		</h4>
		<view 
			class="single-notice"
			v-for="(notice, index) in noticeList"
			:key="index"
			@click="noticeDetail(notice.noticeId)"
		>
			<view class="notice-lef">
				<image src="/static/notice.png" mode=""></image>
			</view>
			<view class="notice-rig">
				<h4>{{ notice.noticeTitle }}</h4>
				<h5>{{ notice.createTime }}</h5>
			</view>
		</view>
		<uni-popup
			ref="popup" 
			type="center"
			:mask-click="false"
		>
			<view class="popup">
				<view class="pop-top">
					<h4>公告({{ unreadIndex + 1 }}/{{ unreadList.length }})</h4>
					<uni-icons 
						style="color: #AAAAAA; font-weight: bold;" 
						type="closeempty" 
						@click="closePopup"
					>
					</uni-icons>
				</view>
				<view 
					class="unread-notice"
					v-for="(list, index) in unreadList"
					:key="index"
					v-show="index == unreadIndex"
				>
					<view class="tit">
						{{ list.noticeTitle }}
					</view>
					<view class="info">
						<view>发布人：{{ list.createBy }}</view>
						<view>发布时间：{{ list.createTime }}</view>
						<view>公告内容：{{ list.noticeContent }}</view>
					</view>
					<view 
						class="read-one"
						v-show="unreadIndex < unreadList.length - 1"
						@click="readOneNotice(list.noticeId)"
					>
						我知道了
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLoading: false,
				username: uni.getStorageSync('userInfo').username,
				noticeList: [],
				todayDatas: {
					dayLeaseNum: '',
					dayBackNum: '',
					dayInputNum: '',
					dayOutNum: ''
				},
				waitList: {
					lldsp: '',
					tldsp: '',
					bfdsh: '',
					sydsh: ''
				},
				isUsingList: [],
				percent: '',
				unreadList: [],
				unreadIndex: 0
			}
		},
		methods: {
			seeMore () {
				uni.navigateTo({
					url: '/pages/moreNotice/moreNotice'
				})
			},
			noticeDetail (id) {
				console.log(id);
				uni.navigateTo({
					url: `/pages/noticeDetail/noticeDetail?noticeId=${id}`
				})
			},
			jumpUrl (path) {
				uni.navigateTo({
					url: `/pages/${path}/${path}`
				})
			},
			extractTextFromHTML(htmlString) {
			  return htmlString.replace(/<[^>]*>/g, '');
			},
			openPopup () {
				this.$refs.popup.open()
			},
			closePopup () {
				let that = this
				let noticeArr = []
				that.unreadList.forEach(item => {
					noticeArr.push(item.noticeId)
				})
				console.log(noticeArr);
				that.uploadUnNotice(noticeArr)
				that.$refs.popup.close()
			},
			readOneNotice (noticeId) {
				let that = this
				let noticeArr = []
				noticeArr.push(noticeId)
				that.uploadUnNotice(noticeArr)
				that.unreadIndex++
			},
			uploadUnNotice (arr) {
				let that = this
				that.$api.index.uploadNotice({
					noticeId: arr,
					userId: uni.getStorageSync('userInfo').userid
				}).then(res => {
					console.log(res);
				}).catch(err => {
					console.log(err);
				})
			}
		},
		onShow() {
			console.log(uni.getStorageSync('token'));
			console.log(uni.getStorageSync('userInfo'));
			let that = this
			that.unreadIndex = 0
			that.noticeList = []
			// 获取公告内容
			that.$api.index.noticeCont().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.noticeList = res.data.data.slice(0, 5)
				} else if (res.data.code == 401) {
					uni.showToast({
						icon: 'none',
						title: '登录状态已过期，请重新登录！',
						success: () => {
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}
			}).catch(err => {
				console.log(err);
			})
			// 获取待办事项
			that.$api.index.waitDo().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.waitList = res.data.data
				}
			}).catch(err => {
				console.log(err);
			})
			// 获取关键数据
			that.$api.index.keyData().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.todayDatas = res.data.data
				}
			}).catch(err => {
				console.log(err);
			})
			// 获取已用模块
			that.$api.authManage.fetchIsUsing({
				userId: uni.getStorageSync('userInfo').userid
			}).then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.isUsingList = res.data.data
					console.log(that.isUsingList);
				}
			}).catch(err => {
				console.log(err);
			})
			// 获取公司名称
			let dept = uni.getStorageSync('userInfo').sysUser.dept.ancestors
			if (dept == null) {
				uni.setStorageSync('companyName', '')
			} else {
				that.$api.index.fetchCompanyName({
					ancestors: dept
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) uni.setStorageSync('companyName', res.data.msg)
				}).catch(err => {
					console.log(err);
				})
			}
			// 获取通知公告
			that.$api.index.fetchNotice().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					if (res.data.data.length != 0) {
						res.data.data.forEach(item => {
							item.noticeContent = that.extractTextFromHTML(item.noticeContent)
						})
						that.unreadList = res.data.data
						console.log(that.unreadList);
						that.openPopup()
					} else {
						console.log('无未读公告');
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}
			}).catch(err => {
				console.log(err);
			})
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			if (e.text == '权限') {
				uni.navigateTo({
					url: '/pages/authManage/authManage'
				})
			} else if (e.text == '扫一扫') {
				uni.scanCode({
					success: (res) => {
						console.log(res);
						const fixedRes = res.result.split('=')[1]
						console.log(fixedRes);
						uni.navigateTo({
							url: `/pages/indexScan/indexScan?scan=${fixedRes}`
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	body{
		background: url('/static/bgd.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.upper-user{
		width: 85%;
		margin: 8vh auto;
		margin-bottom: 0;
		box-sizing: border-box;
		padding: 15rpx;
		display: flex;
		.user-lef{
			width: 15%;
			height: 6vh;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.user-rig{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			box-sizing: border-box;
			padding-left: 20rpx;
			view{
				width: 100%;
				color: #fff;
			}
			view:first-child{
				font-size: 18px;
			}
			view:last-child{
				font-size: 12px;
				letter-spacing: 6rpx;
			}
		}
	}
	.sliders{
		width: 85%;
		height: 5vh;
		margin: 4vh auto;
		margin-bottom: 2vh;
		border-radius: 15rpx 15rpx 0 0;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(2px);
		border: 1px solid #B3D3FF;
		padding: 1.3vh 0;
		display: flex;
		view{
			width: 25%;
			height: 100%;
			border-right: 1px solid #CDE2FF;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			color: #fff;
			h2{
				font-size: 22px;
			}
			span{
				font-size: 12px;
			}
		}
		view:last-child{
			border-right: none;
		}
	}
	.sections{
		width: 90%;
		margin: 15rpx auto;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding-top: 2vh;
		view{
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 2vh;
			image{
				width: 50%;
				height: 6vh;
				margin-bottom: 10rpx;
			}
			span{
				font-size: 20rpx;
			}
		}
	}
	.wait-do{
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		view{
			width: 48%;
			height: 13vh;
			margin-bottom: 15rpx;
			border-radius: 15rpx;
			box-sizing: border-box;
			padding: 25rpx;
			h4{
				margin-bottom: 5rpx;
				font-size: 22px;
			}
			h5{
				font-weight: normal;
				font-size: 14px;
			}
		}
		.llsp{
			background: url('/static/llsp.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.tlsp{
			background: url('/static/tlsp.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.bfsh{
			background: url('/static/bfsh.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.sysh{
			background: url('/static/sysh.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}
	.single-notice{
		width: 100%;
		margin: 0 auto;
		border-bottom: 1px solid #DEE3EA;
		box-sizing: border-box;
		padding: 20rpx 5%;
		display: flex;
		background-color: #fff;
		.notice-lef{
			width: 12%;
			height: 5.5vh;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.notice-rig{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			box-sizing: border-box;
			padding-left: 20rpx;
			h4{
				font-size: 14px;
			}
			h5{
				font-size: 12px;
				color: #8F9298;
				font-weight: normal;
			}
		}
	}
	.popup{
		width: 80vw;
		height: 90vh;
		background-color: #fff;
		border-radius: 15rpx;
		overflow-y: auto;
		background: linear-gradient(#D9E7FE, #fff, #fff, #fff);
		.pop-top{
			width: 100%;
			height: 5vh;
			box-sizing: border-box;
			padding: 0 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.unread-notice{
			width: 85%;
			margin: 40rpx auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			.tit{
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.info{
				width: 100%;
				view{
					margin-bottom: 15rpx;
				}
				view:last-child{
					margin-bottom: 0;
				}
			}
			.read-one{
				width: 40%;
				margin: 40rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				border-radius: 15rpx;
				padding: 10rpx 0;
				background-color: #3788FF;
				color: #fff;
			}
		}
	}
</style>
