<template>
  <view class="page">
    <u-navbar class="u-navbar" title="地图" placeholder @leftClick="leftClick" leftIconColor="#fff" rightIcon="list" @rightClick="rightClick"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }">
		<view class="u-nav-slot" slot="right">
			<u-icon name="list" size="24"  color="#FFF"></u-icon> 
		</view>
	</u-navbar>

	<view class="map-box"> 
		<view class="map" :data="listData" :change:data="allmap.getResData" style="width: 100%;height: 100%;" id="container"></view>
	</view>
	
	<u-popup :show="show" mode="top" @close="close" :safeAreaInsetTop="false" :duration="0" :overlayOpacity="0">
		<view style="width: 94%;height: auto;background-color: #fff;padding:20rpx;">
			<u-list height="12vh">
				<u-list-item  v-for="(item, index) in listData" :key="index">
					<view style="margin: 10rpx;font-size: 28rpx;">考勤点：{{item.rangeName}}，距离：{{item.distance}}KM</view>
				</u-list-item>
			</u-list>
		</view>
	</u-popup>
  </view>
</template>

<script>
import { pathToBase64, base64ToPath } from 'image-tools';
import config from '@/config'
export default {
	data() {
		return {
			listData:[],
			show:false
		}
	},
	onLoad(option) {
		setTimeout(()=>{
			this.listData=JSON.parse(option.teamList)
		},1000)
	},
	onShow() {
		
	},
	methods: {
		rightClick(){
			this.show=true;
		},
		close(){
			this.show=false;
		},
		leftClick() {
			console.log('返回')
			uni.navigateBack({
				delta: 1 // 返回
			});
		},
	},
}
</script>

<script module="allmap" lang="renderjs">
	import { myBMapGL1 } from "../../util/map.js"; 
	import no_warn from "../../../../static/realName/coor.png";
	var bmap;
	export default {
			data() {
				return {
					latitude: 31.877608,
					longitude: 117.150204,
				}
			},
			mounted() {
				this.initMap()
			},
			beforeDestroy() {
				bmap && bmap.destroy();
				bmap = null
			},
			methods: {
				//获取地图信息
				initMap() {
					myBMapGL1().then((res) => {
						// 创建地图实例
						bmap = new BMapGL.Map("container");
						bmap.centerAndZoom(new BMapGL.Point(this.longitude, this.latitude), 12);  
						// 这里边写加载完成之后的执行操作
						bmap.enableScrollWheelZoom(true);
					})
				}, 
				getResData(newValue, oldValue, ownerVm, vm) {
					console.log(newValue,"newList---------")
					if(newValue.length>0){
						const lon = Number(newValue[0].lon);
						const lat = Number(newValue[0].lat);
						bmap.centerAndZoom(new BMapGL.Point(lon, lat), 12);  
						for(let index = 0; index < newValue.length; index++) {
							let item = newValue[index]; 
							if (item.lon && item.lat) {
								// 中心点
								let point = new BMapGL.Point(item.lon,item.lat)
								let marker = "", myIcon = "";
								myIcon = new BMapGL.Icon(no_warn, new BMapGL.Size(20,20))
								myIcon.setImageSize(new BMapGL.Size(20, 20));
								marker = new BMapGL.Marker(point, { icon: myIcon });
								marker.id = "center"+item.rangeName;
								bmap.addOverlay(marker);
								//圈 
								// const point = new BMapGL.Point(item.lon, item.lat);
								let circle = new BMapGL.Circle(point, 6000, {
									strokeColor: "#06E7A3",
									strokeWeight: 2,
									strokeOpacity: 1,
									fillOpacity: 0.1,
									zIndex: 999
								});
								circle.id = "circle"+item.rangeName;
								bmap.addOverlay(circle); 
							}
						}
					}
				},
 

			}
		}
</script>

<style lang="scss">
	/deep/.u-popup .u-transition {
		top: 10vh!important;
	}
	 
.page {
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	box-sizing: border-box;
	// padding: 0 20px;
	.map-box{
		width: 100%;
		height: 90vh;
		z-index: 9;
		position: absolute;
		top:10vh;
		background: #fff;
		.map{
			display: inline-block;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
