<template>
	<view class="content">
		<view class="leixing">
			<view :class="['ggzxclist',ggzxcind===ind?'active':'']" v-for="(el,ind) in ggzxclist" :key="ind"  @click="setLm(el.id)">{{el.name}}</view>
		</view>
		<view class="zxclist" v-show="ggzxcind==0">
			<view class="item" v-for="(el,ind) in datas" :key="ind">
				<view class="tit">{{el.name}}</view>
				<view class="zxcsl">
					<view class="cwzs">
						<view class="wz">车位信息</view>
						<view class="sz">{{el.capacity}}</view>
					</view>
					<view class="cwzs">
						<view class="wz">余位信息</view>
						<view class="sz">{{el.availBike}}</view>
					</view>
		<!-- 			<view class="cwzs02">
						<view class="wz">更新时间</view>
						<view class="sz">{{el.updateTime}}</view>
					</view> -->
				</view>
				<view class="dizhi">
					<view class="dz">地址：{{el.address}}</view>
					<view class="dzimg" @click="daohang(el.jwd)">导航</view>
				</view>
			</view>
		</view>
		<view class="zxclistditu" v-show="ggzxcind==1">
			<view class="mparq">
				<map class="map" v-if="isMap" @markertap="getMarker" :latitude="latitude" :longitude="longitude" :markers="markers" show-location></map>
			</view>
			<view class="des">
				<view class="des-left">
					<!-- <view class="des-left-item">
						<view class="name">{{nowData.title}}</view>
						<view class="address">{{nowData.address}}</view>
					</view>
					<view class="des-left-item">
						<view class="name">车位信息</view>
						<view class="address">{{nowData.capacity}}</view>
					</view>
					<view class="des-left-item">
						<view class="name">剩余车位</view>
						<view class="address">{{nowData.availBike}}</view>
					</view> -->
					<view class="name">{{nowData.title}}</view>
					<view class="parkNun">
						<view class="parkNun-item">
							<view class="parkNun-item-name">车位信息:</view>
							<view class="parkNun-item-num">{{nowData.capacity}}</view>
						</view>
						<view class="parkNun-item">
							<view class="parkNun-item-name">余位信息:</view>
							<view class="parkNun-item-num">{{nowData.availBike}}</view>
						</view>
					</view>
					<view class="address">{{nowData.address}}</view>
					
				</view>
				<view class="des-right" @click="daohan()">导航</view>
			</view>
		</view>
	</view>
</template>

<script>
	var amapFile = require('@/static/js/amap-wx.js'); //如：..­/..­/libs/amap-wx.js
	var myAmapFun;
	var poiDatas = [];
	export default{
		data(){
			return{
				ggzxcind:0,
				ggzxclist:[
					{name:'列表',id:1},
					{name:'地图',id:2}
				],
				isMap: false,
				latitude: '',
				longitude: '',
				markers:[],//列表和图钉数据
				nowData: {}, //当前选中点
				token:'',
				datas: [],
			}
		},
		onLoad() {
			this.getToken();
			myAmapFun = new amapFile.AMapWX({
				key: 'e40bb317c48b66d558aa77ab126ef8c1'
			});
			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy:true,
				complete: (res)=> {
					console.log(res)
					this.latitude = res.latitude;
					this.longitude = res.longitude;
				},
			});
		},
		methods: {
			getToken(){
				// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon';
				var url = 'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon';
				var para = {};
				var that = this;
				that.httpGetxin(that, url, para, function(res) {
					// console.log(res.data.obj);
					that.token=res.data.obj;
					if(res.data.success==false){
						that.sxToken();
					}else{
						that.getdata();
					}
				});
			},
			sxToken(){
				// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/refreshToken?accessToken='+this.token;
				var url = 'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/refreshToken?accessToken='+this.token;
				var para = {};
				var that = this;
				that.httpGetxin(that, url, para, function(res) {
					that.token=res.data.obj;
					that.getdata();
				});
			},
			getdata(){
				uni.showToast({
					title: '加载中...',
					icon:'loading',
				});
				// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token;
				var url = 'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token;
				var para = {			
					  "code": "0001_zxc",
					  "params": {},
					  "page": 0,
					  "size": 0,
					  "result": {},
					  "orders": []						
				};
				var that = this;
				that.httpPostxin(that, url, para, function(res) {
					if (res.data.success) {
						uni.hideToast();
						that.datas =[];
						that.datas = res.data.obj.info;	
						that.getditu();
					}else {
						uni.showToast({
							title: '加载中...',
							icon:'loading',
							duration:20000
						});
					}
				});
			},
			daohang(jwd){
				var lnglat =jwd.split(",");
				this.lng = lnglat[0];
				this.lat = lnglat[1];
				var that=this;
				uni.openLocation({
					latitude:Number(that.lat),
					longitude:Number(that.lng),
					complete(e) {
						console.log(e);
					}
				})
				
			},
			setLm(id){
				var that = this;
				if(id==1){
					that.ggzxcind=0;
				}else{
					that.ggzxcind=1;
				}
			},
			getditu(){
				this.isMap = false;
				var that = this;
				var pois = [];
				for (var i = 0; i < that.datas.length; i++) {
				  var tmp = that.datas[i];
				  var lnglat = that.datas[i].jwd.split(",");
				  var p = {
				    id: i,
				    title: tmp.name,
					address: tmp.address,
					availBike:tmp.availBike,//余位
					capacity:tmp.capacity,//总数
				    latitude: Number(lnglat[1]),
				    longitude: Number(lnglat[0]),
				    iconPath: "https://qyly1.csly-travel.com/r/cms/www/m/changshu/icon-dituggzxc.png",
				    width: 38,
				    height: 38,
				    label: {
				      color: '#4A9AF9 ',
				      fontSize: 12,
				      content: tmp.name,
							anchorX: -35,
							anchorY: 0
				    }
				  };
				  pois.push(p);
				}
				that.markers = pois;
				that.nowData=that.markers[0];
				that.isMap = true;
				uni.hideToast()
			},
			getMarker(e){
				this.ismap=false;
				var id=e.detail.markerId;
				for(var i=0;i<this.markers.length;i++){
					if(this.markers[i].id==id){
						this.nowData=this.markers[i];
						this.markers[i].width=38;
						this.markers[i].height=38;
					}else{
						this.markers[i].width=28;
						this.markers[i].height=28;
					}
				}
				this.ismap=true;	
			},	
			daohan(){
				uni.openLocation({
					latitude:this.nowData.latitude,
					longitude:this.nowData.longitude
				})
			},
		}
	}
	
	
