<template>
	<view class="index-container">
		<z-paging class="paging" ref="paging" use-virtual-list bg-color="#F6F3F3" :loading-more-enabled="false">
			<template #top>
				<view class="search">
					<u-search placeholder="请输入出水口编号" @search="onSearchValue" @custom="onSearchValue"
						@clear="onSearchValue(null)" shape="square"></u-search>
				</view>
			</template>
			<view class="tips">
				<text style="color: red">注意：</text>
				<text>1.选中的开关为有控制权限;</text>
				<view style="float: right;margin-right: 15px;border: 1px solid;">
					<u-button style="height: 25px;" type="primary" size="small" :plain="true" :hairline="true"
						@click="handleChangeAllRow">
						{{ selectAll ? '反选':'全选' }}
					</u-button>
				</view>
			</view>
			<template #cell="{ item }">
				<view class="item-container">
					<view class="flex-text" style="padding: 10px;">
						<view class="flex-text-one">出水口：</view>
						<view>
							<text>{{ item.showName }}</text>
						</view>
						<view style="margin-left: 50px;height: 25px;">
							<u-checkbox-group class="checkBox" style="margin: 0;" iconPlacement="left" placement="row"
								@change="handleChangeRow">
								<u-checkbox activeColor="#35842E" label="全选"
									v-if="item.landWaterOutletPermissionVo.deviceTypeKey == 'valve'"
									:checked="item.landWaterOutletPermissionVo.valveClose==0 && item.landWaterOutletPermissionVo.valveOpen==0 && item.landWaterOutletPermissionVo.valveOneOpen==0 && item.landWaterOutletPermissionVo.valveTwoOpen==0"
									:name="'all_'+item.id"></u-checkbox>
								<u-checkbox activeColor="#35842E" label="全选"
									v-if="item.landWaterOutletPermissionVo.deviceTypeKey == 'fiveValve'"
									:checked="item.landWaterOutletPermissionVo.valveOneOpen==0 && item.landWaterOutletPermissionVo.valveTwoOpen==0 && item.landWaterOutletPermissionVo.valveThreeOpen==0 && item.landWaterOutletPermissionVo.valveFourOpen==0"
									:name="'all_'+item.id"></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<u-gap height="1" bgColor="#D2D2D2"></u-gap>
					<view v-if="item.landWaterOutletPermissionVo.deviceTypeKey == 'valve'">
						<u-checkbox-group class="checkBox" iconPlacement="left" placement="row" @change="handleChange">
							<u-checkbox activeColor="#35842E" label="全关"
								:checked="item.landWaterOutletPermissionVo.valveClose==0"
								:name="'valveClose_'+item.id"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="全开"
								:checked="item.landWaterOutletPermissionVo.valveOpen==0"
								:name="'valveOpen_'+item.id"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="①开 "
								:checked="item.landWaterOutletPermissionVo.valveOneOpen==0"
								:name="'valveOneOpen_'+item.id"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="②开"
								:checked="item.landWaterOutletPermissionVo.valveTwoOpen==0"
								:name="'valveTwoOpen_'+item.id"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view v-if="item.landWaterOutletPermissionVo.deviceTypeKey == 'fiveValve'">
						<u-checkbox-group class="checkBox" iconPlacement="left" placement="row" @change="handleChange">
							<u-checkbox activeColor="#35842E" label="①开"
								:checked="item.landWaterOutletPermissionVo.valveOneOpen==0"
								:name="'valveOneOpen_'+item.id"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="②开"
								:checked="item.landWaterOutletPermissionVo.valveTwoOpen==0"
								:name="'valveTwoOpen_'+item.id"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="③开 "
								:checked="item.landWaterOutletPermissionVo.valveThreeOpen==0"
								:name="'valveThreeOpen_'+item.id"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="④开"
								:checked="item.landWaterOutletPermissionVo.valveFourOpen==0"
								:name="'valveFourOpen_'+item.id"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</template>
			<template #bottom>
				<view class="button">
					<u-button style="width: 200px; height: 40px; border-radius: 4px" type="success" text="设 置"
						@click="submit" :disabled="disabled"></u-button>
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script>
	import store from "@/store"
	import plugin from "@/plugins"
	import {
		getLandWaterOutletPermissionList,
		saveLandWaterOutletPermission
	} from "@/api/system/landWaterOutletPermission"
	export default {
		data() {
			return {
				landId: null,
				dataList: [],
				selectItem: {},
				tempValveData: {
					valveClose: true,
					valveOneOpen: true,
					valveOpen: true,
					valveTwoOpen: true,
					valveThreeOpen: true,
					valveFourOpen: true
				},
				selectAll: false,
				query: {
					landId: null,
					deviceCode: null,
					userId: null
				},
				disabled: false
			}
		},
		onLoad(options) {
			this.landId = options.landId
			this.query.landId = options.landId
			this.query.userId = options.userId
			this.queryList();
		},
		methods: {
			queryList() {
				if (!this.query.landId) {
					return;
				}
				this.dataList = []
				getLandWaterOutletPermissionList(this.query)
					.then(res => {
						this.dataList = res.data;
						this.$refs.paging.complete(this.dataList)
					})
			},
			onSearchValue(e) {
				this.query.landName = e;
				this.queryList();
			},
			//提交
			submit() {
				let saveObj = {
					landWaterOutlets: this.dataList
				}
				plugin.modal.loading("设置中...")
				this.disabled = true;
				//获取该用户地块列表
				saveLandWaterOutletPermission(saveObj)
				.then(res => {
					plugin.modal.msgSuccess("设置成功!")
					//刷新列表
					this.queryList();
					this.disabled = false;
				})
			},
			//全选
			handleChangeAllRow() {
				this.selectAll = !this.selectAll;
				this.dataList.forEach(item => {
					if (item.landWaterOutletPermissionVo.deviceTypeKey == "valve") {
						item.landWaterOutletPermissionVo.valveClose = this.selectAll ? 0 : 1;
						item.landWaterOutletPermissionVo.valveOpen = this.selectAll ? 0 : 1;
						item.landWaterOutletPermissionVo.valveOneOpen = this.selectAll ? 0 : 1;
						item.landWaterOutletPermissionVo.valveTwoOpen = this.selectAll ? 0 : 1;
						item.landWaterOutletPermissionVo.valveThreeOpen = 1;
						item.landWaterOutletPermissionVo.valveFourOpen = 1;
					}
					if (item.landWaterOutletPermissionVo.deviceTypeKey == "fiveValve") {
						item.landWaterOutletPermissionVo.valveClose = 1;
						item.landWaterOutletPermissionVo.valveOpen = 1;
						item.landWaterOutletPermissionVo.valveOneOpen = this.selectAll ? 0 : 1;
						item.landWaterOutletPermissionVo.valveTwoOpen = this.selectAll ? 0 : 1;
						item.landWaterOutletPermissionVo.valveThreeOpen = this.selectAll ? 0 : 1;
						item.landWaterOutletPermissionVo.valveFourOpen = this.selectAll ? 0 : 1;
					}
				});
			},
			//单行全选
			handleChangeRow(e) {
				if (e && e.length) {
					let index = this.dataList.findIndex(x => x.id == e[0].split("_")[1]);
					let item = this.dataList[index];
					this.selectItem = item;
					if (item.landWaterOutletPermissionVo.deviceTypeKey == "valve") {
						item.landWaterOutletPermissionVo.valveClose = 0;
						item.landWaterOutletPermissionVo.valveOpen = 0;
						item.landWaterOutletPermissionVo.valveOneOpen = 0;
						item.landWaterOutletPermissionVo.valveTwoOpen = 0;
						item.landWaterOutletPermissionVo.valveThreeOpen = 1;
						item.landWaterOutletPermissionVo.valveFourOpen = 1;
					}
					if (item.landWaterOutletPermissionVo.deviceTypeKey == "fiveValve") {
						item.landWaterOutletPermissionVo.valveClose = 1;
						item.landWaterOutletPermissionVo.valveOpen = 1;
						item.landWaterOutletPermissionVo.valveOneOpen = 0;
						item.landWaterOutletPermissionVo.valveTwoOpen = 0;
						item.landWaterOutletPermissionVo.valveThreeOpen = 0;
						item.landWaterOutletPermissionVo.valveFourOpen = 0;
					}
				} else {
					if (this.selectItem.landWaterOutletPermissionVo.deviceTypeKey == "valve") {
						this.selectItem.landWaterOutletPermissionVo.valveClose = 1;
						this.selectItem.landWaterOutletPermissionVo.valveOpen = 1;
						this.selectItem.landWaterOutletPermissionVo.valveOneOpen = 1;
						this.selectItem.landWaterOutletPermissionVo.valveTwoOpen = 1;
						this.selectItem.landWaterOutletPermissionVo.valveThreeOpen = 1;
						this.selectItem.landWaterOutletPermissionVo.valveFourOpen = 1;
					}
					if (this.selectItem.landWaterOutletPermissionVo.deviceTypeKey == "fiveValve") {
						this.selectItem.landWaterOutletPermissionVo.valveClose = 1;
						this.selectItem.landWaterOutletPermissionVo.valveOpen = 1;
						this.selectItem.landWaterOutletPermissionVo.valveOneOpen = 1;
						this.selectItem.landWaterOutletPermissionVo.valveTwoOpen = 1;
						this.selectItem.landWaterOutletPermissionVo.valveThreeOpen = 1;
						this.selectItem.landWaterOutletPermissionVo.valveFourOpen = 1;
					}
				}
			},
			//当用户点击权限开关之后
			handleChange(e) {
				if (e && e.length) {
					let index = this.dataList.findIndex(x => x.id == e[0].split("_")[1]);
					let item = this.dataList[index];
					this.judgeValue(e, item);
				}
			},
			//判断开关值属性
			judgeValue(e, itemSample) {
				if (e.indexOf('valveClose_' + itemSample.id) != -1) {
					itemSample.landWaterOutletPermissionVo.valveClose = 0;
				} else {
					itemSample.landWaterOutletPermissionVo.valveClose = 1;
				}
				if (e.indexOf('valveOpen_' + itemSample.id) != -1) {
					itemSample.landWaterOutletPermissionVo.valveOpen = 0;
				} else {
					itemSample.landWaterOutletPermissionVo.valveOpen = 1;
				}
				if (e.indexOf('valveOneOpen_' + itemSample.id) != -1) {
					itemSample.landWaterOutletPermissionVo.valveOneOpen = 0;
				} else {
					itemSample.landWaterOutletPermissionVo.valveOneOpen = 1;
				}
				if (e.indexOf('valveTwoOpen_' + itemSample.id) != -1) {
					itemSample.landWaterOutletPermissionVo.valveTwoOpen = 0;
				} else {
					itemSample.landWaterOutletPermissionVo.valveTwoOpen = 1;
				}
				if (e.indexOf('valveThreeOpen_' + itemSample.id) != -1) {
					itemSample.landWaterOutletPermissionVo.valveThreeOpen = 0;
				} else {
					itemSample.landWaterOutletPermissionVo.valveThreeOpen = 1;
				}
				if (e.indexOf('valveFourOpen_' + itemSample.id) != -1) {
					itemSample.landWaterOutletPermissionVo.valveFourOpen = 0;
				} else {
					itemSample.landWaterOutletPermissionVo.valveFourOpen = 1;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-container {
		background-color: #f6f3f3;
		height: 100%;

		.search {
			background-color: white;
			padding: 10px;
		}

		.title {
			height: 50px;
			display: flex;
			padding: 15px 15px;
			background: white;
			align-items: center;

			text {
				font-size: 14px;
				margin-right: 10px;
			}
		}

		.list {
			height: calc(100vh - 150px - env(safe-area-inset-bottom));
			margin: 0px 10px;

			work-user-index-item {
				background-color: #f6f3f3;
			}
		}

		.button {
			padding: 10px 20px;
			display: flex;
			background: white;
		}

		.item-container {
			margin-top: 10px;
			background-color: white;
			padding-bottom: 10px;
		}

		.flex-text {
			display: flex;
			align-items: center;
			font-size: 16px;

			.flex-text-one {
				color: #939393;
				font-weight: bold;
			}
		}

		.checkBox {
			// margin: 20px 0px;
			margin: 10px 0px 0px 0px;
			display: flex;
			justify-content: space-around;
		}
	}

	.tips {
		padding: 10px;
		line-height: 20px;
		font-size: 14px;
		color: gray;
		// letter-spacing: 1px;
		background-color: #fff;
		border-top: 1px solid #eee;
	}

	::v-deep.zp-paging-container {
		background: #f3f3f3 !important;
	}
</style>