<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" :markers="marker" :show-location="true" :latitude="lat"
				:longitude="lng"></map>
		</view>
		<view class="down-shop">
			<ShowShopListItem :shopInfo="shopList"></ShowShopListItem>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lat: '30.48772',
				lng: '104.080145',
				marker: [{
						id: 1,
						latitude: 30.488573,
						longitude: 104.081248,
						iconPath: '../../../static/map/sp_icon_dw.png',
						width: '58rpx',
						height: '72rpx',
						rotate: 0,
						alpha: 1
					},
					{
						id: 2,
						latitude: 30.48772,
						longitude: 104.080145,
						// iconPath: '../../../static/map/sp_icon_dw.png',
						width: '58rpx',
						height: '72rpx',
						rotate: 0,
						alpha: 1
					}
				],
				shopList: {
					imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
					title: '琴行铺面转让',
					promotionNum: 23,
					price: 5000,
					date: '2023-11-02'
				}
			}
		},
		onShow() {
			// 地图
			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; //点击标记点, 获取id, 查询店铺详情, 展示在下方
				this.marker.forEach(item => {
					if (markerId === item.id) {
						item.iconPath = ""
					} else {
						item.iconPath = "../../../static/map/sp_icon_dw.png"
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.search-box {
		position: absolute;
		z-index: 1;
		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;
		}
	}

	.down-shop {
		width: 710rpx;
		// background-color: red;
		position: absolute;
		z-index: 1;
		bottom: 60rpx;
		left: 10%;
		transform: translateX(-10%);

		.list-border {
			margin: 0;
			padding: 20rpx 20rpx 20rpx 27rpx;
			width: 94.5%;
			border-radius: 7rpx;
			box-shadow: 0rpx 1rpx 2rpx 0rpx rgba(224, 224, 224, 0.5), 0rpx 4rpx 12rpx 1rpx rgba(102, 102, 102, 0.37);

			.rent-and-date text {
				margin-right: 30rpx !important;
				font-size: 24rpx;
			}
		}
	}
</style>