<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="false" leftText="" @leftClick="" :title="title">
		<template v-slot:left>
			<view @click="$refs.landRef.open()">地块</view>
		</template>
		<template v-slot:right>
			<view class="fixed">
				<!-- <view align="right" class="icon iconfont icon-liebiao" @click="toList"></view> -->
				<view align="right" class="icon iconfont icon-scan" @click="toQRCode"></view>
				<view align="right" class="icon iconfont icon-liebiao" @click="mqttshow = true"></view>
			</view>
		</template>
	</custom-nav-bar>
	<u-popup :show="mqttshow" mode="top" @close="mqttshow = false" @open="">
		<view>
			<button @click="mqttLink">mqttLink</button>
			<button @click="mqttEnd">mqttEnd</button>
			<button @click="mqttSubscribes">订阅</button>
		</view>
	</u-popup>

	<!-- 内容 -->
	<view class="content">
		<!-- 顶部搜索框 -->
		<view class="header-section">
			<view class="search">
				<view class="search-l">
					<u-search shape="square" :animation="true" :showAction="true" v-model="screenValue"
						@search="handleKeyup" @clear="handleKeyup" />
				</view>
				<view class="search-r">
					<u-checkbox-group placement="row">
						<u-checkbox :checked="dc.forward" :label="`工作(${dc.screen.watering})`" labelColor="#ffffff"
							@change="forwardChange" />
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="content-section">
			<!-- 统计吸顶效果 -->
			<view class="grey-box ceiling" :style="[isSticky ? '':'opacity: 0;']">
				<u-grid :border="false" col="4">
					<u-grid-item :class="stateScreen.all" @click="valveStateScreen('all')">
						<view class="flex">
							<view class="iconfont icon-threshold"></view>
							<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.all" />
						</view>
					</u-grid-item>
					<u-grid-item :class="stateScreen.online" @click="valveStateScreen('online')">
						<view class="flex">
							<view class="iconfont icon-jizhan"></view>
							<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.online" />
						</view>
					</u-grid-item>
					<u-grid-item :class="stateScreen.error" @click="valveStateScreen('error')">
						<view class="flex">
							<view class="iconfont icon-guzhang"></view>
							<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.error" />
						</view>
					</u-grid-item>
					<u-grid-item @click="showDeviceMap">
						<view class="flex">
							<view class="iconfont icon-shangqing"></view>
							<u-badge numberType="overflow" type="success" max="999" />
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="grey-box normal">
				<u-grid :border="false" col="4">
					<u-grid-item :class="stateScreen.all" @click="valveStateScreen('all')">
						<view class="iconfont icon-threshold"></view>
						<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.all" />
						<text class="text">总设备</text>
					</u-grid-item>
					<u-grid-item :class="stateScreen.online" @click="valveStateScreen('online')">
						<view class="iconfont icon-jizhan"></view>
						<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.online" />
						<text class="text">在线设备</text>
					</u-grid-item>
					<u-grid-item :class="stateScreen.error" @click="valveStateScreen('error')">
						<view class="iconfont icon-guzhang"></view>
						<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.error" />
						<text class="text">异常设备</text>
					</u-grid-item>
					<u-grid-item @click="showDeviceMap">
						<view class="iconfont icon-shangqing"></view>
						<u-badge numberType="overflow" type="success" max="999" />
						<text class="text">土壤墒情</text>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- <view :class="[ isSticky ?'ceiling':'normal','grey-box']" :style="[isSticky ? 'position: sticky;':'']">
				<u-grid :border="false" col="4" v-if="isSticky">
					<u-grid-item :class="dc.screenKey == 'all' ? 'click':''" @click="valveStateScreen('all')">
						<view class="flex">
							<view class="iconfont icon-threshold"></view>
							<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.all" />
						</view>
					</u-grid-item>
					<u-grid-item :class="dc.screenKey == 'online' ? 'click':''" @click="valveStateScreen('online')">
						<view class="flex">
							<view class="iconfont icon-jizhan"></view>
							<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.online" />
						</view>
					</u-grid-item>
					<u-grid-item :class="dc.screenKey == 'error' ? 'click':''" @click="valveStateScreen('error')">
						<view class="flex">
							<view class="iconfont icon-guzhang"></view>
							<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.error" />
						</view>
					</u-grid-item>
					<u-grid-item @click="showDeviceMap">
						<view class="flex">
							<view class="iconfont icon-shangqing"></view>
							<u-badge numberType="overflow" type="success" max="999"
								:value="dc.others.deviceMp.length" />
						</view>
					</u-grid-item>
				</u-grid>
				<u-grid :border="false" col="4" v-else>
					<u-grid-item :class="dc.screenKey == 'all' ? 'click':''" @click="valveStateScreen('all')">
						<view class="iconfont icon-threshold"></view>
						<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.all" />
						<text class="text">总设备</text>
					</u-grid-item>
					<u-grid-item :class="dc.screenKey == 'online' ? 'click':''" @click="valveStateScreen('online')">
						<view class="iconfont icon-jizhan"></view>
						<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.online" />
						<text class="text">在线设备</text>
					</u-grid-item>
					<u-grid-item :class="dc.screenKey == 'error' ? 'click':''" @click="valveStateScreen('error')">
						<view class="iconfont icon-guzhang"></view>
						<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.error" />
						<text class="text">异常设备</text>
					</u-grid-item>
					<u-grid-item @click="showDeviceMap">
						<view class="iconfont icon-shangqing"></view>
						<u-badge numberType="overflow" type="success" max="999" :value="dc.others.deviceMp.length" />
						<text class="text">土壤墒情</text>
					</u-grid-item>
				</u-grid>
			</view> -->
			<!-- 列表 -->
			<view class="grey-box" style="border-radius: 0 0 15px 15px;">
				<!-- 基站 -->
				<view class="card">
					<uni-collapse ref="collapseRef" v-if="dc.wo.length">
						<uni-collapse-item title-border="none" :show-animation="true" :show-arrow="false">
							<template v-slot:title>
								<view class="jz-title fixed">
									<view style="width:30%;">
										<view class="iconfont icon-plume icon" style="float: left;"></view>
										<text>基站</text>
									</view>
									<view class="fixed" style="width:calc(100% - 30%); justify-content: flex-end;">
										<view class="iconfont icon-xh icon" style="float: left;"
											:class="[ mqttConnected ? 'font-green':'font-red' ]">
										</view>
										<view @click.stop="" style="margin-left: 5px;">
											<u-button type="success" size="small" text="一键刷新" />
										</view>
										<view @click.stop="" style="margin-left: 5px;">
											<u-button type="success" size="small" text="批量控制" />
										</view>
									</view>
								</view>
							</template>
							<view class="u-collapse-content">
								<u-row v-for="item in dc.stations">
									<u-col span="3">
										<view class="fixed">
											<text
												:class="[dc.dataObj[item.deviceCode]?.online ? 'font-green':'font-red']">●</text>
											<view>{{ item.deviceCode }}</view>
										</view>
									</u-col>
									<u-col span="4" style="align-items: center;">
										<view class="fixed">
											<custom-signal :online="dc.dataObj[item.deviceCode]?.online"
												:isp="dc.dataObj[item.deviceCode]?.isp"
												:value="dc.dataObj[item.deviceCode]?.rssi" />

											<custom-battery :online="dc.dataObj[item.deviceCode]?.online"
												:charging="dc.dataObj[item.deviceCode]?.charging"
												:value="dc.dataObj[item.deviceCode]?.b" />
										</view>
									</u-col>
									<u-col span="5">
										<view class="fixed">
											<u-button type="success" size="mini" text="手持基站"></u-button>
											<u-button type="success" size="mini" text="刷新" icon="reload"></u-button>
										</view>
									</u-col>
								</u-row>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<!-- 阀门列表 -->
				<view class="card">
					<uni-collapse ref="collapseRef" v-if="dc.wo.length">
						<uni-collapse-item class="collapseItem" title-border="auto" :show-animation="true"
							:show-arrow="false" v-for="(item,index) in dc.wo" :open="woloaded && woloaded[index].open"
							v-show="(dc.forward && item.isOpened) || ( !dc.forward && !item.isHidden)">
							<template v-slot:title>
								<view class="sf-title fixed" @click.stop="handleCollapseClick(index)">
									<view class="iconfont icon-diefa icon"></view>
									<view class="text" style="min-width: 25px;">
										{{ item.showName || item.branchCanalCode  }}
									</view>
									<view style="margin:0 10px;">出水口数量</view>
									<u-badge numberType="overflow" type="info" showZero max="999"
										:value="item.children.length" />
								</view>
							</template>
							<view class="u-collapse-content" v-if="woloaded && woloaded[index].loaded">
								<!-- 蝶阀 -->
								<u-row v-if="item.device && item.device.deviceTypeKey == 'butterflyValve'">
									<u-col span="2">
										<view class="fixed">
											<text
												:class="[dc.dataObj[item.dataKey]?.online ? 'font-green':'font-red']">●</text>
											{{ item.showName }}
										</view>
									</u-col>
									<u-col span="5" style="padding-left: 7px;">
										<custom-battery :online="dc.dataObj[item.dataKey]?.online"
											:charging="dc.dataObj[item.dataKey]?.charging"
											:value="dc.dataObj[item.dataKey]?.b" />
									</u-col>
									<u-col span="5" style="align-items: flex-end;">
										<view style="display: flex;" v-if="dc.dataObj[item.dataKey]">
											<u-button :disabled="item.device.disable?.close"
												:type="dc.getBtnType(2, item.dataKey, 'close')"
												:plain="dc.dataObj[item.dataKey].btnObj.close.work"
												@click="dc.deviceControlHandle(item, 0)"> 关
												<span v-if="dc.dataObj[item.dataKey].btnObj.close.work">
													<span v-if="dc.countdownObj[item.dataKey]">
														({{ dc.countdownObj[item.dataKey] }})
													</span>
													<span v-else class="timeout">
														{{ dc.timeoutObj[item.dataKey] }}
													</span>
												</span>
											</u-button>
											<u-button :disabled="item.device.disable?.open"
												:type="dc.getBtnType(2, item.dataKey, 'open')"
												:plain="dc.dataObj[item.dataKey].btnObj.open.work"
												@click="dc.deviceControlHandle(item, 1)"> 开
												<span v-if="dc.dataObj[item.dataKey].btnObj.open.work">
													<span v-if="dc.countdownObj[item.dataKey]">
														({{ dc.countdownObj[item.dataKey] }})
													</span>
													<span v-else class="timeout">
														{{ dc.timeoutObj[item.dataKey] }}
													</span>
												</span>
											</u-button>
										</view>
									</u-col>
								</u-row>

								<!-- 阀门 -->
								<view v-for="child in item.children">
									<view v-show="(dc.forward && child.isOpened) || ( !dc.forward && !child.isHidden)">
										<view v-if="child.id && child.device" class="card-grey">
											<view class="card-title">
												<u-row>
													<u-col span="2">
														<view>
															<text
																:class="[dc.dataObj[child.dataKey]?.online ? 'font-green':'font-red']">●</text>
															{{ child.showName }}
														</view>
													</u-col>
													<u-col span="5">
														<view class="fixed">
															<custom-battery :online="dc.dataObj[child.dataKey]?.online"
																:charging="dc.dataObj[child.dataKey]?.adc.charging"
																:value="dc.dataObj[child.dataKey]?.adc.b" />
															<view>
																<view class="iconfont icon-wendu icon"
																	style="float: left;margin-left: 5px;" />
																{{ dc.dataObj[child.dataKey]?.adc.t}}
															</view>
														</view>
													</u-col>
													<u-col span="5" style="align-items: flex-end;">
														<view class="fixed">
															<u-button type="success" size="mini" text="刷新" icon="reload"
																:loading="dc.dataObj[child.dataKey]?.refresh"
																@click="dc.refreshDeviceItem(child.dataKey, child.device)" />
														</view>
													</u-col>
												</u-row>
											</view>
											<view class="control" v-if="dc.dataObj[child.dataKey]">
												<u-row v-if="child.device.deviceTypeKey == 'valve'">
													<u-col span="3" style="margin-top: -10px;">
														<u-button :disabled="child.device.disable?.open1"
															:type="dc.getBtnType(2, child.dataKey, 'open1')"
															:plain="dc.dataObj[child.dataKey].btnObj.open1.work"
															@click="dc.deviceControlHandle(child, 1)"> ①
															<span v-if="dc.dataObj[child.dataKey].btnObj.open1.work">
																<span v-if="dc.countdownObj[child.dataKey]">
																	({{ dc.countdownObj[child.dataKey] }})
																</span>
																<span v-else class="timeout">
																	{{ dc.timeoutObj[child.dataKey] }}
																</span>
															</span>
														</u-button>
														<u-line-progress height="8" :showText="false"
															:percentage="dc.dataObj[child.dataKey].btnObj.open1.openAngle"
															activeColor="#74ffd4" inactiveColor="#c7c7c7" />
													</u-col>
													<u-col span="6">
														<view class="valve">
															<view>
																<u-button :disabled="child.device.disable?.open"
																	:type="dc.getBtnType(2, child.dataKey, 'open')"
																	:plain="dc.dataObj[child.dataKey].btnObj.open.work"
																	@click="dc.deviceControlHandle(child, 3)"> 全开
																	<span
																		v-if="dc.dataObj[child.dataKey].btnObj.open.work">
																		<span v-if="dc.countdownObj[child.dataKey]">
																			({{ dc.countdownObj[child.dataKey] }})
																		</span>
																		<span v-else class="timeout">
																			{{ dc.timeoutObj[child.dataKey] }}
																		</span>
																	</span>
																</u-button>
															</view>
															<view class="btn-img">
																<view class="text">
																	<view class="left">
																		{{ dc.dataObj[child.dataKey].adc.p[0] }}
																	</view>
																	<view class="top"></view>
																	<view class="middle"
																		v-show="!dc.dataObj[child.dataKey].online">
																		离线
																	</view>
																	<view class="right">
																		{{ dc.dataObj[child.dataKey].adc.p[1] }}
																	</view>
																	<view class="bottom"></view>
																</view>
																<image src="../static/images/valves/3/valve3.png"
																	mode="widthFix" />
															</view>
															<view>
																<u-button :disabled="child.device.disable?.close"
																	:type="dc.getBtnType(2, child.dataKey, 'close')"
																	:plain="dc.dataObj[child.dataKey].btnObj.close.work"
																	@click="dc.deviceControlHandle(child, 4)"> 全关
																	<span
																		v-if="dc.dataObj[child.dataKey].btnObj.close.work">
																		<span v-if="dc.countdownObj[child.dataKey]">
																			({{ dc.countdownObj[child.dataKey] }})
																		</span>
																		<span v-else class="timeout">
																			{{ dc.timeoutObj[child.dataKey] }}
																		</span>
																	</span>
																</u-button>
															</view>
														</view>
													</u-col>
													<u-col span="3" style="margin-top: -10px;">
														<u-button :disabled="child.device.disable?.open2"
															:type="dc.getBtnType(2, child.dataKey, 'open2')"
															:plain="dc.dataObj[child.dataKey].btnObj.open2.work"
															@click="dc.deviceControlHandle(child, 2)"> ②
															<span v-if="dc.dataObj[child.dataKey].btnObj.open2.work">
																<span v-if="dc.countdownObj[child.dataKey]">
																	({{ dc.countdownObj[child.dataKey] }})
																</span>
																<span v-else class="timeout">
																	{{ dc.timeoutObj[child.dataKey] }}
																</span>
															</span>
														</u-button>
														<u-line-progress height="8" :showText="false"
															:percentage="dc.dataObj[child.dataKey].btnObj.open2.openAngle"
															activeColor="#74ffd4" inactiveColor="#c7c7c7" />
													</u-col>
												</u-row>
												<u-row v-else-if="child.device.deviceTypeKey == 'fiveValve'">
													<u-col span="3" style="margin-top: 10px;">
														<u-button :disabled="child.device.disable?.open1"
															:type="dc.getBtnType(2, child.dataKey, 'open1')"
															:plain="dc.dataObj[child.dataKey].btnObj.open1.work"
															@click="dc.deviceControlHandle(child, 1)"> ①
															<span v-if="dc.dataObj[child.dataKey].btnObj.open1.work">
																<span v-if="dc.countdownObj[child.dataKey]">
																	({{ dc.countdownObj[child.dataKey] }})
																</span>
																<span v-else class="timeout">
																	{{ dc.timeoutObj[child.dataKey] }}
																</span>
															</span>
														</u-button>
														<u-line-progress height="8" :showText="false"
															:percentage="dc.dataObj[child.dataKey].btnObj.open1.openAngle"
															activeColor="#74ffd4" inactiveColor="#c7c7c7" />
													</u-col>
													<u-col span="6">
														<view class="valve">
															<view style="display: flow-root;">
																<u-button :disabled="child.device.disable?.open2"
																	:type="dc.getBtnType(2, child.dataKey, 'open2')"
																	:plain="dc.dataObj[child.dataKey].btnObj.open2.work"
																	@click="dc.deviceControlHandle(child, 2)"> ②
																	<span
																		v-if="dc.dataObj[child.dataKey].btnObj.open2.work">
																		<span v-if="dc.countdownObj[child.dataKey]">
																			({{ dc.countdownObj[child.dataKey] }})
																		</span>
																		<span v-else class="timeout">
																			{{ dc.timeoutObj[child.dataKey] }}
																		</span>
																	</span>
																</u-button>
																<u-line-progress height="8" :showText="false"
																	:percentage="dc.dataObj[child.dataKey].btnObj.open2.openAngle"
																	activeColor="#74ffd4" inactiveColor="#c7c7c7" />
															</view>
															<view class="btn-img">
																<view class="text5">
																	<view class="left">
																		{{ dc.dataObj[child.dataKey].adc.p[0] }}
																	</view>
																	<view class="top">
																		{{ dc.dataObj[child.dataKey].adc.p[1] }}
																	</view>
																	<view class="middle"
																		v-show="!dc.dataObj[child.dataKey].online">
																		离线
																	</view>
																	<view class="right">
																		{{ dc.dataObj[child.dataKey].adc.p[2] }}
																	</view>
																	<view class="bottom">
																		{{ dc.dataObj[child.dataKey].adc.p[3] }}
																	</view>
																</view>
																<image src="../static/images/valves/5/valve5.png"
																	mode="widthFix" />
															</view>
															<view style="display: flow-root;">
																<u-button :disabled="child.device.disable?.open4"
																	:type="dc.getBtnType(2, child.dataKey, 'open4')"
																	:plain="dc.dataObj[child.dataKey].btnObj.open4.work"
																	@click="dc.deviceControlHandle(child, 4)"> ④
																	<span
																		v-if="dc.dataObj[child.dataKey].btnObj.open4.work">
																		<span v-if="dc.countdownObj[child.dataKey]">
																			({{ dc.countdownObj[child.dataKey] }})
																		</span>
																		<span v-else class="timeout"
																			style="color: red;">
																			{{ dc.timeoutObj[child.dataKey] }}
																		</span>
																	</span>
																</u-button>
																<u-line-progress height="8" :showText="false"
																	:percentage="dc.dataObj[child.dataKey].btnObj.open4.openAngle"
																	activeColor="#74ffd4" inactiveColor="#c7c7c7" />
															</view>
														</view>
													</u-col>
													<u-col span="3" style="margin-top: 10px;">
														<u-button :disabled="child.device.disable?.open3"
															:type="dc.getBtnType(2, child.dataKey, 'open3')"
															:plain="dc.dataObj[child.dataKey].btnObj.open3.work"
															@click="dc.deviceControlHandle(child, 3)"> ③
															<span v-if="dc.dataObj[child.dataKey].btnObj.open3.work">
																<span v-if="dc.countdownObj[child.dataKey]">
																	({{ dc.countdownObj[child.dataKey] }})
																</span>
																<span v-else class="timeout">
																	{{ dc.timeoutObj[child.dataKey] }}
																</span>
															</span>
														</u-button>
														<u-line-progress height="8" :showText="false"
															:percentage="dc.dataObj[child.dataKey].btnObj.open3.openAngle"
															activeColor="#74ffd4" inactiveColor="#c7c7c7" />
													</u-col>
												</u-row>
												<u-row v-else>
													未知的设备
												</u-row>
												<view class="tips font-red"
													v-if="dc.dataObj[child.dataKey].warning && dc.dataObj[child.dataKey].warning.length">
													<view class="iconfont icon-guzhang icon">
														{{ dc.dataObj[child.dataKey].warning.toString() }}
													</view>
												</view>
											</view>
											<!-- 无数据上报 -->
											<view class="control" v-else>
												<u-row
													v-if="child.device.deviceTypeKey == 'valve' || child.device.deviceTypeKey == 'fiveValve'">
													<u-col span="3"></u-col>
													<u-col span="6">
														<view class="valve">
															<view class="btn-img">
																<view class="text">
																	<view class="middle" style="width: 100%;">
																		无数据上报
																	</view>
																</view>
																<image src="../static/images/valves/3/valve3.png"
																	mode="widthFix" />
															</view>
														</view>
													</u-col>
													<u-col span="3"></u-col>
												</u-row>
												<u-row v-else>
													未知的设备
												</u-row>
											</view>
										</view>
										<view v-else class="card-grey">
											{{ child.showName }}
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<u-empty mode="data" style="height: 50vh;" v-else />
				</view>
			</view>
		</view>
	</view>

	<!-- 弹窗 -->
	<view>
		<!-- 地块选择 -->
		<custom-select-land ref="landRef" :data="ijs.companys" :defaultSelect="ijs.land" @getLand="getLand"
			@select="landChange" />
		<!-- 角度 -->
		<custom-angle-slider ref="refAngleSlider" mode="bottom" @close="" @confirm="swiperConfirm" />
	</view>

