<template>
	<view class="container">
		<uni-navbar title="新增路线"></uni-navbar>
		<view class="box commonMt">
			<view class="map">
				<mapNew height="713rpx" @isChange='isChange=false' @clearMarkers='clearMarkers' @getAddres='getAddres'
					:starAddres="starAddres" :getLocation="getLocation" :isShow='false' :isStar="isStar" :isEnd="isEnd">
				</mapNew>
				<!-- <map id="map" ref="map" style="height: 713rpx;width: 100%;" @tap="tapMap">
				</map> -->
			</view>
			<view class="reject-box commonBj ">
				<view class="reject-box-top">
					<view class="top-left">
						<image src="../../static/images/path/location.png" mode="widthFix"></image>
						<text class="listTitle">附近地址</text>

					</view>
					<view class="top-right">
						<u-button class="buttonDd" @click="dot" :disabled="activeIndex||activeIndex=='0'?false:true">
							确认</u-button>
					</view>
				</view>
				<view class="reject-box-bottom">
					<view class="boxMr">
						<view :class="'adrBox ' +(activeIndex===index?'active':'')" v-for="(item,index) in addresData"
							@click="changeAddres(index,item)">
							<view class="ml">{{item.name}}</view>
							<view class="activeImg" v-if="activeIndex===index"></view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <u-toast ref="uToast"></u-toast> -->
			<u-button @click="submit" shape="circle" color="linear-gradient(to top, #F59A02, #FFD334 )"
			   :disabled="starAddresData&&endAddresData?false:true"
				class="buttonLang commonMb">确认选择</u-button>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				activeIndex: null,
				starAddres: null,
				isStar: false,
				isEnd: false,
				addresData: [],
				getLocation: null,
				isChange: false,
				starAddresData:null,
				endAddresData:null,
				id:'',
			}
		},
		onLoad: function(option) {
			
			if(option.id)
			{
				this.routeInfo(option.id);
				this.id=option.id;
			}
		},
		onShow() {
			uni.getLocation({
				// type: 'gcj02',
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.getLocation = res;

				}
			});
		},
		methods: {
			clearMarkers() {
				this.isStar = false;
				this.isEnd = false;
				this.starAddres = null;
				this.starAddresData=null;
				this.endAddresData=null;
				// this.activeIndex=null;
				console.log('我执行了清楚')
			},
			getAddres(addres) {
				// this.addres=addres;
				this.activeIndex = null;
				console.log(addres, 'addres');
				//高德地图web服务端key
				let key = config.key;
				//搜索范围半径
				let radius = 200;
				// 查询POI类型
				// 汽车服务          010000
				// 汽车销售           020000
				// 汽车维修           030000
				// 摩托车服务          040000
				// 餐饮服务            050000
				// 购物服务            060000
				// 生活服务            070000
				// 体育休闲服务         080000
				// 医疗保健服务         090000
				// 住宿服务             100000
				// 风景名胜             110000
				// 商务住宅             120000
				// 政府机构及社会团体    130000
				// 科教文化服务         140000
				// 交通设施服务         150000
				// 金融保险服务         160000
				// 公司企业             170000
				// 道路附属设施          180000
				// 地名地址信息          190000
				// 公共设施              200000
				// 事件活动              220000
				// 室内设施              970000
				//  通行设施             990000
				// let types='050000|070000|100000|120000'
				let types =
					'010000|020000|030000|040000|050000|060000|070000|080000|090000|100000|110000|120000|130000|140000|150000|160000|170000'
				uni.request({
					// http://restapi.amap.com/v3/place/around?key=401c5604ca1d2597b9906a1a30f29c44&location=116.473168,39.993015&radius=100
					url: `http://restapi.amap.com/v3/place/around?key=${key}&location=${addres}&radius=${radius}`,
					method: 'GET',
					success: (res) => {
						console.log(res, 'res');
						if (res.data.info === 'OK') {
							this.addresData = res.data.pois;
							console.log(this.addresData, 'this.addresData');
						}
					},
					fail: (err) => {}
				})

			},
			changeAddres(index, item) {
				if (this.isChange) {
					return
				}
				this.activeIndex = index;
				this.starAddres = item;
			},
			submit() {
				// console.log(this.starAddresData,'starAddresData');
				// console.log(this.endAddresData,'endAddresData');
				// let address={
				// 	starAddres:this.starAddresData,
				// 	endAddres:this.endAddresData,
				// }
				// location
				// address
				this.$tab.navigateTo('/pages/addPath/index?startName='
				+this.starAddresData.address+
				'&endName='+this.endAddresData.address+
				'&startPoint='+this.WGS84ToMercator(this.starAddresData.location)+
				'&endPoint='+this.WGS84ToMercator(this.endAddresData.location)+
				'&id='+this.id
				)
				// this.$tab.navigateBack()
				// this.showToast();
			},
			// 4326转3857
			 WGS84ToMercator(data){
				 console.log(data,'data');
				 let list=data.split(',');
				 let lonlat={lng:list[0],lat:list[1]};
			    const coord = {
					lat:0,
			    	lng:0
				};
			    const earthRad = 6378137.0; //地球半径
			    coord.lat = lonlat.lng * Math.PI / 180 * earthRad;
			    const param = lonlat.lat * Math.PI / 180;
			    coord.lng = earthRad / 2 * Math.log((1.0 + Math.sin(param)) / (1.0 - Math.sin(param)));
			    return coord.lat+','+coord.lng;
			},
			showToast() {
				
				// this.$refs.uToast.show({
				// 	type: 'error',
				// 	icon: false,
				// 	title: '失败主题',
				// 	message: "请选择起点和终点坐标",
				// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				// })
			},
			dot() {
				if (this.isStar) {
					this.isEnd = true;
					this.endAddresData=this.addresData[this.activeIndex];
					console.log('结束地址存在')
				} else {
					this.isStar = true;
					this.starAddresData=this.addresData[this.activeIndex];
					console.log('开始地址存在',this.starAddresData)
				}
				this.isChange = true;
				// this.starAddresData=this.addresData[this.activeIndex];
				// this.endAddresData=this.addresData[this.activeIndex];
				// this.activeIndex=null;
				// this.addresData=[];
			},
			tapMap(e) {
				var that = this;
				var id = e.currentTarget.id;
				var maps = uni.createMapContext(id, this).$getAppMap();
				maps.onclick = function(point) {
					console.log(point);
					// point.iconPath = '/static/btn_loc0.png';
					// that.markers = that.markers.concat(point); uni.showToast({ 
					//     title: '添加成功',
					//     icon: 'none'
					// });
				};
			}
		}

	}
