<template>
	<view class="main">
		<view class="tabar">
			<view class="title">
				<view>巡查管理</view>
				<view class="positioning">Patrol management</view>
			</view>
			<view class="">
				<image class="earlyWarning" src="../../static/hoem/ic_patrol.png"></image>
			</view>
		</view>
		<view class="bgMian">
			<view class="inspectionInformation">
				<view class="inspectionSetup" @click="onclickAddPublicToiets">
					<view>
						<image class="icSettings" src="../../static/hoem/ic_settings.png"></image>
					</view>
					<view class="title">添加公厕</view>
					<view class="enTitle">Inspection setup</view>
				</view>
				<view class="inspectionRecords" @click="$wskj.to('/pages/index/gclb')">
					<view>
						<image class="icSettings" src="../../static/hoem/ic_records.png"></image>
					</view>
					<view class="title">公厕列表</view>
					<view class="enTitle">Inspection setup</view>
				</view>
			</view>
			<view class="inspectionLog">
				<view class="consumptionTitle">
					<view class="inspection">
						<view class="icon"> </view>
						<text class="title">待巡查日志</text>
					</view>
					<text class="seeMore" @click="$wskj.to('/pages/index/gcdxc')">查看更多 > </text>
				</view>

				<view class="inspectionLogItem" v-for="(item,index) in waitCheckList" :key="index" @click="$wskj.to('/pages/index/gcdxc')">
					<view class="item">
						<view class="inspectionTitle">
							{{item.toiletId}}公厕待巡查
						</view>
						<view class="butPatrol">
							巡查
						</view>
					</view>
					<view class="todoItemTime">
						<image class="icTime" src="../../static/hoem/ic_time.png"></image>
						<text class="textTime">待巡查时间：{{item.inspectionTime}}</text>
					</view>
				</view>
			</view>

			<view class="patrolRecord">
				<view class="inspection">
					<view class="icon"> </view>
					<text class="title">巡查记录</text>
					<view style="flex: 1;"></view>
					<text class="fs-20" style="color: #999;" @click="$wskj.to('/pages/index/gcxcjl')">查看更多></text>
				</view>
				<view class="patrolRecordItem" v-for="(item,index) in checkList" :key="index">
					<view class="item">
						<view class="info">
							<image class="hread" src="../../static/hoem/ic_hread.png"></image>
							<view class="title">
								<view class="toiletName">{{item.toiletId}}公厕</view>
								<view class="devicesName">设备：{{item.equipmentId}}</view>
							</view>

						</view>
						<view class="toInspected"> 已巡查</view>
						<view class="patrolTime"> 巡查时间：{{item.inspectionTime}}</view>
						<view class="patrolTime"> 巡查人员：{{item.inspector}}</view>
						<view class="patrolTime"> 巡查区域：{{item.inspectionArea}}</view>
						<view class="patrolPicture">
							<view>巡查照片：</view>
							<view v-for="(sitem,sindex) in item.inspectionFileS" :key="index">
								<image class="picture" :src="sitem"></image>
							</view>
						</view>

					</view>

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

	</view>
</template>

<script>
	export default {
		data() {
			return {
				waitCheckList: [],
				checkList: [],

			}
		},
		onShow() {
			this.getWaitCheckList()
			this.getCheckList()
		},
		methods: {
			//公厕待巡查日志列表
			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, 2)
					}
				})
			},
			onclickAddPublicToiets() {
				uni.navigateTo({
					url: '/pages/index/addPublicToilets?type=1'
				})
			},
			listRecords() {
				uni.navigateTo({
					url: '/pages/publicRestroomsList/publicRestroomsList'
				})
			},

		}
	}
</script>

