<template>
	<view class="content">
		<!-- 顶部导航 -->
		<uni-nav-bar 
		:border="false" 
		@clickLeft="toUserCenter" 
		leftIcon="person-filled" 
		 background-color="#fff" 
		 :status-bar="true" 
		 :fixed="true" 
		 color="rgb(255,0,0)">
		  <view slot="left">个人中心</view>
		</uni-nav-bar>
		<!-- 页面主体 -->
		<view class="pageContent">
			<map id="map" :latitude="lat" :longitude="lng" scale="14" show-compass :markers="markers" @markertap="markertap"
			 show-location style="width: 100%; height:100%;">
			 <!-- 左边控件 -->
				<view class="cover-view">
					<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="openPop" 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> -->
					</view>
				</view>
				<!-- 地图移动后返回原位置控件 -->
				<view class="cover-location">
					<cover-image class="img" @click="moveToLocation" src="/static/img/location.png"></cover-image>
				</view>
				<view class="cover-bottom">
					<button @click="scanCode" type="warn">扫码洗车</button>
				</view>
			</map>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {checkLogin} from '@/api/login.js'
	import {getMapStoreList} from '@/api/store.js'
	export default {
		components: {
			uniNavBar, uniPopup
		},
		data() {
			return {
				mapCtx: null, // 地图对象
				markers: [], // 标注点
				lng: '',
				lat: '',
				markData: [{
						id: '1',
						name: '洗车机',
						latitude: '34.29318',
						longitude: '108.94712',
						status: 1
					},
					{
						id: '22',
						name: '洗车机',
						latitude: '34.29318',
						longitude: '108.96712',
						status: 1
					},
					{
						id: '2',
						name: '洗车机',
						latitude: '34.29318',
						longitude: '118.94712',
						status: 2
					},
					{
						id: '11',
						name: '洗车机',
						latitude: '34.29318',
						longitude: '110.94712',
						status: 1
					},
					{
						id: '12',
						name: '洗车机',
						latitude: '34.39318',
						longitude: '108.94712',
						status: 0
					},
					{
						id: '13',
						name: '洗车机',
						latitude: '44.29318',
						longitude: '108.94712',
						status: 1
					}
				],
			}
		},
		onReady() {
			this.mapCtx = uni.createMapContext('map')
		},
		onShow() {
			console.log(this.$store.state.vuex_orderInfo,'vuex_orderInfo')
		},
		onLoad() {
			this.getUserLocation()
		},
		methods: {
			// 用户位置信息授权
			getUserLocation() {
				let _this = this
				// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope  H5及APP平台不适用
				// H5及APP平台适配代码
				// #ifndef H5 || APP-PLUS
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									// 用户已经同意小程序使用位置信息，后续调用 uni.getLocation 接口不会弹窗询问
									_this.getLocation()
								},
								// 用户拒绝授权位置信息时默认展示青海西宁位置地图
								fail: (err) => {
									_this.lng = '101.760521'
									_this.lat = '36.636193'
									_this.markers = _this.getMarkersData()
								}
							})
						} else {
							_this.getLocation()
						}
					}
				})
				// #endif
			},
			// 获取用户位置
			getLocation () {
				uni.getLocation({
					type: 'gcj02', 
					success: (res) => {
						console.log(res,'rrrr')
						let latitude = res.latitude;
						let longitude = res.longitude;
						// this.lng = longitude
						// this.lat = latitude
						this.lng = '116.510229'
						this.lat = '39.848974'
						this.markers = this.getMarkersData()
					},
					// 定位失败默认展示青海西宁位置地图
					fail: (err) => {
						this.lng = '101.760521'
						this.lat = '36.636193'
						this.markers = this.getMarkersData()
					}
				});
			},
			// 点击标点进入网点详情
			markertap(e) {
				console.log(e)
				uni.navigateTo({
					url: `/pages/store/storeDetail?id=${e.markerId}`
				})
			},
			// 获取所有标记点数据
			getMarkersData() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					lat: '39.848974',
					lng: '116.510229'
				}
				getMapStoreList(params).then(res=>{
					uni.hideLoading()
					if (res.status == 200) {
						this.markData = res.data
						let markers = [];
						for (let item of this.markData) {
							let marker = this.createMarker(item);
							markers.push(marker)
						}
						this.markers = markers
						console.log(this.markers,'111111')
					} else {
						this.toashMsg(res.message)
					}
				})
				
			},
			// 点击回到定位坐标点
			moveToLocation () {
				this.mapCtx.moveToLocation()
			},
			// 进入个人中心
			toUserCenter () {
				// 检验是否登录或登录是否过期
				checkLogin().then(res =>{
					if (res.status == '200'){
						uni.navigateTo({
						    url: '/pages/userCenter/index'
						})
					} else {
						uni.navigateTo({
						  url: `/pages/login/login?lanuch=false&path=` + encodeURIComponent(`/pages/userCenter/index`)
						});
					}
				})
			},
			// 打开网点列表
			intoList() {
				uni.navigateTo({
				    url: '/pages/store/storeList'
				})
			},
			// 联系客服
			openPop() {
				 let _this = this
				 uni.showActionSheet({
				     itemList: ['在线客服', '电话客服'],
				     success: function (res) {
						 //在线客服
						 if(res.tapIndex == 1){
						   _this.callPhone()
						 }
				         //电话客服
						 if(res.tapIndex == 1){
							 _this.callPhone()
						 }
				     },
				     fail: function (res) {
				         console.log(res.errMsg);
				     }
				 });
			},
			// 电话客服
			callPhone () {
				uni.makePhoneCall({
				    phoneNumber: '114' 
				})
			},
			// 扫码洗车
			scanCode () {
				checkLogin().then(res =>{
					if (res.status == '200'){
						uni.navigateTo({
							url: '/pages/getOrder/getOrder'
						})
						// uni.scanCode({
						//     success: function (res) {
						//         console.log('条码类型：' + res.scanType);
						//         console.log('条码内容：' + res.result);
						//     }
						// });
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				})
			},
			// 创建标记点 OPEN ：正常营业  CLOSED:暂停营业  TO_BE_OPENED:待开业
			createMarker(point) {
				let latitude = point.lat;
				let longitude = point.lng;
				let iconPath = ''
				if (point.businessStatus==='CLOSED') {
					iconPath = '/static/img/store-dky.png'
				} else if (point.businessStatus==='OPEN') { 
					iconPath = '/static/img/store.png'
				} else {
					iconPath = '/static/img/store-zt.png'
				}
				let marker = {
					iconPath: iconPath,
					id: point.id || 0,
					name: point.name || '',
					latitude: latitude,
					longitude: longitude,
					width: 30,
					height: 49,
					callout: {
						content: point.name,
						fontSize: 14,
					}
				};
				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% - 150rpx);
				left: calc(50% - 360rpx);
				.flex-wrp {
					display: flex;
					flex-direction: column;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 10rpx;
					padding: 10rpx 0;
				}
				.flex-item {
					width: 110rpx;
					height: 110rpx;
					font-size: 24rpx;
					color: #F8F8F8;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.img {
						width: 50rpx;
						height: 50rpx;
						margin-bottom: 10rpx;
					}
				}
			}
			.cover-location{
				position: absolute;
				top: calc(75%);
				left: calc(85%);
				.img{
					width: 80rpx;
					height: 80rpx;
				}
			}
			.cover-bottom {
				position: absolute;
				bottom: calc(60rpx);
				width: 80%;
				left: calc(9%);
				uni-button[type=warn]{
					background: red;
				}
			}

		}
		
		
	}
</style>