</template>

<script>
	import store from "@/store"

	export default {
		data() {
			return {
				user: store.state.user.user,
				title: "",
				ijs: getApp().ijs, // 首页公共js
				dc: getApp().dc, // 设备控制公共代码
				mqttshow: false, // h5端手动链接mqtt按钮显示
				mqttConnected: false, //	mqtt链接状态
				screenValue: "", // 关键字搜索
				isSticky: false, //吸顶状态
				stateScreen: { // 吸顶筛选选中的项 值为 click
					all: null,
					online: null,
					error: null
				},
				collapse: [], // 折叠面板打开的item
				woloaded: null, //已经加载过的wo数据
			}
		},
		onLoad() {
			console.error("onLoad")
			// 监听mqtt链接状态
			uni.$off("mqtt-connected");
			uni.$on("mqtt-connected", (e) => {
				this.mqttConnected = e;
			});

			this.ijs.initData(this.user.userId, (land, wo) => {
				getApp().getWoList(land, wo);
			});
			// this.ijs.getWoList({
			// 	id: 10,
			// 	landName: "西安测试地块"
			// });
		},
		onShow() {
			this.title = this.ijs?.land?.landName || "田间";

			// // 监听当前页面的加载状态
			// uni.$off("index-showLoading");
			// uni.$on("index-showLoading", (flg) => {
			// 	if (flg) {
			// 		uni.showLoading();
			// 	} else {
			// 		uni.hideLoading();
			// 	}
			// });
			// 监听控制角度弹窗通知
			uni.$off("open-angle-slider");
			uni.$on("open-angle-slider", (e) => {
				console.error("打开角度选择：", e)
				this.$refs.refAngleSlider.show(e.title, e.extra, e.value, e.other);
			});
		},
		onHide() {
			uni.$off("index-showLoading");
			uni.$off("open-angle-slider");
		},
		onPageScroll(e) { // 页面滚动触发事件的处理函数
			console.log(e.scrollTop); // 输出滚动位置的垂直距离
			if (e.scrollTop >= 80) {
				this.isSticky = true;
			} else {
				this.isSticky = false;
			}
		},
		methods: {
			mqttLink() {
				getApp().mqttLink(this.user.userId);
			},
			mqttEnd() {
				getApp().mqttEnd();
			},
			mqttSubscribes() {
				getApp().mqttSubscribes();
			},
			// 地块选择回调
			landChange(e) {
				this.title = e.landName;
			},
			// 获取地块信息
			getLand(e) {
				this.ijs.getLand(e.node).then(res => {
					console.error("res：", res)
					this.$refs.landRef.addLand(e, res.data);
				});
			},
			//去扫码
			toQRCode() {},

			// 顶部关键字搜索
			handleKeyup(e) {
				this.dc.screenDataByString(this.screenValue);
				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs.collapseRef.resize();
					}, 500)
				})
			},
			// 工作状态筛选
			forwardChange(e) {
				this.screenValue = "";
				this.dc.workingForward(e);
			},
			// 阀门状态筛选
			valveStateScreen(type) {
				this.screenValue = "";
				if (this.dc.screenKey == type) {
					type = "";
				}
				this.dc.showType(type);
				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs.collapseRef.resize();
					}, 500)
				})
			},
			// 显示墒情
			showDeviceMap() {
				if (!this.dc.others.deviceMp.length) {
					this.$toast("无墒情数据");
				}
				console.error('显示墒情');
			},

			// 角度控制回调
			swiperConfirm(e) {
				this.dc.buildCommand(e.item, e.index, e.value, e.other);
			},


			// 折叠面板点击
			handleCollapseClick(index) {
				if (!this.woloaded) {
					let woloaded = {};
					this.dc.wo.forEach((_item, _index) => {
						woloaded[_index] = {
							loaded: false,
							open: false,
							time: _item.children.length * 10
						}
					});
					this.woloaded = woloaded;
				}

				// 关闭面板
				if (this.woloaded[index].open) {
					this.woloaded[index].open = false;
					return;
				}
				//打开面板
				if (!this.woloaded[index].loaded) {
					uni.showLoading({
						mask: true
					})
					this.woloaded[index].loaded = true;
				}
				this.woloaded[index].open = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs.collapseRef.resize();
						uni.hideLoading();
						this.scrollToCollapseItem(index);
					}, this.woloaded[index].time)
				});
			},
			// 折叠面板跳转指定位置
			scrollToCollapseItem(index) {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll(`.collapseItem`)
					.boundingClientRect((data) => {
						console.error("data:", data);
						let offsetTop = 110;
						data.every((_item, _index) => {
							if (index == 0) {
								return false; // 跳出循环 
							} else {
								offsetTop = offsetTop + Math.ceil(_item.height);
								if (_index == index) {
									offsetTop = offsetTop - 50;
									return false; // 跳出循环
								}
								return true; // 继续下一次迭代
							}
						});
						uni.pageScrollTo({
							scrollTop: offsetTop,
							duration: 50 // 滚动动画持续时间
						});
					})
					.exec();
			}
		},
	}
