<template>
	<view class="map">
		<map id="navmap" style="width: 100%;height: 600px;"  :markers="markers"   :latitude="src_latitude" :longitude="src_longitude" :scale="scale" 
		          :hidden="false">  
		        </map>
		<view class="liststyle" v-if="details.type==1">
			<view v-for='(x,y) in upcar' :key='y' class="liststyle-item" @click="goback(x)">
				<view class="list-item1" :style="{color:details.SelectID == x.Id?mainColor:'#1B1D1E','font-weight':details.SelectID == x.Id?'bold':'400'}">{{x.Name}}</view>
				<view class="list-item-t" :style="{color:details.SelectID == x.Id?mainColor:'#1B1D1E'}">{{x.SubName}}</view>
			</view>
		</view>
		<view class="liststyle" v-if="details.type==2">
			<view v-for='(x,y) in downcar' :key='y' class="liststyle-item" @click="goback(x)">
				<view class="list-item1" :style="{color:details.SelectID == x.Id?mainColor:'#1B1D1E','font-weight':details.SelectID == x.Id?'bold':'400'}">{{x.Name}}</view>
				<view class="list-item-t" :style="{color:details.SelectID == x.Id?mainColor:'#1B1D1E'}">{{x.SubName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageTitle: "选择地点",
				src_latitude:'30.628043',
				src_longitude:'104.137580',
				markers: [], 
				details:{},
				upcar:[],
				downcar:[],
				mainColor:'',
				scale:9
			}
		},
		onReady(){
			let MapContext = wx.createMapContext('navmap', this);
			let that = this;  
		},
		onLoad(options) {
			this.mainColor = this.$uiConfig.mainColor;
			if(options && options.obj){
				this.details = JSON.parse(decodeURIComponent(options.obj))
				this.getdizhiList()
				if(this.details.type==1){
					this.pageTitle='选择出发点'
				}else{
					this.pageTitle='选择到达点'
				}
			}
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		methods:{
			getdizhiList(){
				this.upcar = []
				this.downcar = []
				this.details.SiteList.forEach(x=>{
					if(x.Type == 1){
						this.upcar.push(x)
					}else if(x.Type == 2){
						this.downcar.push(x)
					}
				})
				this.markers = [];
				if(this.details.type == 1){
					
					// this.src_latitude = ((Number((this.upcar[0].Lonlat.split(',')[1]))  +  Number(this.upcar[this.upcar.length-1].Lonlat.split(',')[1]) )/2).toString();
					// this.src_longitude = ((Number((this.upcar[0].Lonlat.split(',')[0]))  +  Number(this.upcar[this.upcar.length-1].Lonlat.split(',')[0]) )/2).toString();;
					this.src_latitude = this.upcar[0].Lonlat.split(',')[1];
					this.src_longitude = this.upcar[0].Lonlat.split(',')[0];
					this.upcar.map(x=>{
						if(this.details.SelectID == x.Id){
							this.src_latitude = x.Lonlat.split(',')[1];
							this.src_longitude = x.Lonlat.split(',')[0];
						}
						let obj = {
							id: x.Id,
							iconPath: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dcdtbiaoji.png',  
							width: 22,  
							height: 33,
							latitude:x.Lonlat.split(',')[1],
							longitude:x.Lonlat.split(',')[0],
							title:x.Name
						}
						this.markers.push(obj)
					})
				}else{
					this.src_latitude = this.downcar[0].Lonlat.split(',')[1];
					this.src_longitude = this.downcar[0].Lonlat.split(',')[0];
					this.downcar.map(x=>{
						if(this.details.SelectID == x.Id){
							this.src_latitude = x.Lonlat.split(',')[1];
							this.src_longitude = x.Lonlat.split(',')[0];
						}
						let obj = {
							id: x.Id,
							iconPath: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dcdtbiaoji.png',  
							width: 22,  
							height: 33,
							latitude:x.Lonlat.split(',')[1],
							longitude:x.Lonlat.split(',')[0],
							title:x.Name
						}
						this.markers.push(obj)
					})
				}
			},
			goback(x){
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 前一个页面
				let that = this
				uni.navigateBack({
					 success: function() {
						 beforePage.$vm.getbackData(that.details.type,x.Id,that.details.goback); // 执行前一个页面的方法
					 }
				});
			}
		}
	}
</script>

<style>
	.map{
		width: 100%;
		height: 100vh;
		position: relative;
	}
	.liststyle{
		width: 100%;
		max-height: 165px;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #FFF;
		border-radius: 10px 10px 0px 0px;
		padding: 10px 15px;
		overflow-y: auto;
	}
	.liststyle-item{
		padding: 5px 0;
		font-size: 14px;
		color: #1B1D1E;
		border-bottom: 1px solid #E2E2E2;
	}
	.list-item{
		
	}
	.list-item-t{
		font-size: 11px;margin-top: 3px;color: #999999;
	}
</style>
