<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>{{location.city}}</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:this.location.location.lng+'',
			icon:'none'
		})
	},
	filters:{
		getPhoneStr(value){
			let str=String(value)
			return str.substring(0,3)+'****'+str.substring(str.length-4,str.length)
		}
	},
	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;
		},
		handleGetRegion(address){
			this.location.city=address[1].name==='市辖区'?address[0].name:address[1].name
		}
	}
}
</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,
						pageNo:1,
						pageSize:9999
					}
				})
				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.address,
						distance:v.distance,
						lat:v.lat,
						lon:v.lon
					}))
					this.markers = this.websitList.map((item, index) => {
						return {
							id: index,
							lnglat: [item.lon, item.lat],
							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.getMaintenance()
						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/3f8d885a-40ab-41ae-b64d-0494d6d80de9.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
						};
					});
				}
			},
			// 维修网点
			async getMaintenance(){
				let res = await this.$httpRequest({
					url: this.$api.maintenanceList,
					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.name,
						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>

