<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="true" leftText="" @leftClick="" :title="formData.scenarioName">
		<template v-slot:right>
			<view class="fixed">
				<view align="right" class="iconfont icon-liebiao icon" @click="groupPop = true"></view>
			</view>
		</template>
	</custom-nav-bar>
	<view class="text-intel" v-if="formData">
		<view>
			<span class="text">
				{{formData.groups[gIndex].groupName}}
			</span>
		</view>
		<view>
			<span>
				时长：{{formData.groups[gIndex].irrigateDuration}}h
			</span>
		</view>
		<view>
			<!-- <span>已选：{{formData.groups[gIndex].wos.length}}</span> -->
			<span>已选：{{Object.keys(select.count).length}}</span>
		</view>
	</view>

	<view class="card">
		<uni-collapse>
			<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true"
				v-for="item in woData">
				<template v-slot:title>
					<view class="cards-title">
						<view>
							<view class="iconfont icon-nongtian icon"></view>
							<view class="text" style="color: #333;">
								{{ item.landGroup }}{{ item.branchCanalCode }}
							</view>
						</view>
					</view>
				</template>
				<view class="content" v-if="item.children">
					<uni-forms ref="baseForm">
						<view class="cards-content">
							<view class="greybar-box" v-for="child in item.children">
								<view class="title">
									<view>出水口：<span>{{child.showName}}</span></view>
									<view v-if="child.deviceRelation">阀门：
										<span v-if="[2,3].includes(child.deviceRelation.deviceTypeId)">
											三通阀
										</span>
										<span v-if="[13].includes(child.deviceRelation.deviceTypeId)">
											五通阀
										</span>
									</view>
								</view>
								<view class="check-box" v-if="child.deviceRelation">
									<uni-forms-item v-if="[2,3].includes(child.deviceRelation.deviceTypeId)">
										<uni-data-checkbox mode="tag" :multiple="true" :localdata="valve"
											:value="select.newV[child.id]" @change="itemChange($event,child)" />
									</uni-forms-item>
									<uni-forms-item v-else-if="[13].includes(child.deviceRelation.deviceTypeId)">
										<uni-data-checkbox mode="tag" :multiple="true" :localdata="fiveValve"
											:value="select.newV[child.id]" @change="itemChange($event,child)" />
									</uni-forms-item>
									<view>
										<uni-tag text="标签" type="primary" size="mini" />
										<uni-tag text="标签" type="primary" size="mini" />
										<uni-tag text="标签" type="primary" size="mini" />
										<uni-tag text="标签" type="primary" size="mini" />
									</view>
								</view>
								<view class="no-data" v-else>
									<view class="iconfont icon-wbd"></view>未绑定阀门
								</view>
							</view>
						</view>
					</uni-forms>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
	<view class="bottom-btn">
		<u-button type="success" size="large" text="下一组" @click="nextGroup"
			v-if="formData.groups.length > (gIndex+1)" />
		<u-button type="success" size="large" text="保存" @click="confirm" v-else />
	</view>

	<!-- 左侧分组弹出层 -->
	<u-popup mode="left" :show="groupPop" @close="groupPop = false">
		<view style="width: 90vw;">
			<view class="card">
				<uni-collapse>
					<uni-collapse-item title-border="none" :border="false" :show-arrow="false"
						v-for="item in formData.groups">
						<template v-slot:title>
							<view class="cards-title">
								<view>
									<view class="iconfont icon-nongtian icon"></view>
									<view class="text" style="color: #333;">
										{{item.groupName}}
									</view>
								</view>
							</view>
						</template>
						<view class="content">
							<view class="cards-content" v-if="item.wos.length">
								<view class="greybar" v-for="wo in item.wos">
									<view>出水口：<span>1-1</span></view>
									<view>三通<span>①开</span></view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="bottom-btn">
				<u-button type="success" size="large" :text="confirmLabel" @click="confirm" />
			</view>
		</view>
	</u-popup>
</template>

