<template>
	<view>
		<view class="tabar">
			<text class="tabText">
				取纸机监控
			</text>
		</view>
		<view class="main">
			<view>

				<view class="number_devices">
					<view class="number">
						<view class="text">{{alldata.normalCount}}</view>
						<view class="number_title">
							<image class="take_paper" src="../../static/hoem/ic_take_paper.png"></image>
							<text class="title">
								设备总数(个)
							</text>
						</view>
					</view>

					<view class="give_alarm_number">
						<view class="text">{{alldata.exceptionCount}}</view>
						<view class="number_title">
							<image class="take_paper" src="../../static/hoem/ic_take_paper.png"></image>
							<text class="title">
								告警总数(个)
							</text>
						</view>

					</view>

				</view>
			</view>
			<!-- 通知栏 -->
			<view class="notifyBar" style="height: 100rpx;">
				<swiper class="swiper" autoplay>
					<swiper-item v-for="(item, index) in Knowledge" :key="index">
						<view class="" style="display: flex;align-items: center;">
							<image class="notifyBarImg" src="../../static/hoem/ic_NotifyBar.png"></image>
							<text class="notifyTile">【通知】</text>
							<text class="notifyContent">
								{{item.toiletId}}号设备
								<text v-if="item.notificationStatus == 1">主动下线</text>
								<text v-if="item.notificationStatus == 2">用纸预警</text>
								<text v-if="item.notificationStatus == 3">异常警告</text>
								提醒
							</text>
							<text class="notifyOnClick" @click="topositioning('/pages/home_index/positioning')">去处理
								></text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 地区设备耗纸数量 -->
			<view class="paperConsumption">
				<view class="consumptionTitle">
					<view class="icon"> </view>
					<text class="title">设备耗纸统计</text>
					<text class="seeMore" @click="seeMoreClick">查看更多 > </text>
				</view>
				<view class="Grid">
					<view class="Grid-Item" v-for="(item,index) in Paperdata.slice(0,6)" :key="index">
						<view class="address">{{item.region}} {{item.equipmentId}}</view>
						<view>
							<view class="consumeNumber">{{item.allLength}}</view>
							<view>
								<text class="consumeNumberText">
									耗纸总数
								</text>
							</view>

						</view>
					</view>
				</view>

			</view>

			<view class="agencyList">
				<view class="axlfex">
					<view class="left" @click="index=0" :class="index==0 ? 'active' : ''">
						待办工单
					</view>
					<view class="right" @click="index=1" :class="index==1 ? 'active' : ''">
						待巡查
					</view>
				</view>
				<view v-if="index==0">
					<view class="todolist" v-for="(item,index) in representative.slice(0,3)" :key="index">
						<view class="itmeTitle"> {{item.toiletId}}公厕待补纸 <view class="done"
								@click="$wskj.to('/pages/index/buzhi')"> 去补纸</view>
						</view>
						<view class="todoItemTime">
							<image class="icTime" src="../../static/hoem/ic_time.png"></image>
							<text class="textTime">设备编号：{{item.equipmentId}}</text>
						</view>
						<view class="todoItemTime">
							<image class="icTime" src="../../static/hoem/ic_time.png"></image>
							<text class="textTime">缺纸时间：{{item.nopaperTime}}</text>
						</view>
					</view>
					<view class="flex-center-center fs-20">
						<text style="color: #999; padding-top: 20rpx;" @click="$wskj.to('/pages/index/buzhi')">查看更多 >
						</text>
					</view>

				</view>
				<view v-if="index==1">
					<view class="todolist" v-for="(item,index) in waitCheckList" :key="index">
						<view class="itmeTitle"> {{item.apartmentCode}}公厕待巡查 <view class="done"
								@click="$wskj.to('/pages/index/gcdxc')"> 巡查</view>
						</view>
						<view class="todoItemTime">
							<image class="icTime" src="../../static/hoem/ic_time.png"></image>
							<text class="textTime">待巡查时间：{{item.inspectionTime}}</text>
						</view>
						<view class="todoItemTime">
							<image class="icTime" src="../../static/hoem/ic_people.png"></image>
							<text class="textTime">巡查人员：{{item.setInspectors}}</text>
						</view>
					</view>
					<view class="flex-center-center fs-20">
						<text style="color: #999; padding-top: 20rpx;" @click="$wskj.to('/pages/index/gcdxc')">查看更多 >
						</text>
					</view>
				</view>
			</view>
			<view class="inspectionRecords">
				<view class="consumptionTitle">
					<view class="inspection">
						<view class="icon"> </view>
						<text class="title">公厕巡查记录</text>
					</view>
					<text class="seeMore" @click="$wskj.to('/pages/index/gcxcjl')">查看更多 > </text>
				</view>

				<view class="inspectionRecordsItem" v-for="(item,index) in checkList" :key="index"
					@click="itemClick(item)">
					<view class="inspectionTitle">{{item.apartmentCode}}公厕巡查记录 <view class="done"> 完成</view>
					</view>
					<view class="inspectionRecordsTime">
						<image class="icTimer" src="../../static/hoem/ic_time.png"></image>
						<text class="inspectime">最近巡查：{{item.updatedAt}}</text>
					</view>
					<view class="people">
						<image class="icTimer" src="../../static/hoem/ic_people.png"></image>
						<text class="inspectime">巡查人员：{{item.setInspectors}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="notifyshow" @close="notifclose" @open="notifopen" mode="center">
			<view class="deleteview" v-if="Noticelist.length">
				<image src="../../static/hoem/ic_close.png" mode="" @click.stop="notifclose"></image>
				<view class="title">{{Noticelist[0].noticeTitle}}</view>
				<!-- <text>{{Noticelist[0].noticeContent}}</text> -->
				<view class="richtext">
					<rich-text :nodes="Noticelist[0].noticeContent"></rich-text>
				</view>
				<view class="btn" @click="notiffn">我知道了</view>
				<view class="back"></view>
			</view>
		</u-popup>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				waitCheckList: [],
				checkList: [],
				index: 0,
				value4: 0,
				tab: [{
						name: '待办工单'
					},
					{
						name: '待巡查'
					}
				],
				Paperdata: [],
				alldata: {},
				representative: [],
				Noticelist: [],
				notifyshow: false,
				Knowledge: []
			}
		},
		onLoad() {

		},
		onShow() {
			this.getUserInfo()
			this.getWaitCheckList()
			this.getCheckList();
			this.getEquipentpaper();
			this.getEquipentstaus();
			this.paperToBeReplenished();
			this.allequipmentstatus();
		},
		methods: {
			allequipmentstatus() {
				const params = {
					url: '/sun/mqtt/allequipmentstatus',
					data: {},
				}
				this.$request(params).then(res => {
					let arr = [];
					res.rows.forEach((item, index) => {
						if (item.notificationStatus == 1 || item.notificationStatus == 2 || item
							.notificationStatus == 3) {
							arr.push(item)
						}
					});
					this.Knowledge = arr;
				})
			},
			notifclose() {
				this.notifyshow = false;
			},
			notifopen() {
				this.notifyshow = true;
			},
			notiffn() {
				const params = {
					url: '/system/clock/editlistByUser',
					data: {
						"noticeId": this.Noticelist[0].noticeId,
						"userId": uni.getStorageSync('userId')
					},
				}
				this.$request(params).then(res => {
					this.notifyshow = false;
				})
			},
			// 获取公告
			getlistByUser() {
				const params = {
					url: '/sun/mqtt/listByUser',
					data: {
						userId: uni.getStorageSync('userId')
					},
				}
				this.$request(params).then(res => {
					this.Noticelist = res.data;
					if (res.data.data != 1) {
						this.notifyshow = true;
					}
				})
			},
			// 代办工单
			paperToBeReplenished() {
				const params = {
					url: '/sun/mqtt/paperToBeReplenished',
					data: {},
				}
				this.$request(params).then(res => {
					this.representative = res.data;
				})
			},
			// 预警总数
			getEquipentstaus() {
				const params = {
					url: '/sun/mqtt/getEquipentstaus',
					data: {},
				}
				this.$request(params).then(res => {
					this.alldata = res.data;

				})
			},
			// 耗纸统计
			getEquipentpaper() {
				const params = {
					url: '/sun/mqtt/getEquipentpaper',
					data: {},
				}
				this.$request(params).then(res => {
					this.Paperdata = res.data;
				})
			},
			getUserInfo() {
				const params = {
					url: '/getInfo',
					data: {},
					method: 'GET',
				}
				this.$request(params).then(res => {
					uni.setStorageSync('userId', res.user.userId);
					this.getlistByUser();
				})
			},
			//公厕待巡查日志列表
			getWaitCheckList() {
				const params = {
					url: '/system/inspections/list',
					data: {
						inspectorId: uni.getStorageSync("userId"),
						status: '0'
					},
				}
				this.$request(params).then(res => {
					this.waitCheckList = res.rows
					if (this.waitCheckList.length > 3) {
						this.waitCheckList = this.waitCheckList.slice(0, 3)
					}
				})
			},
			//巡查记录列表
			getCheckList() {
				const params = {
					url: '/system/inspections/list',
					data: {
						inspectorId: uni.getStorageSync("userId"),
						status: '1'
					},
				}
				this.$request(params).then(res => {
					this.checkList = res.rows
					if (this.checkList.length > 2) {
						this.checkList = this.checkList.slice(0, 3)
					}
				})
			},
			topositioning(e) {
				uni.switchTab({
					url: e
				})
			},
			seeMoreClick() {
				uni.navigateTo({
					url: '/pages/devicesStatistics/devicesStatistics'
				})
			},
			inspectionRecords() {
				uni.navigateTo({
					url: '/pages/devicesStatistics/inspectionRecords'
				})
			},
			itemClick(item) {
				this.$wskj.to('/pages/publicToiletsDetails/publicToiletsDetails?id=' + item.toiletId)
			}

		}
	}