</script>

<style lang="scss">
	.leixing{
		display: flex;
		width: 200px;
		margin: 15px auto;
		text-align: center;
		border-radius: 30px;
		.ggzxclist{
			width: 100px;
			padding: 10px 0;
			background-color: #f5f5f5;
			font-size: 18px;
		}
		.active{
			color: #ffffff;
			background:linear-gradient(0deg, #3269F7 0%, #4A9AF9 70%);
		}
	}
	.zxclistditu{
		width: 100%;
		height: 100%;
		position: relative;
		.mparq{
			width: 100%;
			height: 100%;
			.map {
			  width: 100%;
			  height: 85vh;
			}
		}
	}
	
	.zxclist{
		width: 90%;
		margin: 30upx auto;
		.item{
			margin-bottom: 7%;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0rpx 0rpx 15rpx 10rpx #eee;
			background: #fff;
			line-height: 2;
			color: #666666;
			.tit{
				font-size: 36rpx;
				background:linear-gradient(0deg, #3269F7 0%, #4A9AF9 70%);
				padding: 10upx 30upx;
				color: #ffffff;
				font-weight: 600;
			}
			.dizhi{
				padding:10rpx 30rpx 30rpx 30rpx;
				display: flex;
				justify-content: space-between;
				.dzimg{
					padding: 0 30upx;
					background:#2dc15c;
					color: #ffffff;
					border-radius: 50rpx;
				}
			}
			.zxcsl{
				padding:0rpx 30rpx;
				display: flex;
				justify-content:center;
				text-align: center;
				margin: 10rpx 0 0rpx 0;
				.cwzs{
					width: 50%;
				}
				.sz{
					color: #333333;
					font-size: 32rpx;
					font-weight: 600;
				}
			}
		}
	}
	
	.des{
		width: 750rpx;
		height: 80px;
		background: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
		bottom: 0px;
		&-left{
	
			margin-left: 15rpx;
			width: 600rpx;
			.name{
				font-weight: bold;
				font-size: 32rpx;
			}
			.address{
				font-size: 24rpx;
				color: #000;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		&-right{
			width: 100rpx;
			height: 60rpx;
			background: #438BF8;
			border-radius: 20rpx;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
			font-size: 26rpx;
		}
		.parkNun{
			display: flex;
			padding: 10rpx 0;
			&-item{
				display: flex;
				font-size: 24rpx;
				font-weight: bold;
				color: #000;
				margin-right: 30rpx;
				&-num{
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