<script>
	import store from '@/store'
	const user = store.state.user.user;
	import {
		getWaterOutletPermissionList
	} from "@/api/system/landWaterOutletPermission";

	export default {
		data() {
			return {
				groupPop: false,
				formData: null,
				gIndex: 0, //当前编辑的索引
				woData: [], //出水口列表
				// 三通阀
				valve: [{
						text: '①开',
						value: 1,
						key: "open1"
					},
					{
						text: '②开',
						value: 2,
						key: "open2"
					}
				],
				// 多通阀
				fiveValve: [{
						text: '①开',
						value: 1
					},
					{
						text: '②开',
						value: 2
					},
					{
						text: '③开',
						value: 3
					},
					{
						text: '④开',
						value: 4
					}
				],
				select: {
					oldV: {},
					newV: {},
					count: {},
					groupV: {},
				},
			};
		},
		onLoad(par) {
			console.error(par);
			this.formData = JSON.parse(par.item);
			console.error("this.formData:", this.formData);
			if (this.formData.id) {

			} else {
				let groupArr = [];
				const irrigateDuration = (this.formData.irrigateTotalDuration / this.formData.groupNum).toFixed(1);
				for (var i = 1; i <= this.formData.groupNum; i++) {
					groupArr.push({
						id: undefined,
						title: "新增",
						landId: this.formData.landId,
						userId: user.userId,
						shareUserIds: undefined,
						irrigateScenarioId: this.formData.id,
						groupName: `轮灌组${i}`,
						irrigateDuration: irrigateDuration,
						sort: i,
						delFlag: "0",
						wos: []
					});
				}
				this.formData.groups = groupArr;
			}
			console.error("this.formData:", this.formData);
		},
		onShow() {},
		mounted() {
			uni.showLoading();
			// 初始化出水口数据
			getWaterOutletPermissionList(this.formData.landId).then(res => {
				uni.hideLoading()
				if (res.data) {
					this.woData = res.data;
				} else {
					this.woData = [];
				}
			});
		},
		methods: {
			// 选中数据
			itemChange(e, item) {
				const setToRemove = new Set(this.select.oldV[item.id]?.newV || []);
				const value = e.detail.value.filter(x => !setToRemove.has(x));

				if (this.select.oldV[item.id]) {
					this.select.oldV[item.id].value = value;
					// this.select.oldV[item.id].selected = value;
				} else {
					this.select.oldV[item.id] = {
						value: value, //当前选中的
						newV: [], //所有选中的
						selected: [], //固定选中的
					};
				}
				const newV = value.concat(this.select.oldV[item.id].selected);
				this.select.newV[item.id] = newV;
				this.select.oldV[item.id].newV = newV;

				this.select.count[item.id] = value;

				console.error("select:", this.select);
			},
			// 下一组
			nextGroup() {
				// 存储当前组的数据
				let groupV = {};
				for (var key in this.select.oldV) {
					const value = this.select.oldV[key].value;
					if (value.length) {
						let obj = {};
						obj[value[0]] = this.gIndex;
						groupV[key] = obj;

						this.select.oldV[key].selected = value.concat(this.select.oldV[key].selected);
					}
				}
				this.select.groupV = Object.assign(this.select.groupV, groupV);
				this.select.count = {};
				this.gIndex++;
			},
			// 保存
			confirm() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-app,
	uni-page,
	uni-page-wrapper,
	uni-page-body {
		padding-bottom: 38px !important;
	}

	::v-deep .uni-forms {
		margin-right: 10px;
		padding: 0 !important;
	}

	::v-deep .uni-forms-item {
		margin-bottom: 0 !important;
	}

	::v-deep .uni-forms-item__label {
		min-width: 0 !important;
		width: auto !important;
		font-size: 0.8rem;
		height: inherit;
		padding: 0;
	}

	::v-deep .uni-easyinput__content-input {
		height: 20px;
		width: 50px;
		padding-left: 5px !important;
	}
</style>