</script>

<style lang="scss">
	/deep/ .uni-swiper {
		width: 100%;
		height: 88rpx;
	}

	.swiper {
		width: 100%;
		height: 88rpx;
	}

	.main {
		padding: 24rpx;
		background-color: #F8F4F4;
		padding-bottom: 120rpx;

		.done {
			padding-right: 18rpx;
			padding-top: 3rpx;
			padding-bottom: 3rpx;
			padding-left: 18rpx;
			background: linear-gradient(90deg, #FCD4D2 0%, #FB262A 100%);
			box-shadow: 0rpx 3rpx 6rpx 1rpx #FFC5C5;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			color: white;
			font-weight: 400;
			font-size: 24rpx;
		}

		.inspectionRecords {
			padding: 20rpx;
			margin-top: 20rpx;
			background: linear-gradient(180deg, #FDEDEE 0%, #FFFFFF 100%);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			border: 2rpx solid #FFFFFF;

			.inspectionRecordsItem {
				padding: 20rpx;
				margin-top: 20rpx;
				background: linear-gradient(90deg, #FDEEEF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 0rpx 6rpx 1rpx #FFC6C7;
				border-radius: 8rpx 8rpx 8rpx 8rpx;


				.inspectionTitle {
					font-size: 28rpx;
					font-weight: 800;
					display: flex;
					justify-content: space-between;
				}

				.people {
					display: flex;
					align-items: center;
					margin-top: 20px;

					.inspectime {
						padding-left: 10rpx;
						color: #666666;
						font-size: 24rpx;
					}

					.icTimer {

						width: 32rpx;
						height: 32rpx;
					}
				}

				.inspectionRecordsTime {
					display: flex;
					align-items: center;
					margin-top: 20px;

					.inspectime {
						padding-left: 10rpx;
						color: #666666;
						font-size: 24rpx;
					}

					.icTimer {

						width: 32rpx;
						height: 32rpx;
					}
				}

			}

			.consumptionTitle {
				margin-top: 20rpx;
				display: flex;
				margin-left: 15rpx;
				justify-content: space-between;

				.seeMore {
					color: #999999;
					font-size: 20rpx;
					margin-right: 10rpx;
					margin-left: 3rpx;

				}

				.inspection {
					display: flex;

					.title {
						font-weight: 800;
						font-size: 28rpx;

					}

					.icon {
						width: 10rpx;
						height: 37rpx;
						background: #FB262A;
						border-radius: 3rpx 3rpx 3rpx 3rpx;
					}
				}
			}

		}

		.agencyList {
			margin-top: 20rpx;
			// height: 614rpx;
			// width: 703rpx;
			display: block;
			padding: 20rpx;
			background: linear-gradient(180deg, #FEF3F4 0%, #FFFFFF 100%);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			border: 2rpx solid #FFFFFF;

			.axlfex {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 20upx;
			}

			.axlfex .left {
				padding: 5px;
			}

			.axlfex .right {
				padding: 5px;
			}

			.active {
				border-bottom: 3px solid #DC4A61;
				border-radius: 3px;
				font-size: 17px;
				font-weight: bold;
			}

			.todoItemTime {
				display: flex;
				align-items: center;
				padding-top: 30upx;

				.textTime {
					font-size: 24rpx;
				}

			}

			.icTime {
				height: 32rpx;
				width: 32rpx;
				margin-right: 10rpx;
			}

			.itmeTitle {
				justify-content: space-between;
				display: flex;
				font-weight: 800;
				font-size: 28rpx;

			}

			.todolist {
				margin-top: 20rpx;
				background: linear-gradient(90deg, #FDEEEF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 0rpx 6rpx 1rpx #FFC6C7;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 20rpx;
			}
		}

		.Grid {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;

			.Grid-Item {
				width: 320rpx;
				// height: 156rpx;
				margin-top: 10rpx;
				border: 1rpx solid #ccc;
				padding-left: 16rpx;
				box-sizing: border-box;
				padding-bottom: 16rpx;

				&:nth-child(odd) {
					background: linear-gradient(180deg, #D2D2FC 0%, #EBEFF7 100%);
					box-shadow: inset 0rpx 0rpx 6rpx 1rpx #8AB7FF;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
				}

				&:nth-child(even) {
					background: linear-gradient(180deg, #D2F6FC 0%, #EBF5F7 100%);
					box-shadow: inset 0rpx 0rpx 6rpx 1rpx #8AB7FF;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					margin-left: 20rpx;
				}

				.address {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					margin-top: 14rpx;

				}
			}

			.consumeNumber {
				color: #333333;
				margin-top: 14rpx;
				font-size: 28rpx;
				font-weight: 800;
			}

			.consumeNumberText {
				color: #999999;
				margin-top: 14rpx;
				font-size: 20rpx;
			}
		}

		.paperConsumption {
			width: 702rpx;
			// height: 800rpx;
			background: linear-gradient(180deg, #FDEDEE 0%, #FFFFFF 100%);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			border: 2rpx solid #FFFFFF;
			margin-top: 20rpx;

			.seeMore {
				color: #999999;
				font-size: 20rpx;
				margin-right: 10rpx;
				margin-left: 387rpx;

			}

			.consumptionTitle {
				margin-top: 20rpx;
				display: flex;
				margin-left: 15rpx;
			}

			.title {
				font-weight: 800;
				font-size: 28rpx;
			}

			.icon {
				width: 10rpx;
				height: 37rpx;
				background: #FB262A;
				border-radius: 3rpx 3rpx 3rpx 3rpx;
			}
		}

		.notifyBar {
			display: flex;
			margin-top: 20rpx;
			width: 703rpx;
			height: 103rpx;
			background: #FDEDEE;
			border-radius: 14rpx 14rpx 14rpx 14rpx;

			.notifyBarImg {
				padding-left: 15rpx;
				// margin-top: 23rpx;
				height: 58rpx;
				width: 58rpx;
				position: relative;
				top: 0;
			}

			.notifyContent {
				width: 330rpx;
				// margin-top: 33rpx;
				font-size: 24rpx;
			}

			.notifyTile {
				// margin-top: 33rpx;
				color: #999999;
				font-size: 28rpx;
				font-weight: 800;
			}

			.notifyOnClick {
				margin-top: 33rpx;
				margin-left: 40rpx;
				color: #FB262A;
			}
		}

		.title {
			margin-left: 10rpx;
		}

		.number_devices {
			display: flex;
			width: 702rpx;
			background: #FDEDEE;
			margin-top: -100rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			border: 2rpx solid #FFFFFF;
			height: 168rpx;
			align-items: center;


			.number {
				display: block;
				margin-left: 104rpx;

				.text {
					font-weight: 600;
					font-size: 36rpx;
					margin-left: 60rpx;
				}

				.number_title {
					display: flex;
					margin-top: 11rpx;
					font-size: 24rpx;
					justify-content: center;
				}

				.take_paper {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.give_alarm_number {
				display: block;

				.take_paper {
					width: 32rpx;
					height: 32rpx;
				}

				.text {
					font-weight: 600;
					font-size: 36rpx;
					margin-left: 200rpx;
				}

				.number_title {
					margin-left: 124rpx;
					display: flex;
					font-size: 24rpx;
					justify-content: center;
					margin-top: 11rpx;
				}
			}
		}

	}

	.tabar {
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		background: linear-gradient(91deg, #FCD4D2 0%, #FDEDEE 100%);
		height: 253rpx;
		justify-content: center;
		display: flex;
		font-size: 36rpx;
		font-weight: 800;
		padding-top: 60rpx;

		.tabText {
			margin-top: 40rpx;
			justify-content: center;
			display: flex;
		}

	}

	/deep/.u-popup__content {
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.deleteview {
		width: 634rpx;
		height: 439rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		position: relative;
		padding: 18rpx 24rpx;
		box-sizing: border-box;
		text-align: center;
		text-align: center;
		.richtext{
			height: 140rpx;
			overflow: hidden;
		}

		.back {
			width: 634rpx;
			height: 156rpx;
			background: linear-gradient(180deg, #FDEDEE 0%, #FFFFFF 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			position: absolute;
			left: 0;
			top: 0;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			position: relative;
			z-index: 99;
			position: absolute;
			right: 24rpx;
			top: 18rpx;
		}

		.title {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			position: relative;
			z-index: 9;
			padding-top: 40rpx;
			margin-bottom: 90rpx;
		}

		text {
			display: block;
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			position: relative;
			z-index: 9;
			margin-bottom: 73rpx;
		}

		.btn {
			position: relative;
			z-index: 9;
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			width: 302rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, #FCD4D2 0%, #FB262A 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin: 0 auto;
		}
	}
</style>