<template>
	<view class="container">
		<view class="tabar">
			<view class="flex pad-20 fs-36" style="align-items: center;font-weight: bold;">
				<image class="wh-36" src="../../static/hoem/icon_back.png" @click="$wskj.goBack(1)"></image>
				<view>公厕待巡查日志</view>
			</view>
			<view class="flex h-90">
				<view class="flex-center-center" style="flex: 1;">全部</view>
				<view class="flex-center-center" style="flex: 1;" @click="show=true">
					<text>筛选</text>
					<image class="wh-18 ml-10" src="../../static/icon_sx.png"></image>
				</view>
			</view>
		</view>
		<view class="bgList">
			<scroll-view scroll-y style="height: 100%;">
				<view class="inspectionList" v-for="(item,index) in list" :key="index">
					<view class="toiletInfo">
						<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.equipmentBinding}}</view>
							</view>
						</view>
					</view>
					<u-line class="line" length="90%"></u-line>

					<view class="inspectionInfo">
						<text>巡查时间：{{item.inspectionTime}}</text>
					</view>
					<view class="people">
						<text>巡查人员：{{item.inspector}}</text>
					</view>
					<u-line class="line" length="90%"></u-line>

					<view class="patrol">
						<view></view>
						<view class="modify" @click="showalret(item)">
							<text>巡查</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<u-popup :show="show" mode="top" @close="show=false" @open="open">
				<view class="pad-20" style="background-color: white;">
					<view class="flex" style="align-items: center;">
						<view @click="showTimeStart=true" class="flex br-10 flex-between-center pad-20"
							style="background-color: #F8F4F4;flex: 1;color: #999;">
							<text>{{ timeStartValue==''?'起始日期':timeStartValue }}</text>
							<image class="wh-36" src="../../static/icon_time.png"></image>
						</view>
						<view class="mlr-20">
							至
						</view>
						<view @click="showTimeEnd=true" class="flex br-10 flex-between-center pad-20"
							style="background-color: #F8F4F4;flex: 1;color: #999;">
							<text>{{ timeEndValue==''?'结束日期':timeEndValue }}</text>
							<image class="wh-36" src="../../static/icon_time.png"></image>
						</view>
					</view>
					<input class=" br-36 mt-20  pad-20 fs-24" style="background: #F8F4F4;color: #999;"
						placeholder="请输入巡查人员姓名搜索" v-model="name" />
					<input class=" br-36 mt-20  pad-20 fs-24" style="background: #F8F4F4;color: #999;"
						placeholder="请输入公厕编号搜索" v-model="number" />
					<view class="flex mt-20" style="align-items: center;">
						<view @click="onCz" class="flex br-40 flex-center-center ptb-20 fs-28"
							style="background-color: #F8F4F4;flex: 1;color: #999;">
							<text>重置</text>
						</view>
						<view @click="onSx" class="flex br-40 flex-center-center ptb-20 fs-28 ml-20"
							style="background: linear-gradient( 90deg, #FCD4D2 0%, #FB262A 100%);;flex: 1;color: white;">
							<text>筛选</text>
						</view>
					</view>
				</view>
			</u-popup>
			<u-popup :show="showSubmit" :rou1d="10" mode="center" @close="showSubmit=false" @open="openSubmit">
				<view class="upopup">
					<view class="popup">
						<view class="close">
							<view></view>
							<view>
								<image @click="showSubmit=false" class="icClose" src="../../static/hoem/ic_close.png">
								</image>
							</view>
						</view>
						<view class="title">上传巡查信息</view>


					</view>
					<view class="region" @click="showZone=true">
						<view>巡查区域</view>
						<view class="editRegion">
							<!-- <input placeholder="选择巡查区域" disabled></input> -->
							<view>{{dataParams.inspectionArea?dataParams.inspectionArea:"选择巡查区域"}}</view>
							<image class="ic_botom" src="../../static/hoem/ic_filter.png"></image>
						</view>
					</view>
					<view class="region" @click="showcont = true;">
						<view style="display: flex;">
							<view>巡查内容</view>
							<view class="prompt">(如：添加厕纸完成)</view>
						</view>

						<view class="editRegion">
							<!-- <input placeholder="选择巡查内容"></input> -->
							<view>{{dataParams.inspectionContent?dataParams.inspectionContent:"选择巡查内容"}}</view>
							<image class="ic_botom" src="../../static/hoem/ic_filter.png"></image>
						</view>
					</view>

					<view class="uploadPicture">
						<view style="margin-bottom: 10rpx;">上传巡查照片</view>
						<!-- <u-upload class="pictureItem" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
							name="1" multiple :maxCount="10"></u-upload> -->
						<upload-image v-model="images" maxCount="3" width="100" height="100" type="fullurl"
							@uploadImages="uploadImages"></upload-image>
					</view>

					<view class="notes">
						<view>备注信息</view>
						<view>
							<u--textarea class="notes_input" v-model="dataParams.notes"
								placeholder="请输入内容"></u--textarea>
						</view>

					</view>
					<view class="butSubmit">
						<view style="margin-top: 30rpx;" @click="onSubmit">
							提交
						</view>
					</view>

				</view>
			</u-popup>
			<u-datetime-picker :show="showTimeStart" v-model="timeStart" mode="date" @close="showTimeStart=false"
				@cancel="showTimeStart=false" @confirm="onTimeStart"></u-datetime-picker>
			<u-datetime-picker :show="showTimeEnd" v-model="timeEnd" mode="date" @close="showTimeEnd=false"
				@cancel="showTimeEnd=false" @confirm="onTimeEnd"></u-datetime-picker>
			<u-picker :show="showZone" :columns="zoneList" :closeOnClickOverlay="true" @close="showZone = false"
				@cancel="showZone = false" @confirm="onZone"></u-picker>
			<u-picker keyName="ruleContent" :show="showcont" :columns="inspeclist" :closeOnClickOverlay="true"
				@close="showcont = false" @cancel="showcont = false" @confirm="oncont"></u-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSubmit: false,
				showTimeStart: false,
				showTimeEnd: false,
				timeStart: Number(new Date()),
				timeEnd: Number(new Date()),
				timeStartValue: '',
				timeEndValue: '',
				name: '',
				number: '',
				show: false,
				list: [],
				images: '',
				zoneList: [
					[]
				],
				showZone: false,
				dataParams: {
					inspectionArea: "", //巡查区域
					inspectionContent: "", //巡查内容
					inspectionFileS: [], //巡查文件id
					notes: "", //备注信息
					id: "",
					status: 1
				},
				actdata: {},
				inspeclist: [
					[]
				],
				showcont: false,
			}

		},
		onLoad() {
			this.getWaitCheckList()
			this.getZone()
			this.getinspectioncont();
		},
		methods: {
			oncont(e) {
				console.log(e)
				this.showcont = false
				this.dataParams.inspectionContent = e.value[0].ruleContent
			},
			//获取巡查内容
			getinspectioncont() {
				const params = {
					url: '/app/system/rule/inspectioncont',
					data: {},
				}
				this.$request(params).then(res => {
					this.inspeclist = [];
					this.inspeclist.push(res.rows)
					console.log(this.inspeclist)
					// this.zoneList[0].length = 0
					// for (var i = 0; i < res.rows.length; i++) {
					// 	this.zoneList[0].push(res.rows[i].name)
					// }
				})
			},
			showalret(item) {
				this.actdata = item;
				this.showSubmit = true;
				this.dataParams.id = item.id;
				this.dataParams.toiletId = item.toiletId;
			},
			onSubmit() {
				this.dataParams.inspectionFileS = [];
				let images = this.images.split(",")
				for (var i = 0; i < images.length; i++) {
					if (images[i].length != 0) {
						this.dataParams.inspectionFileS.push(images[i])
					}
				}
				if (this.dataParams.inspectionArea == 0) {
					this.$u.toast('请选择巡查区域')
					return
				}
				if (this.dataParams.inspectionContent == 0) {
					this.$u.toast('请选择巡查内容')
					return
				}
				if (this.dataParams.notes == 0) {
					this.$u.toast('请输入备注信息')
					return
				}
				if (this.dataParams.inspectionFileS.length == 0) {
					this.$u.toast('请添加公厕照片')
					return
				}
				const params = {
					url: "/system/inspections/edit",
					data: this.dataParams,
				}
				// console.log(this.dataParams)
				// return
				this.$request(params).then(res => {
					this.$u.toast('成功')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 800)
				})
			},

			onZone(e) {
				console.log(e)
				this.showZone = false
				this.dataParams.inspectionArea = e.value[0]
			},
			//获取区域列表数据
			getZone() {
				const params = {
					url: '/system/province/list',
					data: {},
				}
				this.$request(params).then(res => {
					this.zoneList[0].length = 0
					for (var i = 0; i < res.rows.length; i++) {
						this.zoneList[0].push(res.rows[i].name)
					}
				})
			},
			uploadImages(images) {
				console.log(images)
				this.images = images
				console.log(this.images)
			},
			open() {

			},
			openSubmit() {

			},
			//公厕待巡查日志列表
			getWaitCheckList() {
				const params = {
					url: '/system/inspections/list',
					data: {
						inspectorId: uni.getStorageSync("userId"),
						status: '0',
						inspector: this.name,//巡查人员姓名
						toiletId: this.number,//公厕编号
						startTime: this.timeStartValue,//开始时间  
						endTime: this.timeEndValue,//结束时间
					},
				}
				this.$request(params).then(res => {
					this.list = res.rows
					console.log(this.list.length)
				})
			},
			onTimeStart(e) {
				this.showTimeStart = false
				this.timeStartValue = this.$wskj.timeFormat(e.value, 'yyyy-mm-dd')
				console.log(this.timeStartValue)
			},
			onTimeEnd(e) {
				this.showTimeEnd = false
				this.timeEndValue = this.$wskj.timeFormat(e.value, 'yyyy-mm-dd')
				console.log(this.timeEndValue)
			},
			onCz() {
				this.timeStartValue = '';
				this.timeEndValue = '';
				this.name = '';
				this.number = '';
				this.getCheckList();
				this.show = false;
			},
			onSx() {
				this.getWaitCheckList()
				this.show = false;
			}

		}
	}
