<template>
	<view class="websit-node-wrap">
		<view class="map-content" id="map"></view>
	<!-- 	<view class="websit-node-head-wrap" @click="toAddWebsit">
			<image src="../../static/images/map-tip.png" mode="widthFix" class="img-1"></image>
			<image src="../../static/images/go.png" mode="widthFix" class=" animate__heartBeat  btn-img" ></image>
		</view> -->
		<view class="websit-node-list-wrap" >
			<view class="ios-wrap">
				<view class="head-tip"></view>
				<view class="tip-tap-wrap">
					<view v-for="(item, index) in tipList" :key="index" :class="{
	              'tip-item': true,
	              'tip-active': index === currentTipIndex,
	            }" @click="changeTabEvent(index)">
						{{ item.label }}
					</view>
				</view>
				<view class="websit-item-wrap">
					<view class="websit-item" v-for="(item, index) in websitList" :key="index">
						<view class="left-info">
							<view class="head" v-if="currentTipIndex===0">{{item.dizhi}}网点</view>
							<view class="flyer-head" v-if="currentTipIndex===1">
								<div class="name">{{item.flyerName}}</div>
								<div class="phone">
									{{item.phoneNum |getPhoneStr }}
								</div>
							</view>
							<view class="uav-head" v-if="currentTipIndex===2">
								{{item.uavName}}
							</view>
							<view class="meta" v-if="currentTipIndex!=2">
								<view class="grade">{{item.grade}}分</view>
								<view class="tip">
									近{{item.day}}天服务次数超{{
	                   item.count
	                  }}次
								</view>
							</view>
							<view class="uav-id" v-if="currentTipIndex===2">
								ID:{{item.id}}
							</view>
						</view>
						<view class="line"></view>
						<view class="right-info">
							距你{{ (Number(item.range)|| Number(item.distance)).toFixed(0) }}km
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wx from 'weixin-js-sdk';
	export default {
		data() {
			return {
				title: 'Hello',
				location: {},
				locationData: {
					adcode: "440305",
					city: "深圳市",
					city_code: "156440300",
					district: "南山区",
					location: {
						lat: 39.9219,
						lng: 116.44355
					},
					name: "中国,广东省,深圳市,南山区",
					nation: "中国",
					nation_code: "156",
					province: "广东省",

				},
				isHeight:false,
				websitHeight:0
			}
		},
		onLoad(option) {
			if (option.location) {

			}
			let str = this.getQueryString("location") || JSON.stringify(this.locationData);
			// uni.showToast({
			// 	title: str,
			// 	icon:'none'
			// });
			this.location = JSON.parse(str);
		},
		filters:{
			getPhoneStr(value){
				let str=String(value)
				return str.substring(0,3)+'****'+str.substring(str.length-4,str.length)
			}
		},
		onReachBottom() {
			if (this.currentTipIndex != 0) {
				console.log('触底了-->')
				if (this.query.pageNo * this.query.pageSize < this.total) {
					switch (this.currentTipIndex) {
						case 1:
							this.query.pageNo++
							this.getFlyerDotList()
							break;
						case 2:
							this.query.pageNo++
							this.getDeviceDotList()
							break;
					}
				}
			}
		},
		methods: {
			toAddWebsit() {
				wx.miniProgram.navigateTo({
					url: "/page-home/cooperation/cooperation"
				});
			},
			getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return decodeURIComponent(r[2]);
				}
				return null;
			}
		}
	}
