<template>
	<view class="shop-list-index">
		<map style="width: 100%; height: 100%;" id="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="covers"
		 @tap="map" show-location @markertap="markTap" enable-rotate=false>
			<cover-view class="card" v-show="isShow" @click="shopDetail(topCard.id)">
				<cover-view class="shopDetail">
					详情
				</cover-view>
				<cover-view class="name">
					<cover-view class="title">
						站点名称：
					</cover-view>
					<cover-view class="value">
						{{topCard.name}}
					</cover-view>

				</cover-view>

				<cover-view class="name">
					<cover-view class="title">
						设备数量：
					</cover-view>
					<cover-view class="value">
						{{topCard.device_nums}}
					</cover-view>
				</cover-view>
				<cover-view class="name">
					<cover-view class="title">
						站点地址：
					</cover-view>
					<cover-view class="value">
						{{topCard.address}}
					</cover-view>
				</cover-view>
			</cover-view>

			<cover-image class="location" @click="refLocation" src="../../static/image/location.png"></cover-image>
		</map>
	</view>
</template>

<script>
	var app = getApp()

	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				covers: [],
				topCard: "",
				isShow: false
			}
		},
		onLoad() {
			uni.getLocation({
				success: (res) => {
					console.log(res, 'ppp')
					this.latitude = res.latitude
					this.longitude = res.longitude
				}

			})
			app.request('/shops-lists', '', 'get').then(res => {
				let shopList = res.data.data.data
				let arr = []
				shopList.map((item, index) => {
					console.log(item, '------------------')
					arr.push({
						latitude: item.lat,
						longitude: item.lng,
						id: item.id,
						address: item.address, //站点地址
						name: item.name, //站点名称
						device_nums: item.device_nums, //设备数量
						contact_name: item.contact_name,
						contact_mobile: item.contact_mobile, //管理员电话
						iconPath: '../../static/image/location3.png',
						width: 40,
						height: 40,
					})
				})
				this.covers = arr
				console.log(arr, '===============')
			})
		},
		methods: {
			//重新定位
			refLocation: function() {
				uni.createMapContext("map", this).moveToLocation();
			},
			//点击地图上的标记点
			markTap: function(e) {
				this.isShow = true
				let index = e.detail.markerId - 1
				this.topCard = this.covers[index]
				//点击切换地图上坐标点的图标
				this.covers.map(item => {
					if (item.id == e.detail.markerId) {
						console.log(item.id, 'ppppp')
						item.iconPath = '../../static/image/location1.png';
					} else {
						item.iconPath = '../../static/image/location3.png'
					}
				})

			},
			//点击地图恢复图标颜色隐藏上部card
			map: function() {
				this.covers.map(item => {
					item.iconPath = '../../static/image/location3.png'
				})
				this.isShow=false
			},
			//跳转站点详情页面
			shopDetail: function(e) {
				uni.navigateTo({
					url: './equipmentList?id=' + e
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;

		.shop-list-index {
			height: 100vh;
		}

		.location {
			position: absolute;
			z-index: 99999;
			height: 70upx;
			width: 70upx;
			bottom: 230upx;
			right: 50upx;
		}

		.card {
			// height: 200upx;
			padding: 30upx;
			width: 85%;
			background-color: #FFFFFF;
			margin: 0 auto;
			margin-top: 20upx;
			border-radius: 12upx;
			position: relative;

			.shopDetail {
				position: absolute;
				right: 30upx;
				// z-index: 9999999;
				top: 30upx;
				background-color: #ff9603;
				padding: 15upx 30upx;
				border-radius: 20upx;
				font-size: 24upx;
				color: #FFFFFF;

			}

			.name {
				font-size: 28upx;
				margin: 15upx 0;
				color: #333333;
				display: flex;

				.title {
					flex: 0 0 150upx;
				}

				.value {
					flex: 1;
				}
			}
		}
	}
</style>
