<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">
					<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" @regionchange="pushMarkers" show-location :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">
					<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" :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">
				<view class="tips-wrap-close" @click="showTips=false">
					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>

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

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	import {
		isNull,
		shareInfo,
		toast,
		getDistance,
		toMapAPP
	} from '@/common/util.js'

	export default {
		components: {
			tabbar
		},
		data() {
			return {
				navBarTop: 0,
				showTips: false,
				tips: '',
				theme_id: '',
				area: '区域',
				scale: 11,
				lat: null,
				lng: null,
				markers: [],
				pointers: [],
				done: 0,
				showPointer: false,
				pointer: null,
				listArea: [{
					id: '',
					value: '全部'
				}],
				showArea: false,
				tips: ''

			}
		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline(){
			return shareInfo
		},
		onReady() {
			uni.authorize({
				scope: 'scope.userLocation',
				success: (res) => {
					this.getUserLocation()
				}
			})
		},
		onLoad(option) {
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
			// this.getUserLocation()
			if (isNull(this.vuex_token)) {
				this.getToken()
			} else {
				this.getPointers()
			}
			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'):''
			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
				uni.removeStorageSync('vuex_pointer')
				
			}
		},
		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})
					},
					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 = 'https://vr.langye.net/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.getPointers()
				}
			},
			openPicker() {
				uni.hideKeyboard()
				this.showArea = true


			},
			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
						}
					})

				})
			},
			async getPointers() {
				this.pointers = []
				this.markers = []
				const res = await this.$u.api.getPoints({
					theme_id: this.theme_id,
				})
				this.pointers = res.points
				res.points.map((item,index) => {
					if(index<15){
						this.markers.push({
							id: item.id,
							latitude: parseFloat(item.lat),
							longitude: parseFloat(item.lng),
							iconPath: '/static/home-marker.png',
							truePath: item.image.url,
							width: 0,
							height: 0,
							title: item.name,
							has_answer: item.has_answer,
							item: item,
							customCallout: {
								display: 'ALWAYS'
							},
						})
					}
					
				})
			},
			pushMarkers(e){
				console.log("e",e)
				if(e && this.markers.length<this.pointers.length){
					this.pointers.map((item,index)=>{
						if(index>this.markers.length-1){
							this.markers.push({
								id: item.id,
								latitude: parseFloat(item.lat),
								longitude: parseFloat(item.lng),
								iconPath: '/static/home-marker.png',
								truePath: item.image.url,
								width: 0,
								height: 0,
								title: item.name,
								has_answer: item.has_answer,
								item: item,
								customCallout: {
									display: 'ALWAYS'
								},
							})
						}
					})
				}
			},
			async getNears() {

				const res = await this.$u.api.getNear({
					lat: this.lat,
					lng: this.lng,
				})
				if (res.list && res.list.length > 0) {
					this.pointers = []
					this.markers = []
					this.showPointer = false
				} else {
					toast('附近暂无红色站点')
					return
				}
				this.pointers = res.list
				res.list.map(item => {
					this.markers.push({
						id: item.id,
						latitude: parseFloat(item.lat),
						longitude: parseFloat(item.lng),
						iconPath: '/static/home-marker.png',
						truePath: item.image.url,
						width: 0,
						height: 0,
						title: item.name,
						has_answer: item.has_answer,
						item: item,
						customCallout: {
							display: 'ALWAYS'
						},
					})
				})
			},
			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: 2px 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: 800rpx;
					overflow: scroll;
					position: absolute;
					top: 220rpx;
					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>