<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 @click="allgetLi()" class="flex-center-center" style="flex: 1;">全部</view>
				<view @click="showZone = true" class="flex-center-center" style="flex: 1;">{{zone==''?'区域':zone}}</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 v-for="(item,index) in list" :key="index">
					<view class="publicRestroomsList" @click="clickDetails(item)">
						<view class="restroomsList">
							<view class="restroomsItem">
								<view class="hread">
									<view>
										<image class="toilets" src="../../static/ic_public_toilets.png"></image>
									</view>
									<view>
										<view>{{item.toiletId}}公厕</view>
										<view>{{item.region}}</view>
									</view>
								</view>
								<view>
									<view class="personnelInformation" @click.stop="toggleComponent">管理人员信息</view>
									<view class="">
										<!-- v-if="!showComponent" -->
										<view class="manager">
											<view class="mangerTitle">管理人员：</view>
											<view>{{item.managerName}}</view>
										</view>
										<view class="phone">
											<view class="mangerTitle">联系方式：</view>
											<view>{{item.managerContact}}</view>
										</view>
									</view>
								</view>
							</view>
							<u-line class="line" length="100%"></u-line>
							<view class="equipment" v-for="(itom,iodex) in item.equipmentBindings">绑定设备：{{itom}}</view>
							<u-line class="line" length="100%"></u-line>
							<view class="viewEdit">
								<view></view>
								<view class="viewEditStyle">
									<view class="view" @click.stop="ondelete(item)">删除</view>
									<view @click.stop="editClick(item)">编辑</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</scroll-view>
			<u-popup :show="deleteshow" @close="deleteclose" @open="deleteopen" mode="center">
				<view class="deleteview">
					<image src="../../static/hoem/ic_close.png" mode="" @click.stop="deleteclose"></image>
					<view class="title">删除{{actdata.toiletId}}公厕</view>
					<text>确认删除公厕：{{actdata.toiletId}}吗？</text>
					<view class="btn" @click="deletefn">确认删除</view>
					<view class="back"></view>
				</view>
			</u-popup>
			<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-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>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zone: '',
				showZone: false,
				zoneList: [
					['中原区', '二七区', '管城回族区', "金水区", "上街区", "惠济区"]
				],
				showTimeStart: false,
				showTimeEnd: false,
				timeStart: Number(new Date()),
				timeEnd: Number(new Date()),
				timeStartValue: '',
				timeEndValue: '',
				name: '',
				number: '',
				show: false,
				list: [],
				deleteshow: false,
				actdata: {}
			}
		},
		onLoad(data) {
			console.log(data)
		},
		onShow() {
			this.getList()
			this.getZone()
		},
		methods: {
			allgetLi(){
				this.timeStartValue = '';
				this.timeEndValue = '';
				this.zone = '';
				this.name = '';
				this.number = '';
				this.getList();
			},
			clickDetails(item){
				uni.navigateTo({
					url: '/pages/publicToiletsDetails/publicToiletsDetails?id=' + item.id
				})
			},
			deletefn(){
				let arr = [];
				arr.push(this.actdata.id)
				const params = {
					url: '/app/system/toilets/delete',
					data: {
						ids: arr
					},
				}
				this.$request(params).then(res => {
					this.getList();
					this.deleteclose();
				})
			},
			ondelete(item){
				this.actdata = item;
				this.deleteshow = true;
			},
			deleteclose() {
				this.deleteshow = false;
			},
			deleteopen() {
				this.deleteshow = true;
			},
			editClick(item) {
				uni.navigateTo({
					url: '/pages/index/addPublicToilets?type=2&id=' + item.id + '&toiletId=' + item.toiletId
				})
			},
			//获取区域列表数据
			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)
					}
				})
			},
			//公厕列表
			getList() {
				const params = {
					url: '/app/system/toilets/list',
					data: {
						starttime: this.timeStartValue,
						endtime: this.timeEndValue,
						region: this.zone,
						managerName: this.name,
						toiletId: this.number,
					},
				}
				this.$request(params).then(res => {
					this.list = res.rows
				})
			},
			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)
			},
			onZone(e) {
				this.zone = e.value[0]
				this.showZone = false
				this.getList()
			},
			onCz() {
				this.timeStartValue = ''
				this.timeEndValue = ''
				this.name = ''
				this.number = ''
				this.getList()
			},
			onSx() {
				this.getList()
			}

		}
	}
</script>

<style lang="scss" scoped>
	/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;

		/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;

			.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;
			}
		}

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

			.publicRestroomsList {
				margin-top: 20rpx;

				.line {
					padding-top: 25rpx;
				}
			}

			.manager {
				display: flex;
				font-size: 24rpx;

				.mangerTitle {
					color: #999999;
				}
			}

			.phone {
				display: flex;
				font-size: 24rpx;

				.mangerTitle {
					color: #999999;
				}
			}

			.restroomsList {
				padding: 20rpx;
				background: #FFFFFF;
				border-radius: 14rpx 14rpx 14rpx 14rpx;

				.equipment {
					font-family: Microsoft YaHei, Microsoft YaHei;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-bottom: 15rpx;
				}
				.viewEdit {
					display: flex;
					justify-content: space-between;

					.viewEditStyle {
						display: flex;
						color: #FB262A;
						font-size: 24rpx;
						font-weight: 800;

						.view {
							padding-right: 77rpx;
						}
					}
				}

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

					.personnelInformation {
						display: block;
						color: #266DFB;
						font-weight: 800;

					}

					.hread {
						display: flex;
						width: 50%;

						.toilets {
							padding: 10rpx;
							width: 75rpx;
							height: 75rpx;
						}
					}
				}
			}

		}

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


	}
</style>