</script>

<style lang="scss" scoped>
	// .content {
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	justify-content: center;
	// }
	page {
		background-color: #ffffff;
	}

	// 箭头隐藏
	::v-deep.u-cell__right-icon-wrap {
		display: none;
	}

	// 顶部nav
	::v-deep.uni-navbar__header-container {
		align-items: center;
		justify-content: center;

		&>view {
			font-size: 36rpx;
		}
	}

	::v-deep.uni-navbar__header-btns-left {
		font-size: 27rpx;
	}

	::v-deep.uni-navbar__header-btns-right .icon {
		font-size: 44rpx;
		margin-left: 10px;
	}

	// 搜索框
	.search {
		display: flex;
		align-items: center;
		flex-direction: row;

		.search-l {
			flex: 1;
			margin-right: 20px;

			::v-deep.u-search__action {
				font-size: 16px;
				color: #fff;
			}
		}
	}

	.header-section {
		padding: 0px 10px 102px 10px;
		background-color: #39ac4f;
		color: white;
		border-radius: 0 0 30px 30px;

		// ::v-deep.u-search__content,
		// ::v-deep.u-search__content__input {
		// 	background-color: white !important;
		// 	border-radius: 8px !important;

		// 	.u-icon__icon {
		// 		color: #39ac4f !important;
		// 	}
		// }

		// 复选框
		// ::v-deep .u-checkbox__icon-wrap {
		// 	background-color: transparent !important;
		// 	border-color: #ffffff !important;
		// }
	}

	.content {
		background-color: #fff;
		min-height: 100%;
	}

	// ::v-deep.u-search__action {
	// 	display: none;
	// }

	.content-section {
		position: relative;
		top: -92px;

		.grey-box.normal {

			border-radius: 15px 15px 0 0;
			padding-bottom: 0;

			.u-grid {
				margin-bottom: 0;
			}
		}

		@keyframes opacity {
			from {
				transform: translateY(-100%);
				opacity: 0;
			}

			to {
				transform: translateY(0);
				opacity: 1;
			}
		}
		

		.grey-box.ceiling {
			animation: opacity 1s ease-in-out forwards;
			// transition: transform 1s;
			// transform: translateY(-100%);
			// opacity: 0;
			
			
			
			// transition: opacity 1s;
			border-radius: 0;
			padding-bottom: 0px;
			margin: 0;
			box-shadow: 0 1px 9px rgba(209, 209, 209, 0.5);
			z-index: 10;
			position: fixed;
			width: 100%;
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			/* #ifdef APP-PLUS */
			top: 44px;
			/* #endif */


			.u-grid {
				.u-grid-item {
					padding-bottom: 5px;
					box-shadow: none;

					.flex {
						&>view {
							margin: -2px 5px 0 0;
							color: #39ac4f;
							font-size: 50rpx;
						}

						::v-deep.u-badge {
							position: relative;
							right: auto;
							top: auto;
							height: 10px;
						}
					}

				}

				.click {

					.flex {
						&>view {
							color: #fff;
						}
					}

				}
			}

		}



		.grey-box {
			background-color: #f3f3f3;
			margin: 0 10px;
			border-radius: 15px;
			padding: 10px 5px;

			.u-grid {
				margin-bottom: 10px;

				.u-grid-item {
					margin: auto 5px;
					width: calc(25% - 10px) !important;
					background-color: #ffffff !important;
					padding: 10px 0;
					border-radius: 10px;
					box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);

					&>view {
						color: #39ac4f;
						font-size: 60rpx;
					}

					&>.text {
						color: #999999;
						display: block;
						font-size: 28rpx;
						margin-top: 8px;
						min-width: 25px;
					}

					::v-deep.u-badge {
						position: absolute;
						right: 3px;
						top: 3px;
					}

				}

				.click {
					background-color: #39ac4f !important;

					&>view {
						color: #fff;
					}

					&>.text {
						color: #fff;
					}

					::v-deep.u-badge {
						background-color: #ffffff !important;
						color: #39ac4f;
					}
				}
			}
		}

		.card {


			::v-deep.uni-collapse {
				padding: 0 10px;
				border-radius: 10px;
			}

			// 基站列表title
			.jz-title {
				padding: 10px 0;

				.icon {
					vertical-align: top;
					margin-right: 5px;
					font-size: 44rpx;
					color: #39ac4f;
				}

				text {
					font-size: 32rpx;
				}

				// .icon-xh.xh_green {
				// 	color: #39ac4f
				// }

				// .icon-xh.xh_red {
				// 	color: #e60012
				// }
			}

			.u-collapse-content {
				.u-row {
					padding-bottom: 10px;
				}

				// 水阀按钮
				// .btn.v-btn {
				// 	width: 80px;
				// }

				// .btn.v-btn2 {
				// 	font-size: 12px;
				// 	width: 90px;
				// }

				// .buttons .load-text {
				// 	font-size: 12px;
				// }
			}

			// 水阀列表title
			.sf-title {
				font-size: 24rpx;
				color: #999999;
				padding: 10px 0;

				.text {
					font-size: 32rpx;
					color: #333;
				}

				.icon {
					vertical-align: top;
					margin-right: 5px;
					font-size: 44rpx;
					color: #39ac4f;
				}
			}

		}

		.card-grey .card-title {
			padding-bottom: 0;
		}
	}


	.font-green {
		color: #39ac4f !important;
	}

	.font-red {
		color: #e60012 !important;
	}

	/* 首页阀门列表 */
	.control {
		padding: 5px 1px;

		.u-button {
			width: 100% !important;
			min-width: 77px;
		}

		.u-line-progress {
			min-width: 77px;
			margin-top: 5px;
		}
	}

	.tips {
		font-size: 12rpx;
		margin: 10px;
	}

	.valve {
		display: flex;
		align-items: center;
		flex-direction: column;

		.timeout {
			color: red !important;
			font-size: 10px;
		}
	}

	.valve>view {
		display: flex;
		justify-content: center;
	}

	.valve .btn-img {
		width: 130px;
		margin: 3px;
		position: relative;
	}

	.valve .btn-img .text,
	.valve .btn-img .text5 {
		position: absolute;
		z-index: 2;
		width: -webkit-fill-available;
		height: -webkit-fill-available;
	}

	.valve .btn-img .text>view,
	.valve .btn-img .text5>view {
		position: absolute;
		font-weight: bold;
		font-size: 14px;
	}

	.valve .btn-img .text .left,
	.valve .btn-img .text5 .left {
		left: 0;
		top: 24%;
	}

	.valve .btn-img .text5 .left {
		top: 41%;
	}

	.valve .btn-img .text .top,
	.valve .btn-img .text5 .top {
		top: -12px;
		left: 33%;
	}

	.valve .btn-img .text5 .top {
		top: 0px;
	}

	.valve .btn-img .text .middle,
	.valve .btn-img .text5 .middle {
		font-size: 18px;
		top: 36%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #e60012;
		text-align: center;
	}

	.valve .btn-img .text5 .middle {
		top: 50%;
	}

	.valve .btn-img .text .right,
	.valve .btn-img .text5 .right {
		right: 0;
		top: 24%;
	}

	.valve .btn-img .text5 .right {
		top: 41%;
	}

	.valve .btn-img .text .bottom,
	.valve .btn-img .text5 .bottom {
		bottom: -4px;
		left: 33%;
	}

	.valve .btn-img .text5 .bottom {
		bottom: 0px;
	}
</style>