</script>

<style lang="scss">
	/deep/ .u-fade-enter-active {
		margin-top: 180rpx;
	}

	/deep/ .u-slide-down-enter-active {
		margin-top: 180rpx;
	}

	.container {
		background: linear-gradient(91deg, #FDEDEE 0%, #FFFFFF 100%);
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-top: 60rpx;

		.bgList {
			flex: 1;
			overflow-y: auto;
			padding: 0 24rpx;
			background-color: #F8F4F4;

			.inspectionList {
				display: block;
				padding: 24rpx;
				margin-top: 20rpx;
				background-color: #FFFFFF;
				position: relative;
				border-radius: 14rpx 14rpx 14rpx 14rpx;

				.inspectionInfo {
					display: flex;
					color: #999999;
					font-size: 24rpx;

				}

				.people {
					display: flex;
					color: #999999;
					font-size: 24rpx;
				}

				.line {
					padding: 20rpx;
					padding-right: 15rpx;
				}

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

					.toInspected {
						width: 125rpx;
						height: 54rpx;
						text-align: center;
						color: #FB262A;
						position: absolute;
						top: 0%;
						right: 0%;
						background: #FDEDEE;
						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;
					}
				}

				.patrol {
					display: flex;
					justify-content: space-between;
					padding: 20rpx;

					.modify {
						background: linear-gradient(90deg, #FCD4D2 0%, #FB262A 100%);
						display: flex;
						font-size: 28rpx;
						padding: 5rpx 20rpx;
						color: white;
						border-radius: 5rpx;
					}
				}

			}
		}

		.tabar {
			display: flex;
			flex-direction: column;
			background: linear-gradient(91deg, #FDEDEE 0%, #FFFFFF 100%);
		}

		.upopup {
			height: 1160rpx;

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

				.icClose {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.uploadPicture {
				padding: 24rpx;

				.pictureItem {
					margin-top: 10rpx;
				}
			}

			.butSubmit {
				height: 80rpx;
				background: linear-gradient(90deg, #FCD4D2 0%, #FB262A 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				text-align: center;
				color: white;
				width: 302rpx;
				margin: auto;
				line-height: 80rpx;
			}

			.notes {
				padding-left: 24rpx;
				padding-right: 24rpx;

				.notes_input {
					margin-top: 10rpx;
					background: #F8F4F4;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}
			}

			.popup {
				padding: 24rpx;
				width: 634rpx;
				background: linear-gradient(180deg, #FDEDEE 0%, #FFFFFF 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;



				.title {
					text-align: center;
					font-weight: 800;
					font-size: 30rpx;
					color: #333333;

				}
			}

			.region {
				padding: 24rpx;

				.prompt {
					padding-top: 10rpx;
					padding-left: 10rpx;
					font-size: 24rpx;
					color: #999999;
				}

				.editRegion {
					display: flex;
					margin-top: 10rpx;
					padding: 20rpx;
					align-items: center;
					font-size: 24rpx;
					color: #999999;
					background: #F8F4F4;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					justify-content: space-between;

					.ic_botom {
						width: 18rpx;
						height: 18rpx;
					}
				}

			}
		}

	}
</style>