</script>
<!-- 内嵌高德地图 -->
<script module="ModuleInstance" lang="renderjs">
	const flyes = require("../../static/json/flyers.json")
	const devices = require("../../static/json/uavs.json")
	export default {
		data() {
			return {
				map: null,
				markers: [],
				websitList: [],
				tipList: [{
						label: "服务网点(512)",
						val: 1
					},
					{
						label: "在线飞手(13k+)",
						val: 2
					},
					{
						label: "无人机(23k+)",
						val: 3
					},
				], //数据切换
				currentTipIndex: 0,
				massMarks: undefined, //海量点对象
				query: {
					pageNo: 1,
					pageSize: 10
				},
				total: 0
			};
		},
		mounted() {
			if (window.AMap) {
				// 观测更新的数据在 view 层可以直接访问到
				this.initAmap();
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script');
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src =
					`https://webapi.amap.com/maps?v=1.4.10&key=d78a13e2379db4234cae886709151ddf&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.MarkerClusterer`; //您申请的key值
				//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
				script.onload = () => {
					window._AMapSecurityConfig = {
						securityJsCode: 'd78a13e2379db4234cae886709151ddf', //您申请的安全密钥
					}
					this.initAmap();
				}
				document.head.appendChild(script);
			}
		},
		beforeDestroy() {

		},
		methods: {
			initAmap() {
				this.map = new AMap.Map('map', {
					// 显示地图缩放级别
					zoom: 6,
					// 地图中心点
					resizeEnable: true,
					center: [this.location.location.lng, this.location.location.lat],
				});
				this.map.on("complete", async () => {
					console.log("地图加载完成！",this.map);
					// this.map.setCenterOffset(0.5,0.3)
					await this.getMarkPoint();
					this.setMassMarks();
				});
			},
			setMassMarks() {
				let styleList = [{
						url: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/d6bb818d-ba14-4f69-8e6e-a87620cd5f3f.png', // 图标地址
						size: new AMap.Size(30, 30), // 图标大小
						anchor: new AMap.Pixel(20, 20), // 图标显示位置偏移量，基准点为图标左上角
					},
					{
						url: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/image/mmc1_flyer.png', // 图标地址
						size: new AMap.Size(40, 40), // 图标大小
						anchor: new AMap.Pixel(20, 20), // 图标显示位置偏移量，基准点为图标左上角
					},
					{
						url: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/image/mmc1.png', // 图标地址
						size: new AMap.Size(40, 40), // 图标大小
						anchor: new AMap.Pixel(20, 20), // 图标显示位置偏移量，基准点为图标左上角
					}
				];
				this.massMarks = new AMap.MassMarks(this.markers, {
					zIndex: 5, // 海量点图层叠加的顺序
					zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
					style: styleList, // 设置样式对象
				});
				console.log("massMarks-->", this.massMarks);
				// 将海量点添加至地图实例
				this.massMarks.setMap(this.map);
			},
			async getMarkPoint() {
				let res = await this.$httpRequest({
					url: this.$api.getWebSitList,
					method: 'get',
					data: {
						lat: this.location.location.lat,
						lon: this.location.location.lng,
					}
				})
				if (res.result) {
					let nodeList = res.result.reduce((pre, cur) => {
						let list = cur.locationList.filter((item) => {
							item.grade = '4.' + this.RandomNum(5, 9)
							item.day = this.RandomNum(1, 10)
							item.count = this.RandomNum(4, 5) * 10
							return item.range >= 100
						});
						pre.push(...list);
						// }
						return pre;
					}, []);
					let webList = nodeList.filter((item) => item.range <= 1000);
					this.websitList = webList.sort((a, b) => a.range - b.range);
					this.markers = nodeList.map((item, index) => {
						return {
							id: index,
							lnglat: [item.jd, item.wd],
							style: 0
						};
					});
				}
			},
			// 数据切换
			async changeTabEvent(index) {
				this.currentTipIndex = index;
				switch (index) {
					case 0:
						this.map.setZoom(6)
						await this.getMarkPoint()
						this.massMarks.setData(this.markers)
						break;
					case 1:
						this.map.setZoom(8)
						this.query.pageNo = 1
						await this.getFlyerDotList()
						this.massMarks.setData(this.markers)
						break;
					case 2:
						this.map.setZoom(8)
						this.query.pageNo = 1
						await this.getDeviceDotList()
						this.massMarks.setData(this.markers)
						break;
				}
				document.title = this.tipList[index].label;
			},
			async getFlyerDotList() {
				// console.log('飞手数据-->',flyes)
				let res = await this.$httpRequest({
					url: this.$api.flyerDotList,
					method: 'get',
					data: {
						lat: this.location.location.lat,
						lon: this.location.location.lng,
						...this.query
					}
				})
				if (res.result) {
					if (this.query.pageNo === 1) {
						this.total = res.result.totalCount
						this.websitList = res.result.list
						this.websitList.forEach(item => {
							item.grade = '4.' + this.RandomNum(5, 9)
							item.day = this.RandomNum(1, 10)
							item.count = this.RandomNum(4, 5) * 10
						})
						this.markers = flyes.slice(0, 1999).map((item, index) => {
							return {
								id: index,
								lnglat: [item.lon, item.lat],
								style: 1
							};
						});
					} else {
						let list = res.result.list
						list.forEach(item => {
							item.grade = '4.' + this.RandomNum(5, 9)
							item.day = this.RandomNum(1, 10)
							item.count = this.RandomNum(4, 5) * 10
						})
						this.websitList = this.websitList.concat(list)
					}

				}

			},
			async getDeviceDotList() {
				let res = await this.$httpRequest({
					url: this.$api.deviceDotList,
					method: 'get',
					data: {
						lat: this.location.location.lat,
						lon: this.location.location.lng,
						...this.query
					}
				})
				if (res.result) {
					if (this.query.pageNo === 1) {
						this.total = res.result.totalCount
						this.websitList = res.result.list
						this.markers = devices.map((item, index) => {
							return {
								id: index,
								lnglat: [item.lon, item.lat],
								style: 2
							};
						});
					} else {
						let list = res.result.list
						this.websitList = this.websitList.concat(list)
					}

				}
			},
			RandomNum(minNum, maxNum) {
				return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
			},
		},
	};
