import React, { Component } from 'react';
import styles from './styles.less';
import UUID from 'react-native-uuid';
const AMap = window.AMap;
const AMapUI = window.AMapUI;
//思路进入页面时先定位
//可以通过搜索选址
//可以通过拖拽微调选址
class GetLocation extends Component {
	constructor(props) {
		super(props);
		this.mapId = UUID.v4();
		this.state = {
			selectionCenter: [],
		};
	}
	map;
	valueString;
	componentWillReceiveProps(nextProps) {
		const { lng, lat, params } = nextProps;
		const vs = JSON.stringify({ lng, lat, params });
		if (vs != this.valueString) {
			this.valueString = vs;
			if (params.setMap) {
				params.setMap(this.map, AMap);
			}
		}
	}

	componentWillMount() {}
	componentDidMount = () => {
		this.getLocation();
		this.searchSiteSelection();
		const { lng, lat, params } = this.props;
		if (params.setMap) {
			params.setMap(this.map, AMap);
		}
	};
	// 12,[116.171731,40.06682]
	//获取当前定位
	getLocation = () => {
		/***************************************
          由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
         ***************************************/
		let geolocation;
		const { lng, lat, params, json } = this.props;

		//加载地图，调用浏览器定位服务
		this.map = new AMap.Map(this.mapId, {
			resizeEnable: true,
			zoom: json.zoom || 14, //级别
			center: [lng ? lng : 116.397428, lat ? lat : 39.90923], //中心点坐标
			viewMode: '3D', //使用3D视图
		});

		var layer1 = new AMap.TileLayer.Satellite();
		var layer2 = new AMap.TileLayer.RoadNet();
		var layers = [layer1, layer2];
		this.map.setLayers(layers);
		this.map.plugin('AMap.Geolocation', () => {
			geolocation = new AMap.Geolocation({
				enableHighAccuracy: true, //是否使用高精度定位，默认:true
				timeout: 1000000, //超过10秒后停止定位，默认：无穷大
				buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
				zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				buttonPosition: 'RB',
				GeoLocationFirst: true,
			});

			this.map.addControl(geolocation);
			geolocation.getCurrentPosition();
			// /**
			//  * 只查询到城市
			//  */
			// geolocation.getCityInfo((status, result) => {
			//   console.log(result)
			//       })
			AMap.event.addListener(geolocation, 'complete', onComplete.bind(this)); //返回定位信息
			AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
		});
		//解析定位结果
		function onComplete(data) {
			let poi = data.position.toString().split(',');
			// 需要通过改变this指向
			this.dragSiteSelection(15, poi);
		}
		//解析定位错误信息
		function onError(data) {
			var str = '定位失败,';
			str += '错误信息：';
			switch (data.info) {
				case 'PERMISSION_DENIED':
					str += '浏览器阻止了定位操作';
					break;
				case 'POSITION_UNAVAILBLE':
					str += '无法获得当前位置';
					break;
				case 'TIMEOUT':
					str += '定位超时';
					break;
				default:
					str += '未知错误';
					break;
			}
			console.log(str);
		}

		AMapUI.loadUI(['control/BasicControl'], (BasicControl) => {
			//缩放控件
			this.map.addControl(
				new BasicControl.Zoom({
					position: 'lt', //left top，左上角
					showZoomNum: true, //显示zoom值
				}),
			);

			//图层切换控件
			this.map.addControl(
				new BasicControl.LayerSwitcher({
					position: 'rt', //right top，右上角
				}),
			);
		});
	};
	//通过搜索来获取定位信息
	searchSiteSelection = () => {
		AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker) => {
			let poiPicker = new PoiPicker({
				input: 'pickerInput',
			});
			//初始化poiPicker
			window.poiPicker = poiPicker;
			//选取了某个POI
			poiPicker.on('poiPicked', (poiResult) => {
				let poi = poiResult.item.location.toString().split(',');
				this.dragSiteSelection(15, poi);
			});
		});
	};

	//拖拽位置选择
	dragSiteSelection = (zoom, center) => {
		AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
			let map = new AMap.Map('map', {
				zoom: zoom,
				resizeEnable: true,
				center: center,
			});
			let positionPicker = new PositionPicker({
				mode: 'dragMap', //设定为拖拽地图模式，可选'dragMap[拖拽地图]'、'dragMarker[拖拽点]'，默认为'dragMap'
				map: map,
				// iconStyle: { //自定义图标外观
				//     url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png', //图片地址
				//     ancher: [24, 40], //要显示的点大小，将缩放图片
				//     size: [48, 48]    //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
				// }
			});
			positionPicker.on('success', (positionResult) => {
				let locationMsg = {
					lng: positionResult.position.lng, // 经度
					lat: positionResult.position.lat, // 维度
					address: positionResult.address, // 详细地址
					nearestJunction: positionResult.nearestJunction, // 最近的路口
					nearestRoad: positionResult.nearestRoad, // 最近的路
					nearestPOI: positionResult.nearestPOI, // 最近的POI
				};
				//将数据抛出
				this.props.getLocationMsg(locationMsg);
			});
			positionPicker.on('fail', (positionResult) => {
				// 海上或海外无法获得地址信息
				alert('选址失败请稍后重试');
			});
			positionPicker.start();
		});
	};
	render() {
		const { json } = this.props;
		return (
			<div id="GetLocation" style={{ display: this.props.showMap ? 'block' : 'none' }}>
				<input
					id="pickerInput"
					className={styles.top}
					style={{ width: 200 }}
					placeholder="输入关键字选取地点"
				/>
				<div
					id={this.mapId}
					className={styles.map}
					style={{ width: json.width, height: json.height }}
				/>
			</div>
		);
	}
}

export default GetLocation;
