<template>
	<view class="content">
		<!-- 顶部导航 -->
		<uni-nav-bar :border="false" @click-left="toUserCenter" leftIcon="person-filled" leftText="个人中心" :shadow="false"
		 background-color="#fff" :status-bar="true" :fixed="true" color="rgb(255,0,0)" title=" ">
		</uni-nav-bar>
		<!-- 页面主体 -->
		<view class="pageContent">
			<map id="map" :latitude="centerY" :longitude="centerX" scale="14" :markers="markers" bindmarkertap="markertap"
			 show-location style="width: 100%; height:100%;">
				<cover-view class="cover-view">
					<cover-view class="flex-wrp">
						<cover-view @click="intoList" class="flex-item">
							<cover-image class="img" src="/static/img/index-list.png"></cover-image>
							<cover-view>网点列表</cover-view>
						</cover-view>
						<cover-view @click="concatServicer" class="flex-item">
							<cover-image class="img" src="/static/img/index-call.png"></cover-image>
							<cover-view>联系客服</cover-view>
						</cover-view>
						<cover-view class="flex-item">
							<cover-image class="img" src="/static/img/index-discount.png"></cover-image>
							<cover-view>优惠活动</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="cover-bottom">
					<button @click="scanCode" type="warn">扫码洗车</button>
				</cover-view>
			</map>
		</view>
		<!-- 客服弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-box">
				<view class="pop-top">
					<view class="top-first pop-item">
						在线客服
					</view>
					<view @click="callPhone" class="pop-item">
						电话客服
					</view>
				</view>
				<view @click="$refs.popup.close()" class="pop-cancle">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name: 'Index',
		components: {
			uniNavBar, uniPopup
		},
		data() {
			return {
				markers: [], // 标注点
				centerX: '',
				centerY: '',
				markData: [{
						id: '1',
						name: '洗车机',
						latitude: '34.29318',
						longitude: '108.94712',
					},
					{
						id: '2',
						name: '洗车机',
						latitude: '34.29318',
						longitude: '118.94712',
					},
					{
						id: '11',
						name: '洗车机',
						latitude: '34.29318',
						longitude: '128.94712',
					},
					{
						id: '12',
						name: '洗车机',
						latitude: '38.29318',
						longitude: '108.94712',
					},
					{
						id: '13',
						name: '洗车机',
						latitude: '44.29318',
						longitude: '108.94712',
					}
				]
			}
		},
		onReady() {
			this.mapCtx = wx.createMapContext('map')
		},
		onLoad() {
			wx.getLocation({
				type: 'gcj02', //返回可以用于wx.openLocation的经纬度
				success: (res) => {
					console.log(res)
					let latitude = res.latitude;
					let longitude = res.longitude;
					this.centerX = longitude
					this.centerY = latitude
					this.markers = this.getMarkersData()
				}
			});
			// this.getUserLocation()
		},
		methods: {
			// 用户位置信息授权
			getUserLocation() {
				// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							wx.authorize({
								scope: 'scope.userLocation',
								success() {
									// 用户已经同意小程序使用位置信息，后续调用 wx.startRecord 接口不会弹窗询问
									wx.getLocation({
										type: 'gcj02', //返回可以用于wx.openLocation的经纬度
										success: (res) => {
											console.log(res)
											let latitude = res.latitude;
											let longitude = res.longitude;
											this.centerX = longitude
											this.centerY = latitude
											this.markers = this.getMarkersData()
										}
									});
								}
							})
						}
					}
				})
			},
			// 点击标点获取数据
			markertap(e) {
				var id = e.markerId
				var name = this.data.markers[id - 1].name
				console.log(name)
				this.setData({
					lingyuanName: name,
					showDialog: true,
				})
			},
			// 获取标记点数据
			getMarkersData() {
				let markers = [];
				for (let item of this.markData) {
					let marker = this.createMarker(item);
					markers.push(marker)
				}
				return markers;
			},
			// 打开网点列表
			intoList() {
				console.log(1111)
			},
			// 联系客服
			concatServicer() {
				 this.$refs.popup.open()
			},
			// 电话客服
			callPhone () {
				uni.makePhoneCall({
				    phoneNumber: '114' 
				})
			},
			// 扫码洗车
			scanCode () {
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
				    }
				});
			},
			// 创建标记点
			createMarker(point) {
				let latitude = point.latitude;
				let longitude = point.longitude;
				let marker = {
					iconPath: "/image/location.png",
					id: point.id || 0,
					name: point.name || '',
					latitude: latitude,
					longitude: longitude,
					width: 30,
					height: 30,
					label: {
						content: point.name,
						color: '#22ac38',
						fontSize: 14,
						bgColor: 'transparent',
						borderRadius: 30,
						borderColor: "#22ac38",
						// borderWidth: 1,
						padding: 3
					},
					callout: {
						content: point.name,
						fontSize: 0,
					}
				};
				return marker;

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0;

		.pageContent {
			width: 100%;
			flex: 1;

			.cover-view {
				position: absolute;
				top: calc(60% - 120rpx);
				left: calc(50% - 360rpx);
				background: rgba(255, 0, 0, 0.5);
				border-radius: 20rpx;

				.flex-wrp {
					display: flex;
					flex-direction: column;
				}

				.flex-item {
					width: 120rpx;
					height: 120rpx;
					font-size: 24rpx;
					color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.img {
						width: 50rpx;
						height: 50rpx;
						margin-bottom: 10rpx;
					}
				}
			}

			.cover-bottom {
				position: absolute;
				bottom: calc(60rpx);
				width: 80%;
				left: calc(9%);
			}

		}
		.popup-box{
			width: 100%;
			height: 320rpx;
			background-color: #F8F8F8;
			display: flex;
			flex-direction: column;
			.pop-top{
				width: 100%;
				font-size: 32rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #fff;
				.pop-item{
					width: 80%;
					text-align: center;
					line-height: 100rpx;
				}
				.top-first{
					border-bottom: 1px solid #F8F8F8;
				}
			}
			.pop-cancle{
				width: 100%;
				flex: 1;
				margin-top: 20rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				color: #333;
			}
		}
	}
</style>