</script>

<style scoped lang="scss">
	.websit-node-wrap {
		position: relative;
		height: 100vh;

		.websit-node-list-wrap {
			position: absolute;
			left: 0;
			top: 78%;
			width: 100%;
			background: #f9f9f9;
			border-radius: 36rpx 36rpx 0px 0px;

			.ios-wrap {
				padding: 0 26rpx 30rpx 26rpx;

				.head-tip {
					width: 100rpx;
					height: 8rpx;
					background: #d1d1d1;
					border-radius: 4rpx;
					margin: 0 auto;
					margin-top: 20rpx;
				}

				.tip-tap-wrap {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					.tip-item {
						flex: 1;
						height: 68rpx;
						background: #e9e9ec;
						border-radius: 8rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
						line-height: 68rpx;
						text-align: center;
						padding: 0 20rpx;
						box-sizing: border-box;
						white-space: nowrap;

						&:not(:last-child) {
							margin-right: 20rpx;
						}

						&:active {
							// background: red;
						}
					}

					.tip-active {
						background: linear-gradient(270deg, #1966fe 0%, #188bfe 100%);
						color: #ffffff;
					}
				}
				.websit-item-wrap {
					margin-top: 40rpx;

					.websit-item {
						background: #ffffff;
						border-radius: 12rpx;
						//   height: 72px;
						box-sizing: border-box;
						padding: 20rpx 20rpx 20rpx 34rpx;
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;

						.left-info {
							flex: 1;

							.head,
							.flyer-head,.uav-head{
								font-size: 28rpx;
								font-weight: 500;
								color: #1e1e1e;
							}

							.flyer-head {
								display: flex;
								align-items: center;

								.phone {
									font-size: 24rpx;
									font-weight: 400;
									color: #6F6F6F;
									margin-left: 16rpx;
								}
							}

							.meta {
								width: 100%;
								margin-top: 20rpx;
								display: flex;
								align-items: center;

								.grade {
									font-size: 26rpx;
									font-weight: 600;
									color: #fe6000;
									margin-right: 10rpx;
								}

								.tip {
									font-size: 20rpx;
									font-weight: 500;
									color: #fe9324;
									height: 32rpx;
									line-height: 32rpx;
									background: #fef8e1;
									border-radius: 4rpx;
									padding: 0 8rpx;
								}
							}
							.uav-id{
								font-size: 24rpx;
								font-weight: 400;
								color: #88888C;
								margin-top: 8rpx;
							}
						}

						.line {
							width: 1px;
							height: 80rpx;
							background-color: #eaeaea;
							margin: 0 16rpx;
						}

						.right-info {
							font-size: 22rpx;
							font-weight: 400;
							color: #6f6f6f;
						}
					}
				}
			}
		}
		.websit-node-list-height{
			position: fixed;
			top: 200rpx;
			bottom: 0;
			width: 100%;
			overflow: auto;
		}
		.websit-node-head-wrap {
			position: fixed;
			top: 10px;
			left: 50%;
			transform: translateX(-50%);
			width: 660rpx;
			.img-1 {
				width: 100%;
			}

			.animate__heartBeat {
				animation: heartBeat 2s infinite;
			}

			.btn-img {
				width: 12%;
				position: absolute;
				top: 28%;
				right: 48rpx;
			}
		}
	}

	.map-content {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}
</style>
