<template>
	<view class="page">

		<u-navbar title="地图" :is-back='false' :border-bottom="false" :background="bgc" title-color='#2E4975'
			title-size='36' height='36'></u-navbar>
		<view class="slider">
			<view class="tit">
				电量区间
			</view>
			<slider-range :value="rangeValue" :min="rangeMin" :max="rangMax" :step="1" :bar-height="3" :block-size="20"
				background-color="#EEEEF6" active-color="#4C97E7" :format="format" :decorationVisible="true"
				@change="handleRangeChange"></slider-range>
		</view>

		<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
			:show-location="true" :markers="markers" :polygons="polyline" @markertap="onMarkerTap" >
		</map>
		<view class="btn_box">
			<view class="btn1">
				车辆扫码
			</view>
			<view class="btn2">
				车辆搜索
			</view>
		</view>
		<view class="decice_cont">
			<view class="cont" @click="changeidx(7)">
				<view class="text" :class="statusidx==7?'act1':''">
					全部设备
				</view>
				<view class="text" :class="statusidx==7?'act1':''">
					{{deviceNum.allNum}}
				</view>
			</view>
			<!-- <view class="cont" @click="changeidx(0)">
				<view class="text" :class="statusidx==0?'act1':''">
					未上架
				</view>
				<view class="text" :class="statusidx==0?'act1':''">
					1
				</view>
			</view> -->
			<view class="cont" @click="changeidx(1)">
				<view class="text" :class="statusidx==1?'act1':''">
					待租
				</view>
				<view class="text" :class="statusidx==1?'act1':''">
					{{deviceNum.normalNum}}
				</view>
			</view>
			<view class="cont" @click="changeidx(2)" style="width: 140rpx;">
				<view class="text" :class="statusidx==2?'act1':''">
					预约中
				</view>
				<view class="text" :class="statusidx==2?'act1':''">
					{{deviceNum.inAppointmentNum}}
				</view>
			</view>
			<view class="cont" @click="changeidx(3)">
				<view class="text" :class="statusidx==3?'act1':''">
					骑行中
				</view>
				<view class="text" :class="statusidx==3?'act1':''">
					{{deviceNum.ridingNum}}
				</view>
			</view>
			<view class="cont" @click="changeidx(4)">
				<view class="text" :class="statusidx==4?'act1':''">
					临时锁车
				</view>
				<view class="text" :class="statusidx==4?'act1':''">
					{{deviceNum.temporarilyLockNum}}
				</view>
			</view>
			<view class="cont" @click="changeidx(8)">
				<view class="text" :class="statusidx==8?'act1':''">
					下线
				</view>
				<view class="text" :class="statusidx==8?'act1':''">
					{{deviceNum.disabledNum}}
				</view>
			</view>
			<view class="cont" @click="changeidx(9)">
				<view class="text" :class="statusidx==9?'act1':''">
					离线
				</view>
				<view class="text" :class="statusidx==9?'act1':''">
					{{deviceNum.offlineNum}}
				</view>
			</view>
			<!-- <view class="cont">
				<view class="text">
					调度设备
				</view>
				<view class="text">
					1
				</view>
			</view> -->
		</view>
		<tab-bar :indexs='1' style=""></tab-bar>
	</view>
</template>

