<template>
	<view class="index-container">
		<z-paging class="paging" ref="paging" use-virtual-list @query="queryList" 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>
				<text> 2.不建议选择“全关”按钮;</text>
				<view style="float: right;margin-right: 15px;border: 1px solid;">
					<!-- <u-checkbox-group class="checkBox" style="margin: 0;" iconPlacement="left" placement="row"
						@change="handleChangeAll">
						<u-checkbox activeColor="#35842E" label="全选" :checked="false" name="all"></u-checkbox>
					</u-checkbox-group> -->
					<u-button style="height: 25px;" type="primary" size="small" :plain="true" :hairline="true"
						@click="handleChangeAll">
						{{ selectAll ? '反选':'全选' }}
					</u-button>
				</view>
			</view>
			<template #cell="{ item }">
				<work-user-ground-device-item :item="item" @onCheckBoxChange="onCheckBoxChange" />
			</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 setup>
	import {
		ref
	} from "vue"
	import {
		onShow,
		onLoad,
		onReady
	} from "@dcloudio/uni-app"
	import store from "@/store"
	import plugin from "@/plugins"
	import storage from "@/utils/storage"
	const landId = ref(0)
	const dataList = ref([])
	const tempList = ref([])
	const tempValveData = ref({
		valveClose: true,
		valveOneOpen: true,
		valveOpen: true,
		valveTwoOpen: true,
		valveThreeOpen: true,
		valveFourOpen: true
	})
	const selectAll = ref(false)
	const paging = ref(null)
	const query = ref({
		landId: 0,
		deviceCode: null,
		userId: 0
	})
	const disabled = ref(false)

	onLoad(res => {
		landId.value = res.landId
		query.value.landId = res.landId
		query.value.userId = res.userId
	})

	onShow(() => {
		// if (paging.value != null) {
		// 	paging.value.reload()
		// }
	})

	//获取地块列表
	function queryList() {
		// plugin.modal.loading("获取权限列表...")
		dataList.value = []
		tempList.value = []
		if (query.value.deviceCode == null || query.value.deviceCode == "") {
			delete query.value["deviceCode"]
		}
		//获取该用户地块列表
		store
			.dispatch("onGetUserControlList", query.value)
			.then(res => {
				let data = res.data[0].valveControls;
				// console.error("data:", data);
				if (data && data.length) {
					data.forEach(item => {
						let sortArr = item.waterOutletName.split("-");
						switch (sortArr.length) {
							case 0:
								sortArr = [0, 0, 0, 0];
								break;
							case 1:
								sortArr = sortArr.concat([0, 0, 0]);
								break;
							case 2:
								sortArr = sortArr.concat([0, 0]);
								break;
							case 3:
								sortArr = sortArr.concat([0]);
								break;
						}
						item.sortArr = sortArr;
					});
					data = data.sort(compareData());
				} else {
					data = [];
					plugin.modal.msg("该地块还没有安装或绑定阀门!")
				}
				dataList.value = data;
				paging.value.complete(dataList.value)
			})
			.catch(error => {
				paging.value.complete([])
				plugin.modal.msgError(error)
			})
			.finally(() => {
				plugin.modal.closeLoading()
			})
	}
	//数据排序
	function compareData() {
		return function(b, a) {
			if (b.sortArr[0] < a.sortArr[0]) {
				return -1;
			} else if (b.sortArr[0] > a.sortArr[0]) {
				return 1;
			} else {
				if (b.sortArr[1] < a.sortArr[1]) {
					return -1;
				} else if (b.sortArr[1] > a.sortArr[1]) {
					return 1;
				} else {
					if (b.sortArr[2] < a.sortArr[2]) {
						return -1;
					} else if (b.sortArr[2] > a.sortArr[2]) {
						return 1;
					} else {
						if (b.sortArr[3] < a.sortArr[3]) {
							return -1;
						} else if (b.sortArr[3] > a.sortArr[3]) {
							return 1;
						} else {
							return 0;
						}
					}
				}
			}
		}
	}

	//查找地块
	function onSearchValue(keyword) {
		query.value.deviceCode = keyword
		paging.value.reload()
	}
	//设置控制权限
	function submit() {
		// if (tempList.value.length < 1) {
		// 	plugin.modal.msg("您未做任何改变!")
		// 	return
		// }
		let queryData = {
			addValveControl: tempList.value
		}
		plugin.modal.loading("设置中...")
		disabled.value = true;
		//获取该用户地块列表
		store
			.dispatch("onSetUserControlList", queryData)
			.then(res => {
				plugin.modal.msgSuccess("设置成功!")
				//刷新列表
				queryList();
				// queryList(1, 10, "")
			})
			.catch(error => {
				plugin.modal.msgError(error)
				disabled.value = false;
			})
			.finally(() => {
				plugin.modal.closeLoading()
				disabled.value = false;
			})
	}
	// 全选
	function handleChangeAll() {
		selectAll.value = !selectAll.value;
		tempList.value = [];
		dataList.value.forEach(item => {
			if (item.deviceTypeId == 2 || item.deviceTypeId == 3) {
				item.valveClose = selectAll.value;
				item.valveOpen = selectAll.value;
				item.valveOneOpen = selectAll.value;
				item.valveTwoOpen = selectAll.value;
				item.valveThreeOpen = false;
				item.valveFourOpen = false;
			}
			if (item.deviceTypeId == 13) {
				item.valveClose = false;
				item.valveOpen = false;
				item.valveOneOpen = selectAll.value;
				item.valveTwoOpen = selectAll.value;
				item.valveThreeOpen = selectAll.value;
				item.valveFourOpen = selectAll.value;
			}
			tempList.value.push(item);
		});
	}
	//当用户点击权限开关之后
	function onCheckBoxChange(param) {
		console.log(param)
		let index = tempList.value.findIndex(x => x.id == param.item.id && x.userId == param.item.userId && x.deviceId ==
			param.item.deviceId)
		if (index != -1) {
			tempList.value.splice(index, 1);
		}
		let itemSample = judgeValue(param.item, param.checkItem);
		tempList.value.push(itemSample);
		// //添加到提交的列表中
		// //先查找缓存列表有这个对象
		// let item = tempList.value.filter(res => {
		// 	return res.id == param.itemId
		// })
		// //修改属性值
		// itemSample = judgeValue(itemSample, param)
		// //如果没有这个对象则添加到缓存列表
		// if (!item.length) {
		// 	tempList.value.push(itemSample)
		// } else {
		// 	//原列表删除后重新添加
		// 	tempList.value = tempList.value.filter(res => {
		// 		return res.itemId != param.itemId
		// 	})
		// 	tempList.value.push(itemSample)
		// }
	}
	//判断开关值属性
	function judgeValue(itemSample, param) {
		itemSample.valveClose = param.indexOf("valveClose") > -1 ? true : false
		itemSample.valveOpen = param.indexOf("valveOpen") > -1 ? true : false
		itemSample.valveOneOpen = param.indexOf("valveOneOpen") > -1 ? true : false
		itemSample.valveTwoOpen = param.indexOf("valveTwoOpen") > -1 ? true : false
		itemSample.valveThreeOpen = param.indexOf("valveThreeOpen") > -1 ? true : false
		itemSample.valveFourOpen = param.indexOf("valveFourOpen") > -1 ? true : false
		return itemSample
	}
</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;
		}
	}

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