<template>
	<view class="cotainer">
		<view class="navBarBox">
			<image class="navBarBox-top" :src="require('@/static/home-top.png')" mode=""></image>
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
			<image class="navBarBox-title" :style="{marginTop: navBarTop+'rpx'}"
				:src="require('@/static/index-title.png')" mode=""></image>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view @click="showTips = true,showNear = false">
					<image class="navBar-left" :src="require('@/static/index-icon.png')" mode=""></image>
				</view>
				<view class="navBar-center" @click="openPicker">
					<view class="">
						<image :src="require('@/static/home-area.png')" mode=""></image>
						{{area}}
					</view>

					<u-icon name="arrow-down-fill"></u-icon>
				</view>
				<view class="" @click="goSearch">
					<image class="navBar-right" :src="require('@/static/home-search.png')" mode=""></image>
				</view>
			</view>
		</view>
		<view class="maps">
			<map id="myMap" :longitude="lng" show-location :enable-scroll="!showLoad" @regionchange="pushMarkers"
				:scale="scale" :latitude="lat" :markers="markers" @callouttap="showDetail">
				<cover-view slot="callout" class="maps-covers">
					<block v-for="(item,index) in markers">
						<cover-view :marker-id="item.id" :key='index'>
							<cover-view class="maps-cover">
								<cover-view class="maps-cover-wrap">
									<cover-image class="maps-cover-img" :src='item.truePath'></cover-image>
									<block v-if="item.has_answer===0">
										<cover-view class="maps-cover-lock">
											<cover-image class="maps-cover-lockimg"
												:src="'/static/home-lock.png'"></cover-image>
											<cover-view></cover-view>
										</cover-view>
									</block>
								</cover-view>
								<cover-view class="maps-cover-label">
									<cover-image class="maps-labelbg" :src="'/static/home-cur.png'"></cover-image>
									<cover-view>{{item.title}}</cover-view>
								</cover-view>
							</cover-view>
						</cover-view>
					</block>
				</cover-view>
				<cover-view class="maps-info" v-if="showNear">
					<cover-view class="maps-info-near" @click="getNears">
						<cover-image src="../../static/home-near.png" mode=""></cover-image>
					</cover-view>
					<cover-view class="maps-info-pointer" v-if="showPointer && pointer">
						<cover-view class="maps-info-pointer-title">
							<cover-view style="width:100%">
								<cover-view>{{pointer.name}}</cover-view>
								<cover-image @click="closeDetail" style="width:40rpx;height:39rpx;"
									src="/static/home-close.png" mode=""></cover-image>
							</cover-view>
							<cover-view>距你{{pointer.distance?pointer.distance:'-'}}</cover-view>
							<cover-view v-if="pointer.config.length>0">
								<block v-for="con in pointer.config">
									<block v-if="con.key==='address'">
										{{con.value}}
									</block>
								</block>
							</cover-view>
						</cover-view>
						<cover-view style="width:100%;height:1px;background:#e9e9e9"></cover-view>
						<cover-view class="maps-info-pointer-btn">
							<cover-view @click="toMap">
								<cover-image style="width:29rpx;height:30rpx;" src="/static/home-go.png"
									mode=""></cover-image>
								<cover-view style="display:inline-block;vertical-align: middle;">开始前往</cover-view>
							</cover-view>
							<cover-image @click="toDetail" style="width:201rpx;height:55rpx;" src="/static/home-btn.png"
								mode=""></cover-image>
						</cover-view>
					</cover-view>
				</cover-view>

			</map>
		</view>

		<u-picker v-model="showArea" @confirm="confirmArea" @cancel="cancelArea" :range="listArea" range-key="value"
			:confirm-color="'#e50015'" mode="selector"></u-picker>
		<!-- 锦囊 -->
		<view class="tips" v-if="showTips" :class="showTips?'fade-in':'fade-out'">
			<view class="tips-wrap" @click="showTips=false,showNear=true">
				<view class="tips-wrap-close" @click="showTips=false,showNear=true">
					x
				</view>
				<view class="tips-wrap-img">
					<u-image :show-loading="false" :fade="false" mode="widthFix" :width="711"
						:src="require('../../static/toast.png')"></u-image>
					<view class="tips-wrap-tip">

						<view class="">
							<rich-text v-if='showTips' :nodes="tips?tips:' '"></rich-text>
						</view>
					</view>

				</view>


			</view>
		</view>
		<myloading ref="myloading"></myloading>
		<tabbar :currentPage="0"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	import myloading from '@/components/myloading.vue'
	import {
		ROOTPATH as baseUrl
	} from "@/common/config.js"
	import {
		isNull,
		shareInfo,
		toast,
		getDistance,
		toMapAPP
	} from '@/common/util.js'
	
	export default {
		components: {
			tabbar,
			myloading
		},
		data() {
			return {
				navBarTop: 0,
				showTips: false,
				tips: '',
				theme_id: '',
				area: '区域',
				mapContext: null,
				scale: 11,
				lat: null,
				lng: null,
				markers: [],
				pointers: [],
				done: 0,
				showPointer: false,
				pointer: null,
				listArea: [{
					id: '',
					value: '全部'
				}],
				showArea: false,
				tips: '',
				showLoad: false,
				showNear: true

			}
		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline() {
			return shareInfo
		},
		onReady() {
			uni.authorize({
				scope: 'scope.userLocation',
				success: (res) => {
					this.getUserLocation()
				}
			})
			this.mapContext = uni.createMapContext('myMap', this);

		},
		onLoad(option) {
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
			// this.getUserLocation()
			if (isNull(this.vuex_token)) {
				this.getToken()
			}
			this.getArea()
			this.getConfig()

		},
		onShow() {
			let vuex_pointer = uni.getStorageSync('vuex_pointer') ? uni.getStorageSync('vuex_pointer') : null
			let vuex_latlng = uni.getStorageSync('vuex_latlng') ? uni.getStorageSync('vuex_latlng') : ''
			let vuex_point_id = uni.getStorageSync('vuex_point_id') ? uni.getStorageSync('vuex_point_id') : ''
			// 通过搜索获取的点位信息
			if (vuex_pointer) {
				this.pointer = vuex_pointer
				this.pointer.distance = getDistance(vuex_latlng.lat, vuex_latlng.lng, this.pointer.lat, this.pointer.lng)
				this.showPointer = true
				this.scale = 13
				uni.removeStorageSync('vuex_pointer')
				this.mapContext.moveToLocation({
					longitude: parseFloat(this.pointer.lng),
					latitude: parseFloat(this.pointer.lat)
				});
			}
			// 答题的点位解锁
			console.log("vuex_point_id",vuex_point_id)
			if(vuex_point_id){
				this.markers.map(item=>{
					if(item.id==vuex_point_id){
						item.has_answer = 1
						uni.removeStorageSync("vuex_point_id")
					}
				})
			}
		},
		onHide() {
			console.log("this.showTips", this.showTips)
			this.showTips = false
			this.showPointer = false
			this.pointer = null
		},
		methods: {
			// 我的位置
			getUserLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log("res", res)
						uni.removeStorageSync('vuex_latlng')
						this.lng = res.longitude
						this.lat = res.latitude
						uni.setStorageSync('vuex_latlng', {
							lng: this.lng,
							lat: this.lat
						})
						this.getPointers()
					},
					fail: (err) => {
						console.log("err", err)
					}
				})
			},
			async getToken() {
				await uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log("rescode", res.code)
						this.$u.api.login({
							code: res.code
						}).then(res => {
							this.$u.vuex('vuex_token', res.token)
							this.$u.api.user().then(res => {
								this.$u.vuex('vuex_user', res)
							})
							this.getPointers()
						}).catch(err => {
							console.log('login-error:', JSON.stringify(err))
						})
					},
					fail: (res) => {
						console.log("errtoken", JSON.stringify(res))
					}
				});
			},
			async getArea() {
				let that = this
				let url = baseUrl + '/api/mobile/base-form/show'
				url = url + '?filter[0][key]=number&filter[0][op]=eq&filter[0][value]=theme&with_relations[0]=detail'
				await uni.request({
					url: url,
					method: "GET",
					data: {
						table_name: "parameters",
						id: 1,
						token: this.vuex_token,
						activity_list_id: 13,
						activity_tag: "walksz",
					},
					success(res) {
						that.listArea.push(...res.data.detail)
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			confirmArea(e) {
				if (e) {
					this.area = this.listArea[e].value
					this.theme_id = this.listArea[e].id
					this.showPointer = false
					this.pointer = null
					this.showNear = true
					this.scale = 11
					this.markers = []
					
					// 根据区域id 遍历所有 重新生成markers
					if(this.theme_id==''){
						// this.mapContext.moveToLocation({
						// 	longitude: this.lng,
						// 	latitude: this.lat,
						// });
						// this.getPointers()
						this.pointers.map((item, index) => {
								if(index<10){
									this.markers.push({
										id: item.id,
										latitude: parseFloat(item.lat),
										longitude: parseFloat(item.lng),
										iconPath: '/static/home-marker.png',
										truePath: item.logo ? item.logo.url : item.image.url,
										width: 0,
										height: 0,
										title: item.name,
										distance: item.distance ? parseInt(item.distance) : 0,
										has_answer: item.has_answer,
										customCallout: {
											anchorX: 70,
											anchorY: 30,
											display: 'ALWAYS'
										},
									})
								}
								
							
						})
					}else{
						this.pointers.map((item, index) => {
							if (this.theme_id && item.theme_id == this.theme_id) {
								this.markers.push({
									id: item.id,
									latitude: parseFloat(item.lat),
									longitude: parseFloat(item.lng),
									iconPath: '/static/home-marker.png',
									truePath: item.logo ? item.logo.url : item.image.url,
									width: 0,
									height: 0,
									title: item.name,
									distance: item.distance ? parseInt(item.distance) : 0,
									has_answer: item.has_answer,
									customCallout: {
										anchorX: 70,
										anchorY: 30,
										display: 'ALWAYS'
									},
								})
							}
						})
						this.mapContext.moveToLocation({
							longitude: this.markers[0].longitude,
							latitude: this.markers[0].latitude,
						});
					}
					// this.getPointers()
				}
			},
			cancelArea() {

				this.showNear = true
				this.showArea = false
				this.showPointer = false
				this.pointer = null
			},
			openPicker() {
				uni.hideKeyboard()
				this.showArea = true
				this.showNear = false
				this.showPointer = false
				this.pointer = null
			},
			goSearch() {
				uni.navigateTo({
					url: '/packages/search/search'
				})
			},
			getConfig() {
				this.$u.api.getAppId().then((res) => {
					res.config.map(item => {
						if (item.key === 'tips') {
							this.tips = item.value
						}
					})

				})
			},
			getNears() {
				console.log("123")
				this.scale = 13
				this.showPointer = false
				this.pointer = null
				this.mapContext.moveToLocation({
					longitude: this.lng,
					latitude: this.lat
				});
			},
			async getPointers() {
				this.pointers = []
				this.markers = []
				const res = await this.$u.api.getPoints({
					theme_id: this.theme_id,
				})
				this.pointers = res.points
				this.pointers.map((item, index) => {
					item.distance = getDistance(this.lat, this.lng, item.lat, item.lng)
					if (index < 10) {
						this.markers.push({
							id: item.id,
							latitude: parseFloat(item.lat),
							longitude: parseFloat(item.lng),
							iconPath: '/static/home-marker.png',
							truePath: item.logo ? item.logo.url : item.image.url,
							width: 0,
							height: 0,
							title: item.name,
							distance: item.distance ? parseInt(item.distance) : 0,
							has_answer: item.has_answer,
							customCallout: {
								anchorX: 70,
								anchorY: 30,
								display: 'ALWAYS'
							},
						})
					}
				})
			},
			// 移动地图加载更多
			pushMarkers(e) {
				console.log("e", e)
				let lengthM = this.markers.length //当前markers数量
				// 加载完毕 或 区域选择 移动不加载
				if (this.showLoad || this.theme_id) {
					return
				}
				if (e && this.markers.length < this.pointers.length) {
					this.pointers.map((item, index) => {
						// 每次移动加载10条
						if (index > lengthM - 1 && index < lengthM + 10) {
							// uni.showLoading()
							this.$refs.myloading.showLoading()
							this.showLoad = true
							this.markers.push({
								id: item.id,
								latitude: parseFloat(item.lat),
								longitude: parseFloat(item.lng),
								iconPath: '/static/home-marker.png',
								truePath: item.logo ? item.logo.url : item.image.url,
								width: 0,
								height: 0,
								title: item.name,
								distance: item.distance ? parseInt(item.distance) : 0,
								has_answer: item.has_answer,
								customCallout: {
									anchorX: 70,
									anchorY: 30,
									display: 'ALWAYS'
								},
							})
							let that = this
							setTimeout(function() {
								// uni.hideLoading()
								that.$refs.myloading.hideLoading()
								
								that.showLoad = false
							}, 2000)
						}
					})
				}
			},

			toDetail() {
				uni.navigateTo({
					url: '/packages/detail/detail?id=' + this.pointer.id,
				});
			},
			closeDetail() {
				this.showPointer = false
				setTimeout(function() {
					this.pointer = null
				}, 100);

			},
			showDetail(e) {
				const arr = this.pointers.filter(item => item.id === e.markerId)
				if (arr.length > 0) {
					this.pointer = arr[0]
					this.pointer.distance = getDistance(this.lat, this.lng, this.pointer.lat, this.pointer.lng)
					console.log(this.pointer.distance)
				}

				this.showPointer = true

			},
			toMap(e) {
				toMapAPP(this.pointer.lat, this.pointer.lng, this.pointer.name)
			},

		}
	}
</script>

<style lang="scss">
	.cotainer {
		.navBarBox {
			// height: 299rpx;
			position: fixed;
			padding-bottom: 30rpx;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			border-bottom: 10rpx solid #dbd0ba;

			&-top {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0
			}

			&-title {
				width: 399rpx;
				height: 102rpx;
				margin: 0 auto;
				position: relative;
				display: block;
			}

			.navBar {
				display: flex;
				position: relative;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;

				&-left {
					width: 58rpx;
					height: 86rpx;
				}

				&-center {
					background: rgba(219, 208, 186, .4);
					padding: 10rpx 30rpx;
					border-radius: 50rpx;
					width: 55%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #73685c;

					>view {
						align-items: center;
						display: flex;
					}

					image {
						width: 31rpx;
						height: 32rpx;
						margin-right: 15rpx;
					}
				}

				&-right {
					width: 58rpx;
					height: 86rpx;
				}
			}
		}

		.maps {

			#myMap {
				width: 100%;
				height: 100vh;
			}

			&-info {
				position: absolute;
				left: 0;
				bottom: 160rpx;
				width: 100%;
				z-index: 99;

				&-pointer {
					background: #fff;
					border-radius: 20rpx;
					width: 85%;
					margin: 0 auto;
					padding: 30rpx;
					font-size: 28rpx;
					box-shadow: -2px -3rpx 12px rgba(0, 0, 0, 0.1);

					&-title {
						color: #919191;
						padding-bottom: 20rpx;

						cover-view {
							margin-bottom: 10rpx;
							white-space: normal;

							&:first-child {
								font-size: 36rpx;
								color: #000;
								display: flex;
								justify-content: space-between;
								align-items: center;
								align-items: normal;
								white-space: normal;
								width: 97%;
							}
						}


					}

					&-btn {
						display: flex;
						font-size: 28rpx;
						color: #c89a73;
						justify-content: space-between;
						align-items: center;
						padding-top: 20rpx;
						// border-top: 1px solid #e9e9e9;

						cover-view {
							cover-image {
								display: inline-block;
								vertical-align: middle;
								margin-right: 10rpx;
							}
						}
					}
				}

				&-near {
					width: 90%;
					margin: 0 auto;
					text-align: right;

					cover-image {
						width: 243rpx;
						height: 142rpx;
						display: inline-block;
					}
				}
			}


			&-cover {
				display: flex;
				align-items: center;
				z-index: 9999;

				&-wrap {
					position: relative;
				}

				&-img {
					width: 70rpx;
					height: 70rpx;
					border-radius: 70rpx;
					border: 4rpx solid #dbd0ba;
				}

				&-lock {
					background: rgba(0, 0, 0, 0.5);
					position: absolute;
					top: 4rpx;
					left: 4rpx;
					text-align: center;
					width: 70rpx;
					height: 70rpx;
					border-radius: 70rpx;
					line-height: 70rpx;

				}

				&-lockimg {
					width: 26rpx;
					height: 34rpx;
					display: block;
					margin: 0 auto;
					margin-top: 18rpx;
				}

				&-label {
					cover-image {
						width: 270rpx;
						height: 65rpx;

					}

					font-size: 20rpx;
					color: #dbd0ba;
					display: flex;
					align-items: center;

					cover-view {
						padding: 10rpx 40rpx;
						width: 200rpx;
						white-space: normal;
						position: absolute;
					}
				}
			}
		}

		.tips {
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.7);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;

			&-wrap {
				&-close {
					color: #fff;
					width: 80rpx;
					height: 80rpx;
					border-radius: 80rpx;
					line-height: 70rpx;
					text-align: center;
					border: 1px solid #fff;
					position: absolute;
					top: 135rpx;
					left: 20rpx;
					font-size: 50rpx;
					z-index: 10;
				}

				&-img {
					position: relative;
					top: 0;
					width: 100%;

					u-image {
						&>view {
							margin: 0 auto;
						}
					}
				}

				&-tip {
					color: #333;
					font-size: 33rpx;
					margin: 0 auto;
					line-height: 2;
					height: 650rpx;
					overflow: scroll;
					position: absolute;
					top: 350rpx;
					left: 50%;
					transform: translate(-50%, 0%);
					width: 80%;

					view {
						p {
							text-indent: 2em;
						}
					}
				}
			}
		}
	}

	.fade-in {
		animation: fade-in .5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	}

	@keyframes fade-in {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.fade-out {
		animation: fade-out .4s ease-out both;
	}

	@keyframes fade-out {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
</style>