<template>
	<view class="page">
		<view class="main">
			<view class="map" style="width: 100%;height: 100%;">
				<map   id="customMap" :scale="scaleNum" :style="'width: 100%;'+ 'height:'+screenHeight"  :markers="markers" layer-style="1" subkey="PTOBZ-QDQEG-DK3QM-QMYWN-I5WDZ-CCB6S"
					:latitude="address.latitude" :longitude="address.longitude" @regionchange="mapTouchEnd" @labeltap="mapMarkerChange" ></map>
			</view>
		</view>
		<view class="cent" >
			<view class=" list" style="display: flex;">
				<view v-for="(item,index) in icon" :key='index' class="item" :class="type==item.text?'on':''" @click="changmap(item)">
					<view style="height: 60%;">
						<image style="height: 100%;" :src="item.icon" mode="heightFix"></image>
						<!-- <image src="../../static/imgs/index/icon23.png" mode="heightFix"></image> -->
					</view>
					<view style="height: 10%;"></view>
					<view>{{item.text}}</view>
				</view>
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="list1">
					<view v-for="(item,index) in list" :key='index' class="item" style="display: flex;justify-content: space-between;">
						<view style="width: 75%;">
							<view style="font-weight: bold;font-size: 26rpx;margin-bottom: 10rpx;">{{item.title}}</view>
							<view>{{item.address}}</view>
						</view>
						<view @click="NavigationMap(item)">
							<u-icon name="map-fill" color="#2979ff" size="20"></u-icon>
							<!-- <uni-icons type="paperplane-filled" size="20" color="sandybrown"></uni-icons> -->
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import utils from '../../service/utils.js'
	import service from '../../service/service.js'
	export default {

		data() {
			return {
				icon:[
					// {
					// 	text:'商业街区',
					// 	icon:'../../static/imgs/index/icon23.png',
					// },
					{
						text:'加油站',
						icon:'../../static/imgs/index/icon24.png',
					},
					{
						text:'停车场',
						icon:'../../static/imgs/index/icon25.png',
					},
					{
						text:'洗车场',
						icon:'../../static/imgs/index/icon26.png',
					},
					{
						text:'充电站',
						icon:'../../static/imgs/index/icon27.png',
					},
					{
						text:'医院',
						icon:'../../static/imgs/index/icon28.png',
					},
					{
						text:'体育场',
						icon:'../../static/imgs/index/icon29.png',
					},
					{
						text:'厕所',
						icon:'../../static/imgs/index/icon30.png',
					},
					// {
					// 	text:'文化馆',
					// 	icon:'../../static/imgs/index/icon32.png',
					// },
					// {
					// 	text:'图书馆',
					// 	icon:'../../static/imgs/index/icon33.png',
					// },
					// {
					// 	text:'博物馆',
					// 	icon:'../../static/imgs/index/icon34.png',
					// },
				],
				screenHeight:'',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				address: {
					// 纬度
					latitude: 29.99599,
					// 经度
					longitude: 104.13412
				},
				_mapContext: undefined,
				markers: [],
				list: [],
				// 缩放比例
				scaleNum: 14,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				type:'商业街区'
			}
		},
		onReady() {
			// 获取地图实例
			this.markers = []
			this._mapContext = uni.createMapContext("customMap", this);
			console.log('这是地图实力信息', this._mapContext)
			// this.GetLocation()
			
		},
		onLoad(e) {
			console.log(e.type)
			
			if(e.type) {
				this.GetStoreData(e.type)
				this.type = e.type
			} else {
				this.type = '加油站'
				this.GetStoreData('加油站')
			}
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log('App Launch1111')
					console.log(res.safeArea.height)
					that.screenHeight = res.safeArea.height + 'px'
				},
			
			})
		},
		methods: {
			NavigationMap(e) {
				console.log(e)
				uni.openLocation({
					longitude: parseFloat(e.location.lng),
					latitude: parseFloat(e.location.lat),
					success(e) {
						console.log('拉起导航成功', e)
					},
					fail(error) {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					},
					complete(com) {
						console.log('拉起导航complete', com)
					}
				})
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			changmap(e) {
				this.type = e.text
				this.markers = []
				this.list = []
				this._mapContext.addMarkers({
					clear: true,
					markers: [],
					success: (res) => {
					   console.log('removeMarkers', res)
					},
				})
				this.GetStoreData(e.text)
			},
			mapTouchEnd(e) {
				console.log('回调参数', e)
			},

			async mapMarkerChange(e) {
				console.log('标记点', e)
			},
			addMarkers(list) {
				const positions = []
				list.forEach((item, index) => {
					positions.push({
						latitude: item.location.lat,
						longitude: item.location.lng,
						title: item.title,
						// distance: item.distance,
						// type:item.type==1?'整租':item.type==2?'合租':''
					})
				})
				const newMarkers = []
				positions.forEach((p, i) => {
					newMarkers.push(
						Object.assign({}, {
							id: i,
							// iconPath: this.IMG_URL + '/imgs/marks.png',
							width: 20,
							height: 30,
							joinCluster: false, // 指定了该参数才会参与聚合  
							// label: {
							// 	padding: 10,
							// 	height: 30,
							// 	borderWidth: 1,
							// 	borderRadius: 10,
							// 	bgColor: '#ffffff',
							// 	color:'#3d3d3d',
							// 	content: `${p.title}`
							// }
						}, p)
					)
				})
				this.markers = [...this.markers ,...newMarkers]
				const markers = [...this.markers ,...newMarkers]
				
				this.$forceUpdate()
				
				this._mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						// console.log('addMarkers', res)
					}
				})
			},

			// 获取门店列表
			async GetStoreData(e) {
				let that  =  this
				wx.request({
				  //地图WebserviceAPI地点搜索接口请求路径及参数（具体使用方法请参考开发文档）
					url: 'https://apis.map.qq.com/ws/place/v1/search?page_index=1&page_size=20&boundary=region(仁寿县,0)&key=JSMBZ-IH4WB-AHOU5-JIQ4B-RONK3-FRBL4&keyword='+e,
					success(res){
						// console.log(res.data.data)
						that.addMarkers(res.data.data)
						that.list = res.data.data
						// console.log(res.data.count)
						if(res.data.count > 20) {
							// console.log(res.data.count/20)
							// console.log(Math.ceil(res.data.count/20))
							let c1 = Math.ceil(res.data.count/20)
							for (let i = 1; i <= c1; i++) {
								// console.log(i)
								if(i == 1) {
									
								} else if(i == 2) {
									wx.request({
									  //地图WebserviceAPI地点搜索接口请求路径及参数（具体使用方法请参考开发文档）
										url: 'https://apis.map.qq.com/ws/place/v1/search?page_size=20&boundary=region(资中县,0)&key=JSMBZ-IH4WB-AHOU5-JIQ4B-RONK3-FRBL4&keyword=' + e + '&page_index=' + i,
										success(res){
											// console.log(res.data.data)
											that.addMarkers(res.data.data)
											that.list =[...that.list,...res.data.data] 
										}	
									})
								} else {
									
								}
							}

						} else {
							console.log('不够')
						}
					}	
				})
				// this.API.GetArticleList({...this.model,...this.addressqq}).then(res => {
				// 	console.log('获取门店列表', res)	
				// 	for (let i = 0; i < res.data.list.length; i++) {
				// 		console.log(res.data.list[i].distance )
				// 		res.data.list[i].distance = this.WAY.kmUnit(res.data.list[i].distance)
				// 		console.log(res.data.list[i].distance )
				// 	}
				// 	this.addMarkers(res.data.list)
				// 	this.list = res.data.list
				// })
			},
			downCallback() {
				this.mescroll.endSuccess();
			},
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},
			ConfirmOrder(e) {
				uni.navigateTo({
					url: '/pages/houseCent/houseCent?id='+ e
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	@import 'home.scss';
		.scroll-Y {
			height: 400rpx;
			background: #ffffff;
		}
	.manpCenter {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		// z-index: 111 !important;
		left: calc(50% - 24rpx);
		top: calc(50% - 77rpx); // 按道理是-38.5rpx，但是会比实际偏上一点，设置-77rpx视觉上比较符合实际
	}

	.titleSetting {
		box-shadow: 2px 2px 10px #e0e0e0;
		text-align: center;
		font-size: 20rpx;
		color: black;
		line-height: 28rpx;
		background-color: white;
		height: 28rpx;
		padding: 10rpx 15rpx 10rpx 15rpx;
		position: absolute;
		// z-index: 111 !important;
		left: calc(50% - 80rpx);
		top: calc(50% - 130rpx); // 按道理是-38.5rpx，但是会比实际偏上一点，设置-77rpx视觉上比较符合实际
	}

	.centerview1 {

		margin: 0 auto;
		width: 100%;
		border: 1px solid #f2e2ac;
		border-radius: 10px;
		background: linear-gradient(270deg, #878787 0%, #282828 100%);
		text-align: center;
		z-index: 99999999999;
		height: 40px;
		line-height: 40px;
		color: white;
		animation: scaleDrawC 2s;
		transform-origin: 50% 50%;
		-webkit-animation-name: scaleDrawC !important;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: infinite;
		/*动画播放的次数*/
		-webkit-animation-duration: 2s;
	}
</style>