</script>
<style lang="scss" scoped>
	.reject-box {
		margin-bottom: 28rpx;
		margin-top: 28rpx;

		.reject-box-top {
			width: 100%;
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0px 0px;
			display: flex;
			justify-content: space-between;

			.top-right {
				display: flex;
				justify-content: start;
				align-items: center;
				margin-right: 36rpx;
			}

			uni-image {
				width: 50rpx;
				margin-left: 32rpx;
				vertical-align: middle;
			}

		}

	}

	.buttonDd {
		width: 134rpx;
		height: 45rpx;
		background: linear-gradient(0deg, #FFD334 0%, #F59A02 100%);
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25);
		border-radius: 23rpx;
		border: 0;
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
		padding: 0;
		text-align: center;
	}

	.map {
		height: 713rpx;
		background: #FFFFFF;
		border: 2rpx solid #77A8FF;
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25), 0px 0px 24rpx 6rpx rgba(109, 160, 251, 0.6);
		border-radius: 28rpx;
	}

	.reject-box-bottom {
		height: 30vh;
		// height: calc(100vh - 44px - 22px - 713rpx - 45rpx - 44rpx - 50rpx - 188rpx);
		// height: 540rpx;
		overflow-y: auto;
	}

	.boxMr {
		margin-left: 32rpx;
		margin-right: 36rpx;
		padding-top: 39rpx;
		padding-bottom: 39rpx;
	}

	.adrBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 86rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.active {
		background: rgba(73, 91, 147, 0.3);
		border-radius: 28rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.activeImg {
		background: url(../../static/images/path/active.png);
		background-size: 100% 100%;
		width: 44rpx;
		height: 44rpx;
		margin-right: 21rpx;
	}

	.ml {
		margin-left: 29rpx;
	}
	/deep/ .u-transition{
		margin-top: 300rpx;
	}
</style>
