<template>
	<view class="websit-node-wrap">
		<view class="map-content-wrap">
			<view class="map-content" id="map"></view>
			<view class="map-marker-operate">
			    <view
			       v-for="(v, i) in mapBtnList"
			       :key="i"
			       :class="{ 'operate-item': true, 'operate-item-active': i === selectBtnIndex }"
			       @click="changeTabEvent(i)"
			       >{{ v }}
				</view>
			</view>
		</view>
		<view class="websit-node-list">
			<view class="websit-node-list-search">
			    <pick-region @getRegion="handleGetRegion">
					<view class="location-select">
						<view>深圳</view>
						<image src="../../static/images/icon-down.png" />
					</view
			    ></pick-region>
			    <view class="search-content">
			      <image src="../../static/images/search-icon.png" />
			      <input
			        placeholder=""
			        placeholder-style="font-size: 28rpx;color: #B2B2B2;"
			      />
			    </view>
			</view>
			<scroll-view class="websit-node-list-scroll" scroll-y @scrolltolower="scrollToLower">
				<network-item v-for="(v,i) in websitListPagination" :key="i" :networkItem="v" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import wx from 'weixin-js-sdk';
	import NetworkItem from "./components/network-item/index.vue"
	import PickRegion from '@/components/pick-regions/pick-regions.vue'
	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,
				mapBtnList:['服务网点', '租赁网点', '培训网点','维修网点'],
				selectBtnIndex:0
			}
		},
		components:{
			NetworkItem,
			PickRegion
		},
		onLoad(option) {
			let str = this.getQueryString("location") || JSON.stringify(this.locationData);
			this.location = JSON.parse(str);
           	uni.showToast({
        		title:'哈哈哈',
        		icon:'none'
      		})
		},
		filters:{
			getPhoneStr(value){
				let str=String(value)
				return str.substring(0,3)+'****'+str.substring(str.length-4,str.length)
			}
		},
		onReachBottom() {
			if (this.currentTipIndex != 0) {
				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">
	export default {
		data() {
			return {
				map: null,
				markers: [],
				websitList: [],//所有网点
				websitListPagination:[],//分页网点
				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 () => {
					await this.getMarkPoint();
					this.websitListPagination=this.websitList.slice(0,10)
					this.setMassMarks();
				});
			},
			setMassMarks() {
				let styleList = [
					{
						url: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/b0364bd1-f193-4b93-ac9f-cfb6e2624d6b.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, // 设置样式对象
				});
				// 将海量点添加至地图实例
				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;
					}, []);
					this.websitList=nodeList.map((v)=>({
						addressDescImg:'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/774dec69-bf56-4dd9-9c3f-aaa33bc47bcd.png',
						address:v.dizhi,
						distance:v.range
					}))
					console.log("网点列表数据--->",this.websitList)
					this.markers = nodeList.map((item, index) => {
						return {
							id: index,
							lnglat: [item.jd, item.wd],
							style: 0
						};
					});
				}
			},
			// 数据切换
			async changeTabEvent(index) {
				this.selectBtnIndex = index;
				switch (index) {
					case 0:
						await this.getMarkPoint()
						this.massMarks.setData(this.markers)
						break;
					case 1:
						this.query.pageNo = 1
						this.query.pageSize=9999
						await this.getDeviceDotList()
						this.massMarks.setData(this.markers)
						break;
					case 2:
						this.query.pageNo = 1
						this.query.pageSize=9999
						await this.getFlyerDotList()
						this.massMarks.setData(this.markers)
						break;
					case 3:
						this.query.pageNo = 1
						this.query.pageSize=9999
						await this.getDeviceDotList()
						this.massMarks.setData(this.markers)
						break;
				}
				this.websitListPagination=this.websitList.slice(0,10)
			},
			async getFlyerDotList() {
				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.list) {
					this.websitList=res.result.list.map((v)=>({
						addressDescImg:'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/774dec69-bf56-4dd9-9c3f-aaa33bc47bcd.png',
						address:v.flyerName,
						distance:v.distance
					}))
					this.markers = res.result.list.map((item, index) => {
						return {
							id: index,
							lnglat: [item.lon, item.lat],
							style: 1
						};
					});
				}
			},
			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.list) {
					this.websitList=res.result.list.map((v)=>({
						addressDescImg:'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/774dec69-bf56-4dd9-9c3f-aaa33bc47bcd.png',
						address:v.uavName,
						distance:v.distance
					}))
					this.markers = res.result.list.map((item, index) => {
						return {
							id: index,
							lnglat: [item.lon, item.lat],
							style: 1
						};
					});
				}
			},
			RandomNum(minNum, maxNum) {
				return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
			},
			// 下拉加载
			scrollToLower(){
				if(this.websitListPagination.length< this.websitList.length){
					this.websitListPagination=this.websitListPagination.concat(this.websitList.slice(this.websitListPagination.length,this.websitListPagination.length+10))
				}
			}
		},
	};
</script>

<style scoped lang="scss">
.websit-node-wrap {
	height: 100vh;
	.map-content-wrap{
		position: relative;
		.map-content {
			width: 100%;
			height: 928rpx;
		}
		.map-marker-operate {
			position: absolute;
			bottom: 8rpx;
			left: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			z-index: 10;
			.operate-item {
				width: 160rpx;
				height: 48rpx;
				background: #ffffff;
				border-radius: 16rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #1690fc;
				line-height: 48rpx;
				&-active {
					background: linear-gradient(270deg, #ff2100 0%, #fe9d45 100%);
					color: #ffffff;
				}
			}
		}
	}
	.websit-node-list{
		height: calc(100vh - 928rpx);
		position: absolute;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		&-search{
			height: 96rpx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
			.location-select {
				font-size: 28rpx;
			    color: #000000;
			    line-height: 40rpx;
			    display: flex;
			    align-items: center;
			    white-space: nowrap;
			    image {
			      width: 16rpx;
			      height: 10rpx;
			      vertical-align: bottom;
			      margin-left: 14rpx;
			    }
			    margin-right: 32rpx;
			}
			.search-content {
				width: 570rpx;
			    height: 64rpx;
			    background: #fdf1ed;
			    border-radius: 32rpx;
			    display: flex;
			    align-items: center;
			    padding: 12rpx 20rpx;
			    box-sizing: border-box;
			    image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 20rpx;
					vertical-align: bottom;
			    }
			    input {
					flex: 1;
			    }
			}
		}
		&-scroll{
			height: calc(100% - 96rpx);
		}
	}
}
::v-deep{
	.amap-logo,.amap-copyright{
		display: none !important;
	}
}

</style>

