<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" @regionchange="handleRegionChange()" :markers="marker"
				:show-location="true" :latitude="lat" :longitude="lng" :show-scale="true"></map>
		</view>
		<!-- <view class="down-shop">
			<ShowShopListItem :shopInfo="shopList" :is-adshow="true" :show-style="0"></ShowShopListItem>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radius: '',
				scaleM: [{
						scale: 3,
						milo: 1000000
					},
					{
						scale: 4,
						milo: 500000
					},
					{
						scale: 5,
						milo: 200000
					}, {
						scale: 6,
						milo: 100000
					}, {
						scale: 7,
						milo: 50000
					},
					{
						scale: 8,
						milo: 50000
					}, {
						scale: 9,
						milo: 20000
					}, {
						scale: 10,
						milo: 10000
					}, {
						scale: 12,
						milo: 2000
					}, {
						scale: 13,
						milo: 1000
					},
					{
						scale: 14,
						milo: 500
					},
					{
						scale: 15,
						milo: 200
					},
					{
						scale: 16,
						milo: 100
					},
					{
						scale: 17,
						milo: 50
					},
					{
						scale: 18,
						milo: 50
					},
					{
						scale: 19,
						milo: 20
					}
				],
				scale: '',
				lat: '30.48772', //纬度
				lng: '104.080145', //经度
				marker: [{ //用户当前位置
						id: 1,
						latitude: 30.48772,
						longitude: 104.080145,
						iconPath: '../../../static/map/sp_icon_dw.png',
						width: '58rpx',
						height: '72rpx',
						rotate: 0,
						alpha: 1
					},
					//周围标记点
					{
						id: 2,
						latitude: 30.488573,
						longitude: 104.081248,
						// iconPath: '../../../static/map/sp_icon_dw.png',
						width: '58rpx',
						height: '72rpx',
						rotate: 0,
						alpha: 1
					}
				],
				shopList: {
					shopid: 1,
					imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
					title: '琴行铺面转让',
					promotionNum: 23,
					price: 6000,
					date: '2023-11-02',
					pos: '锦江区',
					exactPos: '锦江区-汇源南路366号',
					sqr: 100,
					zrfText: "转让费：20万",
					category: '餐饮美食',
					uname: "张先生",
					phoneNum: 13348946108,
				}
			}
		},
		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);
			});
			//定时监听地图缩放
			setInterval(() => {
				this._mapContext.getScale({
					success: res => {
						// console.log('ressss', res);
						this.scale = res.scale;
					}
				})
			}, 500)
		},
		watch: {
			scale(newVal, oldVal) {
				console.log('thisscale',newVal, Math.round(newVal));
				let ra=''
				this.scaleM.forEach(item => {		
					if (item.scale == Math.round(newVal)) {
						ra = item.milo
					}
				})
				this.getMapList(ra)
				// let i = 16 //这是我在data里声明的缩放层级  这个i理解成16就行
				// if (newVal >= i && oldVal < i) {
				// 	console.log('如果新的缩放层级大于16并且旧的缩放层级小于16就触发这个添加icon的方法');
				// 	// this.addMakers() //如果新的缩放层级大于16并且旧的缩放层级小于16就触发这个添加icon的方法
				// } else if (newVal < i && oldVal >= i) {
				// 	console.log('如果新的缩放层级小于16并且旧的大于16就触发删除icon的方法');
				// 	// this.removerMakers() //如果新的缩放层级小于16并且旧的大于16就触发删除icon的方法
				// }
			}
		},
		created() {
			this.getMapList()
		},
		methods: {
			handleRegionChange(e) {
				console.log('地图缩放层级变化, 只能监听拖拽, 不能监听缩放', e);
			},
			getMapList(radius) {
				console.log('this.radius',radius);
				const realData = {
					longitude: uni.getStorageSync('longitude'),
					latitude: uni.getStorageSync('latitude'),
					radius: 100
				}
				const mockData = {
					longitude: 23.40,
					latitude: 116.38,
					radius: 1111111111
				}
				this.$api.getMap(mockData).then(res => {
					console.log('getMap', res);
					let obj = {}
					let arr = []
					if (res.statusCode === 200) {
						res.data.data.forEach(item => {
							obj = {
								id: parseInt(item.id),
								latitude: item.lat,
								longitude: item.lng,
								// iconPath: '../../../static/map/sp_icon_dw.png',
								width: '58rpx',
								height: '72rpx',
								rotate: 0,
								alpha: 1
							}
							arr.push(obj)
						})
						// this.marker=arr
						console.log('this.marker', this.marker);
					}
				})
			},
			// 图标点击
			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: 50%;
		transform: translateX(-50%);

		.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>