<template>
	<view>
		<view class="search-box">
			<view class="search-box-input">
				<u-input placeholder="热门店铺" placeholder-style="color: #888888" prefixIcon="search"
					prefixIconStyle="font-size: 24px;color: #888888;" border="true">
				</u-input>
			</view>
		</view>
		<view class="content">
			<map id="map" @markertap="markerClick" class="map" :markers="marker" :show-location="true" :latitude="lat"
				:longitude="lng"></map>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lat: '30.57',
				lng: '104.07',
				marker: []
			}
		},
		async onShow() {
			// await this.getLifeTypeList();
			// await this.getStatusCode()
			// if (!this.lat && !this.lng) {
			// 	await this.chooseSpot()
			// } else {
			// 	if (this.isGd) {
			// 		await this.getPoiAround();
			// 	} else {
			// 		await this.getPoiPage();
			// 	}
			// }
			// 地图
			this._mapContext = uni.createMapContext("map", this);
			this._mapContext.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
					console.log('initMarkerCluster', res)
				}
			});
			this._mapContext.on("markerClusterCreate", (e) => {
				console.log("markerClusterCreate", e);
			});
		},
		methods: {
			// 图标点击
			markerClick(e) {
				console.log('图标点击', e);
				// let markerId = e.markerId;
				// this.marker.forEach(item => {
				// 	if (markerId === item.id) {
				// 		if (this.isGd) {
				// 			uni.navigateTo({
				// 				url: `/pages/communityLive/details?data=${item.label}&type=gd&name=${this.name}`
				// 			})
				// 		} else {
				// 			uni.navigateTo({
				// 				url: `/pages/communityLive/details?id=${item.id}&name=${this.name}&type=fgd`
				// 			})
				// 		}
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss">
	.search-box {
		position: absolute;
		z-index: 2;
		top: 20rpx;
		left: 50%;
		transform: translateX(-50%);

		.search-box-input {
			width: 580rpx;
			height: 62rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			opacity: 0.85;
		}
	}

	// 地图
	.content {
		width: 100%;
		height: 460rpx;
	}

	.map {
		width: 100%;
		height: 100vh;
	}
</style>