<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-scan" @click="toQRCode"></view>
			</view>
		</template>
	</custom-nav-bar>
	<!-- 地图容器 -->
	<view ref="mapContainer"></view>
	<!-- 控制弹出 -->
	<button class="button" type="primary" @click="toggle('bottom')"><text class="button-text">底部</text></button>
	<uni-popup ref="popup" @change="change">
		<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
			<view class="card-grey">
				<view class="card-title">
					<u-row>
						<u-col span="2">
							<view>
								<text class="font-green">●</text>
								A1-1
							</view>
						</u-col>
						<u-col span="5">
							<view class="fixed">
								<view class="iconfont icon-wendu icon" style="float: left;margin-left: 5px;">
								</view>
							</view>
						</u-col>
						<u-col span="5" style="align-items: flex-end;">
							<view class="fixed">
								<u-button type="success" size="mini" text="刷新" />
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="control">
					<u-row>
						<u-col span="3">
							<u-button type="success">
								<span>60</span>
								①
								<i class="iconfont icon-suoding"></i>
							</u-button>

						</u-col>
						<u-col span="6">
							<view class="valve">
								<view>
									<u-button type="success">
										<span>60</span>
										①
										<i class="iconfont icon-suoding"></i>
									</u-button>
								</view>
								<view class="btn-img">
									<view class="text">
										<view class="left">
											111
										</view>
										<view class="top">22</view>
										<view class="middle">
											离线
										</view>
										<view class="right">
											333
										</view>
										<view class="bottom">444</view>
									</view>
									<image src="../static/images/valves/3/valve3_open.gif" mode="widthFix" />
								</view>
								<view>
									<u-button type="success">
										<span>60</span>
										①
										<i class="iconfont icon-suoding"></i>
									</u-button>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<u-button type="success">
								<span>60</span>
								①
								<i class="iconfont icon-suoding"></i>
							</u-button>
						</u-col>
					</u-row>
				</view>
			</view>

		</view>
	</uni-popup>

	<!-- 地块选择 -->
	<custom-select-land ref="landRef" :data="ijs.companys" :defaultSelect="ijs.land" @getLand="getLand"
		@select="landChange" />
</template>

<script>
	import store from "@/store"


	export default {
		data() {
			return {
				map: null,
				user: store.state.user.user,
				title: "",
				ijs: getApp().ijs, // 首页公共js
				dc: getApp().dc, // 设备控制公共代码
				mqttshow: false, // h5端手动链接mqtt按钮显示
				mqttConnected: false, //	mqtt链接状态
			}
		},
		onLoad() {
			console.error("onLoad")
			// 监听mqtt链接状态
			uni.$off("mqtt-connected");
			uni.$on("mqtt-connected", (e) => {
				this.mqttConnected = e;
			});

		},
		onShow() {
			this.title = this.ijs?.land?.landName || "田间";

			// 监听控制角度弹窗通知
			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) {},
		mounted() {
			this.initMap();
		},
		methods: {
			initMap() {
				// 动态加载天地图JSAPI
				const script = document.createElement('script');
				script.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=16bef4eafae69a2af0ef268fbf64e3c9';
				script.onload = () => {
					// 地图初始化
					const map = new T.Map('mapContainer');
					// 设置地图中心点和级别
					map.centerAndZoom(new T.LngLat(116.404, 39.915), 10);
					// 添加缩放控件
					map.addControl(new T.Control.Zoom());
					// 添加比例尺控件
					map.addControl(new T.Control.Scale());
					// 添加地图类型切换控件
					map.addControl(new T.Control.LayerSwitcher());
				};
				document.head.appendChild(script);
			},
			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 => {
					this.$refs.landRef.addLand(e, res.data);
				});
			},
			// 去扫码
			toQRCode() {
				var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")

				mpaasScanModule.mpaasScan({
					// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
					'scanType': ['qrCode', 'barCode'],
					// 是否隐藏相册，默认false不隐藏
					'hideAlbum': false,
					//ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文                       
					'language': 'en',
					//相册选择照片识别错误提示(ios)
					'failedMsg': '未识别到二维码，请重试',
					//Android支持全屏需要设置此参数
					'screenType': 'full'
				}, (ret) => {
					console.error("ret:", ret);
					if (ret.resp_code == 1000) {
						// bingdingData.value.privateSeal = ret.resp_result;
						// showModal.value = true
					}
				})
			},
			// 控制弹出
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-popup {
		z-index: 1000;
	}

	// 水阀列表title
	.card-grey {
		border-radius: 10px 10px 0 0;
		margin-bottom: 0;
	}

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

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

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

	/* 首页阀门列表 */
	.control {
		padding: 20px 10px;

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

		.btn-img {
			width: 160px;
			margin: 15px;
			position: relative;

			img {
				width: 100%;
			}

			.text,
			.text5 {
				&>view {
					position: absolute;
					z-index: 2;
					font-weight: bold;
					font-size: 16px;
					color: #333;
				}

				.left {
					left: 0;
					top: calc(50% - 17px);
					transform: translateY(-50%);
				}

				.top {
					top: 0;
					left: 50%;
					transform: translateX(-50%);
				}

				.middle {
					font-size: 24px;
					top: calc(50% - 18px);
					left: 50%;
					transform: translate(-50%, -50%);
					color: #e60012;
					text-align: center;
				}

				.right {
					right: 0;
					top: calc(50% - 17px);
					transform: translateY(-50%);
				}

				.bottom {
					bottom: 0;
					right: 50%;
					transform: translateX(50%);
				}
			}

			.text5 {
				.left {
					left: 0;
					top: calc(50% - 4px);
					transform: translateY(-50%);
				}

				.middle {
					top: calc(50% - 5px);
				}

				.right {
					right: 0;
					top: calc(50% - 4px);
					transform: translateY(-50%);
				}
			}

		}
	}
</style>