<script>
	import SliderRange from '@/pages_admin/components/primewind-sliderrange/index.vue'
	let timerId;
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				latitude: '26.940805',
				longitude: '120.356157',
				isMap: false,
				zoomSize: 15,
				markers: [],
				polyline: [],
				polygons: [],
				fixdata: [],
				eledata: [],
				listData: [],
				infonum: {},
				rangeMin: 0,
				rangMax: 100,
				rangeValue: [1, 99],
				status0: [], //未上架
				status1: [], //正常
				status2: [], //预约中
				status3: [], //骑行中
				status4: [], //临时锁车
				status8: [], //下线
				status9: [], //离线
				markdata: {

				},
				statusidx: 7,
				deviceNum: {},
				


			}
		},
		components: {
			SliderRange
		},
		onShow() {
			this.$store.dispatch('userInfo', this.$u).then(() => {

				// 执行其他操作...
			});


			this.getArea()

			this.getmarks()
			this.getordernum()
			this.allVehicleNum()
		},
		computed: {
			userId() {
				return this.$store.getters.userId;
			},
		},
		methods: {
			allVehicleNum() {
				let data = {
					powerStart: this.rangeValue[0],
					powerEnd: this.rangeValue[1]
				}
				this.$u.get('/appVerify/allVehicleNum?', data).then((res) => {
					if (res.code === 200) {
						// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
						this.deviceNum = res.data
						// console.log(this.polyline);
					}
				}).catch(error => {
					console.error("Error fetching area data:", error);
				});
			},
			changeidx(ids) {
				this.statusidx = ids
				this.getmarks()
			},
			markstause() {
				// console.log(this.status9, 'aaaaaaa');
				this.status0.forEach(item => {
					this.markers.push({
						id: parseFloat(item.sn),
						latitude: parseFloat(item.latitude),
						longitude: parseFloat(item.longitude),
						// title: item.deviceName,
						width: 40,
						height: 40,
						iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u76wT0QiWdAGJdF4v6AR',
						callout: {
							content: '未上架', // 修改为你想要显示的文字内容
							color: '#ffffff', // 修改为文字颜色
							fontSize: 14, // 修改为文字大小
							borderRadius: 10, // 修改为气泡圆角大小
							bgColor: '#000000', // 修改为气泡背景颜色
							padding: 6, // 修改为气泡内边距
							display: 'ALWAYS', // 修改为气泡的显示策略
						}
					})
				})
				// https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX
				// https://lxnapi.ccttiot.com/bike/img/static/u4UKmB47AxOj3YKIaajM
				this.status1.forEach(item => {
					this.markers.push({
						id: parseFloat(item.sn),
						latitude: parseFloat(item.latitude),
						longitude: parseFloat(item.longitude),
						// title: item.deviceName,
						width: 40,
						height: 40,
						iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX',
						callout: {
							content: '待租' + item.remainingPower + '%', // 修改为你想要显示的文字内容
							color: '#2679D1', // 修改为文字颜色
							fontSize: 14, // 修改为文字大小
							borderRadius: 10, // 修改为气泡圆角大小
							bgColor: '#D4ECFF', // 修改为气泡背景颜色
							padding: 6, // 修改为气泡内边距
							display: 'ALWAYS', // 修改为气泡的显示策略
						}
					})
				})
				this.status2.forEach(item => {
					this.markers.push({
						id: parseFloat(item.sn),
						latitude: parseFloat(item.latitude),
						longitude: parseFloat(item.longitude),
						// title: item.deviceName,
						width: 40,
						height: 40,
						iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX',
						callout: {
							content: '预约' + item.remainingPower + '%', // 修改为你想要显示的文字内容
							color: '#2679D1', // 修改为文字颜色
							fontSize: 14, // 修改为文字大小
							borderRadius: 10, // 修改为气泡圆角大小
							bgColor: '#D4ECFF', // 修改为气泡背景颜色
							padding: 6, // 修改为气泡内边距
							display: 'ALWAYS', // 修改为气泡的显示策略
						}
					})
				})
				this.status3.forEach(item => {
					this.markers.push({
						id: parseFloat(item.sn),
						latitude: parseFloat(item.latitude),
						longitude: parseFloat(item.longitude),
						// title: item.deviceName,
						width: 40,
						height: 40,
						iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX',
						callout: {
							content: '骑行' + item.remainingPower + '%', // 修改为你想要显示的文字内容
							color: '#2679D1', // 修改为文字颜色
							fontSize: 14, // 修改为文字大小
							borderRadius: 10, // 修改为气泡圆角大小
							bgColor: '#D4ECFF', // 修改为气泡背景颜色
							padding: 6, // 修改为气泡内边距
							display: 'ALWAYS', // 修改为气泡的显示策略
						}
					})
				})
				this.status4.forEach(item => {
					this.markers.push({
						id: parseFloat(item.sn),
						latitude: parseFloat(item.latitude),
						longitude: parseFloat(item.longitude),
						// title: item.deviceName,
						width: 40,
						height: 40,
						iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX',
						callout: {
							content: '锁车' + item.remainingPower + '%', // 修改为你想要显示的文字内容
							color: '#2679D1', // 修改为文字颜色
							fontSize: 14, // 修改为文字大小
							borderRadius: 10, // 修改为气泡圆角大小
							bgColor: '#D4ECFF', // 修改为气泡背景颜色
							padding: 6, // 修改为气泡内边距
							display: 'ALWAYS', // 修改为气泡的显示策略
						}
					})
				})
				this.status8.forEach(item => {
					this.markers.push({
						id: parseFloat(item.sn),
						latitude: parseFloat(item.latitude),
						longitude: parseFloat(item.longitude),
						// title: item.deviceName,
						width: 40,
						height: 40,
						iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u76wT0QiWdAGJdF4v6AR',
						callout: {
							content: '下线', // 修改为你想要显示的文字内容
							color: '#ffffff', // 修改为文字颜色
							fontSize: 14, // 修改为文字大小
							borderRadius: 10, // 修改为气泡圆角大小
							bgColor: '#000000', // 修改为气泡背景颜色
							padding: 6, // 修改为气泡内边距
							display: 'ALWAYS', // 修改为气泡的显示策略
						}
					})
				})
				setTimeout(() => {
					this.status9.forEach(item => {
						this.markers.push({
							id: parseFloat(item.mac),
							latitude: parseFloat(item.latitude),
							longitude: parseFloat(item.longitude),
							// title: item.deviceName,
							width: 40,
							height: 40,
							iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u4UKmB47AxOj3YKIaajM',
							callout: {
								content: '离线', // 修改为你想要显示的文字内容
								color: '#ffffff', // 修改为文字颜色
								fontSize: 14, // 修改为文字大小
								borderRadius: 10, // 修改为气泡圆角大小
								bgColor: '#000000', // 修改为气泡背景颜色
								padding: 6, // 修改为气泡内边距
								display: 'ALWAYS', // 修改为气泡的显示策略
							}
						})
					})
				}, 200)

			},
			getmarks() {
			
				this.markers = []
				this.status0 = []
				this.status1 = []
				this.status2 = []
				this.status3 = []
				this.status4 = []
				this.status8 = []
				this.status9 = []
				let data = {
					powerStart: this.rangeValue[0],
					powerEnd: this.rangeValue[1],
					sort: 'desc',
				
				}
				if (this.statusidx != 7&&this.statusidx != 9) {
					data.status = this.statusidx
					this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
						if (res.code == 200) {
							this.showmap = true
							this.listData = res.data;
							res.data.forEach(item => {
								if (item.status == 0) {
									this.status0.push(item);
					
								} else if (item.status == 1) {
									this.status1.push(item);
								} else if (item.status == 2) {
									this.status2.push(item);
								} else if (item.status == 3) {
									this.status3.push(item);
								} else if (item.status == 4) {
									this.status4.push(item);
								} else if (item.status == 8) {
									this.status8.push(item);
								}
								if (item.onlineStatus == 0) {
									this.status9.push(item);
								}
								// 可以在这里执行其他针对每个项的操作
							});
							this.markstause()
							this.getParking()
							// this.markers = markers;
					
						} else {
							// 处理接口返回错误的情况
						}
					}).catch(error => {
						// 处理接口请求失败的情况
					});
				}else if(this.statusidx==7){
					data.status=''
					this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
						if (res.code == 200) {
							this.showmap = true
							this.listData = res.data;
							res.data.forEach(item => {
								if (item.status == 0) {
									this.status0.push(item);
					
								} else if (item.status == 1) {
									this.status1.push(item);
								} else if (item.status == 2) {
									this.status2.push(item);
								} else if (item.status == 3) {
									this.status3.push(item);
								} else if (item.status == 4) {
									this.status4.push(item);
								} else if (item.status == 8) {
									this.status1.push(item);
								}
								if (item.onlineStatus == 0) {
									this.status9.push(item);
								}
								// 可以在这里执行其他针对每个项的操作
							});
							this.markstause()
							this.getParking()
							// this.markers = markers;
					
						} else {
							// 处理接口返回错误的情况
						}
					}).catch(error => {
						// 处理接口请求失败的情况
					});
				}else if(this.statusidx==9){
					data.status=''
					this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
						if (res.code == 200) {
							this.showmap = true
							this.listData = res.data;
							res.data.forEach(item => {
								
								if (item.onlineStatus == 0) {
									this.status9.push(item);
								}
								// 可以在这里执行其他针对每个项的操作
							});
							this.markstause()
							this.getParking()
							// this.markers = markers;
					
						} else {
							// 处理接口返回错误的情况
						}
					}).catch(error => {
						// 处理接口请求失败的情况
					});
				}
			
				
			},
			format(val) {
				return val + '%'
			},
			handleRangeChange(e) {
			    // 每次滑动时清除之前的定时器
			    clearTimeout(timerId);
			    // 设置一个新的定时器，在滑动停止后 500ms 执行 getmarks 方法
			    timerId = setTimeout(() => {
					 this.rangeValue = e;
			        this.getmarks();
			    }, 500);
			},
			onMarkerTap(e) {
				if (e.type === 'markertap') {
					console.log('点击了标记：', e.markerId);
					// 这里可以根据需要处理点击标记的逻辑
					// 阻止事件冒泡

					this.sn = e.markerId
					this.todetail()

				}

			},
			todetail() {
				for (let item of this.fixdata) {
					if (item.sn == this.sn) {
						uni.navigateTo({
							url: '/page_fix/repair/repair_detail?id=' + item.id
						})
					}
				}

				for (let item of this.eledata) {
					if (item.sn == this.sn) {
						uni.navigateTo({
							url: '/page_fix/repair/repair_detail?id=' + item.id
						})
					}
				}


			},

			topage() {
				uni.navigateTo({
					url: '/page_fix/repair/repair_index'
				})
			},
			getordernum() {
				// 发送请求获取数据
				this.$u.get('/appVerify/adminOrder/num?adminId=' + 2).then((res) => {
					if (res.code === 200) {
						// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
						this.infonum = res.data
						// console.log(this.polyline);
					}
				}).catch(error => {
					console.error("Error fetching area data:", error);
				});
			},
			getArea() {
				// 发送请求获取数据
				this.$u.get('/app/area/list').then((res) => {
					if (res.code === 200) {
						// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
						const polylines = res.rows
							.filter(area => area.boundaryStr) // 过滤掉boundary为空的数据
							.map(area => this.convertBoundaryToPolyline(area.boundaryStr));
						// 更新折线数据
						this.polyline = polylines;
						// console.log(this.polyline);
					}
				}).catch(error => {
					console.error("Error fetching area data:", error);
				});
			},
			convertBoundaryToPolylines(boundaries) {
				return boundaries.map(boundary => {
					if (!boundary) return null;
					let coords;
					try {
						coords = JSON.parse(boundary);
					} catch (error) {
						console.error("Error parsing boundary JSON:", error);
						return null;
					}
					if (!Array.isArray(coords)) {
						console.error("Parsed boundary is not an array:", coords);
						return null;
					}
					const points = coords.map(coord => ({
						latitude: coord[1],
						longitude: coord[0]
					}));
					return {
						points: points,
						fillColor: "#55888840", //填充颜色
						strokeColor: "#558888", //描边颜色
						strokeWidth: 2, //描边宽度
						zIndex: 1, //层级
					};
				}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
			},
			getParking() {
				// 发送请求获取数据
				this.$u.get('/app/parking/list').then((res) => {
					if (res.code === 200) {
						// 处理接口返回的数据
						const validBoundaries = res.rows.map(row => row.boundaryStr).filter(boundary =>
							typeof boundary === 'string' && boundary.trim() !== '');
						const polylines = this.convertBoundaryToPolylines(validBoundaries);

						// 将处理后的数据添加到 this.polyline 中
						this.polyline = this.polyline.concat(polylines);
						// console.log(this.polyline);
						res.rows.forEach(item => {
							this.markers.push({
								id: parseFloat(item.parkingId),
								latitude: parseFloat(item.latitude),
								longitude: parseFloat(item.longitude),
								// title: item.deviceName,
								width: 20,
								height: 40,
								iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
								callout: {
									content: item.parkingName, // 修改为你想要显示的文字内容
									color: '#ffffff', // 修改为文字颜色
									fontSize: 14, // 修改为文字大小
									borderRadius: 10, // 修改为气泡圆角大小
									bgColor: '#000000', // 修改为气泡背景颜色
									padding: 6, // 修改为气泡内边距
									display: 'ALWAYS', // 修改为气泡的显示策略
								}
							})
						})
					}
				}).catch(error => {
					console.error("Error fetching parking data:", error);
				});
			},
			convertBoundaryToPolyline(boundary) {
				if (!boundary) return null;

				const points = JSON.parse(boundary).map(coord => ({
					latitude: coord[1],
					longitude: coord[0]
				}));

				const polyline = {
					points: points,
					fillColor: "#55888840", //填充颜色
					strokeColor: "#22FF00", //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 1, //层级
				};

				return polyline;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7FAFE;
	}

	.page {
		width: 750rpx;

		.decice_cont {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			padding: 22rpx 28rpx;

			.cont:nth-child(5n) {
				margin-right: 0;
			}

			.cont {
				margin-top: 18rpx;
				margin-right: 10rpx;
				// display: flex;
				width: 130rpx;

				.text {
					width: 100%;
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					line-height: 38rpx;
					color: #3D3D3D;
				}

				.act1 {
					color: #4C97E7;
				}
			}


		}

		.btn_box {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;

			.btn1 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 376rpx;
				height: 74rpx;
				background: #D4ECFF;
				font-weight: 500;
				font-size: 40rpx;
				color: #4C97E7;
			}

			.btn2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 374rpx;
				height: 74rpx;
				background: #4C97E7;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}
		}

		.slider {
			.tit {
				font-weight: 500;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			width: 752rpx;
			height: 150rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.map {
			width: 750rpx;
			height: 906rpx;
		}


	}
</style>