<style lang="scss">
	.main {
		background: #F8F4F4;

		.bgMian {
			padding: 24rpx;

			.patrolRecord {
				.patrolRecordItem {
					position: relative;
					padding: 20rpx;
					margin-top: 20rpx;
					background: #FFFFFF;
					border-radius: 14rpx 14rpx 14rpx 14rpx;

					.item {
						margin-top: 20rpx;
						justify-content: space-between;

						.patrolPicture {
							margin-top: 10rpx;
							display: flex;
							font-size: 24rpx;
							color: #666666;

							.picture {

								width: 168rpx;
								height: 126rpx;
								border-radius: 5rpx 5rpx 5rpx 5rpx;
							}
						}

						.patrolTime {
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #666666;
						}

						.toInspected {
							width: 125rpx;
							height: 54rpx;
							text-align: center;
							color: #999999;
							font-size: 24rpx;
							align-items: center;
							line-height: 54rpx;
							position: absolute;
							top: 0%;
							right: 0%;
							background: #E3E3E3;
							border-radius: 0rpx 14rpx 0rpx 0rpx;
						}

						.info {
							display: flex;

							.title {
								padding-left: 10rpx;

								.toiletName {
									color: #333333;
									font-size: 28rpx;
									font-weight: 700;
								}

								.devicesName {
									color: #999999;
									font-size: 24rpx;
								}

							}

							.hread {
								width: 75rpx;
								height: 75rpx;
							}
						}
					}

				}

				.inspection {
					display: flex;
					margin-top: 20rpx;

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

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

			}

			.inspectionLog {

				background: linear-gradient(180deg, #FDEDEE 0%, #FFFFFF 100%);
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				border: 2rpx solid #FFFFFF;
				padding: 24rpx;
				margin-top: 20rpx;
				min-height: 145rpx;

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

					.item {
						display: flex;
						justify-content: space-between;

						.inspectionTitle {
							font-family: Microsoft YaHei, Microsoft YaHei;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}

						.butPatrol {
							width: 84rpx;
							height: 37rpx;
							font-size: 24rpx;
							text-align: center;
							background: linear-gradient(90deg, #FCD4D2 0%, #FB262A 100%);
							box-shadow: 0rpx 3rpx 6rpx 1rpx #FFC5C5;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							color: white;
						}
					}

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

						.textTime {
							color: #666666;
							font-size: 24rpx;
						}

					}

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

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

					}
				}

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

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

					}

					.inspection {
						display: flex;

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

						}

						.icon {

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

			.inspectionInformation {
				display: flex;
				padding: 24rpx;
				margin-top: -100rpx;
				justify-content: space-between;

				.inspectionSetup {
					width: 340rpx;
					height: 221rpx;
					background: #FDEDEE;
					box-shadow: inset 0rpx 0rpx 10rpx 1rpx #FF8B85;
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					border: 2rpx solid #FFFFFF;
					text-align: center;
					padding-top: 20rpx;

				}

				.inspectionRecords {
					width: 340rpx;
					height: 221rpx;
					background: #FDEDEE;
					box-shadow: inset 0rpx 0rpx 10rpx 1rpx #FF8B85;
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					border: 2rpx solid #FFFFFF;
					text-align: center;
					padding-top: 20rpx;
				}

				.title {
					font-family: Microsoft YaHei, Microsoft YaHei;
					font-weight: 800;
					font-size: 30rpx;

					color: #333333;
					line-height: 60rpx;
				}

				.icSettings {
					width: 72rpx;
					height: 72rpx;
				}

				.enTitle {
					font-family: Microsoft YaHei, Microsoft YaHei;
					font-weight: 400;
					font-size: 24rpx;
					color: #C8BCBD;
					line-height: 60rpx;
				}
			}
		}

		.tabar {
			display: flex;
			justify-content: space-between;
			text-align: center;
			padding: 55rpx;
			background: linear-gradient(91deg, #FCD4D2 0%, #FDEDEE 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;


			.title {
				color: #333333;
				font-size: 36rpx;
				font-weight: 800;
			}

			.positioning {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 17rpx;
				color: #333333;
				line-height: 43rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.earlyWarning {
				width: 274rpx;
				height: 164rpx;
			}
		}
	}
</style>