<template>
	<view class="content">
		<u-sticky>
			<view class="map">
				<view class="tip">点击红色标记开启导航</view>
				<cover-view class="change-location" @click="chooseAddress">
					<text>切换</text>
					<text>位置</text>
				</cover-view>
				<map class="map" id="map" :longitude="locationInfo.locationLongitude" :latitude="locationInfo.locaitonLatitude"
					scale="12" :show-location="true" :markers="markers" @markertap="goNavigation($event)"></map>
			</view>
		</u-sticky>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: [],
				locationInfo: {},
				longitudeUser: null,
				latitudeUser: null,
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			chooseAddress() {
				uni.chooseLocation({
					latitude: this.user.latitude,
					longitude: this.user.longitude,
					success: (data) => {
						this.user.latitude = data.latitude;
						this.user.longitude = data.longitude;
						this.locationListByLl();
					},
					fail: (data) => {
						console.log('104', data)
						uni.showToast({
							icon: "none",
							title: "您已拒绝位置授权，请在小程序我的-隐私权限中自行打开授权",
							duration: 3000
						})
					}
				})
			},
			async getUserInfo() {
				const res = await this.$myRequest({
					url: '/getInfo'
				})
				this.user = res.data.user;
				this.locationListByLl();
			},
			// 查询医疗设备场所列表(距离由近至远)
			async locationListByLl() {
				let that = this;
				const res = await this.$myRequest({
					url: '/system/location/locationListByLl/?longitude=' + this.user.longitude +
						'&latitude=' + this.user.latitude,
					data: {
						pageNum: 1,
						pageSize: 10000
					}
				})
				if (res.data.code == 200) {
					this.locationInfo = res.data.rows[0]
				}
				var markers_new = [];
				res.data.rows.forEach((item, index) => {
					markers_new.push({
						id: item.id,
						label: {
							content: item.locationName,
							color: '#FFF',
							fontSize: '18',
							x: -35,
							bgColor: '#3c9cff',
							padding: 5,
							borderRadius: 5
						},
						latitude: item.locaitonLatitude,
						longitude: item.locationLongitude,
						iconPath: '/static/images/point.png',
						width: '30',
						height: '35'
					})
				})
				that.markers = markers_new;
			},
			goNavigation(e) {
				// console.log(e);
				// e.detail.markerId
				let findMarker = this.markers.find(item => {
					return item.id == e.detail.markerId
				})
				// console.log(findMarker);
				uni.openLocation({
					latitude: Number(findMarker.latitude),
					longitude: Number(findMarker.longitude),
					name: findMarker.label.content,
					fail: () => {
						uni.showModal({
							content: '打开地图失败,请重试'
						})
					}
				})

			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		width: 100%;
		height: 100%;
		position: relative;

		.tip {
			font-size: 14px;
			background-color: rgba(0, 0, 0, 0.1);
			color: red;
			padding: 5px 0px;
			text-align: center;
		}

		.change-location {
			position: absolute;
			z-index: 1;
			right: 10rpx;
			bottom: 200rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #a2d369;
			box-shadow: 0rpx 4rpx 20rpx 4rpx rgba(0, 0, 0, .4);
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
		}

		.map {
			height: 1600rpx;
			width: 100%;
		}

		.controls {
			position: absolute;
			right: 10rpx;
			top: 300rpx;
			width: 50rpx;
			height: 50rpx;
			background-color: #fff;
		}


	}
</style>