<template>
	<view class="page">
		<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
		<view class="listBox" :style="{'padding-top':(pageTop+'px')}">
		<view class="content">
		<!-- <view class="bg"><image src="../../static/img/1.png" mode="widthFix"></image></view> -->
		<view class="map-content" >
			<view v-if="false">
				<view class="map-list">
					<view class="map-list-title">区域</view>
					<view class="map-list-icon">
					<view class="map-icon-bg map-icon-bg-all active">全部</view>
					<view class="map-icon-bg">老城区</view>
					<view class="map-icon-bg">城南新区</view>
					<view class="map-icon-bg">城北新区</view>
					</view>
				</view>
				<view class="map-list">
					<view class="map-list-title">街道</view>
					<view class="map-list-icon">
					<view class="map-icon-bg-all active">全部</view>
					<view class="map-icon-bg">文林街道</view>
					<view class="map-icon-bg">普宁街道</view>
					<view class="map-icon-bg">怀仁街道</view>
					<view class="map-icon-more">展开<image src="../../static/down1.png"></image></view>
					</view>
				</view>
				<view class="map-list">
					<view class="map-list-title">镇</view>
					<view class="map-list-icon">
					<view class="map-icon-bg-all active">全部</view>
					<view class="map-icon-bg">文宫镇</view>
					<view class="map-icon-bg">禾加镇</view>
					<view class="map-icon-bg">龙马镇</view>
					<view class="map-icon-more">展开<image src="../../static/down1.png"></image></view>
					</view>
				</view>
				<view class="map-list">
					<view class="map-list-title">乡</view>
					<view class="map-list-icon">
					<view class="map-icon-bg-all active">全部</view>
					<view class="map-icon-bg">青岗乡</view>
					<view class="map-icon-bg">谢安乡</view>
					<view class="map-icon-bg">贵平乡</view>
					<view class="map-icon-more">展开<image src="../../static/down1.png"></image></view>
					</view>
				</view>
			</view>
			<view class="search">
					<view class="search-icon"><image src="../../static/search.png"></image><text>|</text></view>
			<!-- 		<view class="search-text">
						<text>单位信息</text><image src="../../static/down2.png"></image>
					</view> -->
					<view class="search-input"><input type="text" placeholder="请输入关键词查询" v-model="query.addressName" placeholder-class="inputtext" /></view>
					<view class="search-btn" @click="getlist"><image src="../../static/search1.png"></image></view>
			</view>
<!-- 			<view class="search">
				<view class="search-icon"><image src="../../static/search.png"></image><text>|</text></view>
				<view class="search-text">
					<text>单位信息</text><image src="../../static/down2.png"></image>
				</view>
				<view class="search-input"><input type="text" placeholder="请输入关键词查询" placeholder-class="inputtext" /></view>
				<view class="search-btn"><image src="../../static/search1.png"></image></view>
			</view> -->
		</view>
		<view class="map" style="width: 100%;height: 100%;">
			<map :min-scale="9"  id="customMap" :scale="15" :style="'width: 100%;'+ 'height:'+screenHeight"  :markers="markers" layer-style="1" subkey="PTOBZ-QDQEG-DK3QM-QMYWN-I5WDZ-CCB6S"
				:latitude="address.latitude" :longitude="address.longitude">
			</map>
		</view>
		<view class="bottom">
			<view class="bottom-two">
				<view class="bottom-two-list" @click="mapstakeline">
					<view class="bottom-two-list-img"><image src="../../static/map1.png"></image></view>
					<view class="bottom-two-list-text">界桩界线管护</view>
				</view>
				<view class="bottom-two-list" @click="mapdoorplate">
					<view class="bottom-two-list-img"><image src="../../static/map2.png"></image></view>
					<view class="bottom-two-list-text">路门牌上报</view>
				</view>
			</view>
			<view class="bottom-my" @click="maptask">
				<view class="bottom-my-img"><image src="../../static/map3.png"></image></view>
				<view class="bottom-my-text">我的任务</view>
			</view>
		</view>
		
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers:[],
				isshow1:false,
				address: {
					// 纬度
					latitude: 29.99599,
					// 经度
					longitude: 104.13412
				},
				screenHeight:'',
				list:[],
				query:{
					auditStatus: "通过",
					addressName:''
				},
				nvConfig:{
					title:"区域信息地图",
					bgColor:"#ffffff",
					color:"#000000",
					fixedAssist:{
						hide:true,
					},
					transparent:{
						initColor:"#000",
					},
				},
			}
		},
		onPageScroll(e) {this.$refs.nv.pageScroll(e)},
		computed:{
			pageTop(){return parseInt(88*uni.getSystemInfoSync().windowWidth/750) + uni.getSystemInfoSync().statusBarHeight}
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.screenHeight = res.safeArea.height + 'px'
				}
			})
			this.GetLocation()
			
		},
		methods:{
			// 添加门店标记
			addMarkers(list) {
				const positions = []
				list.forEach((item, index) => {
					let box = item.map.split(',')
					positions.push({
						latitude: box[1],
						longitude: box[0],
						title: item.addressName,
					})
				})
				const newMarkers = []
				positions.forEach((p, i) => {
					// console.log(i)
					newMarkers.push(
						Object.assign({}, {
							id: i + 1,
					
							joinCluster: false, // 指定了该参数才会参与聚合  
							label: {
								padding: 10,
								height: 30,
								borderRadius: 10,
								bgColor: '#0098ae',
								color:'#fff',
								content: `${p.title}`
							}
						}, p)
					)
				})
				this.markers = newMarkers
				console.log('标点', this.markers)
				const markers = newMarkers
				this._mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			},
			// 获取单位列表
			getlist(){
				this.API.getaddressApplication(this.query).then(res=>{
					console.log("地名列表",res);
					this.addMarkers(res.rows)
				})
			},
			//获取定位
			GetLocation () {
				let that = this
				// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				uni.getSetting({
					success (res) {
						console.log(res)
						// 如果没有授权
						if (!res.authSetting['scope.userLocation']) {
						// 则拉起授权窗口
							uni.authorize({
								scope: 'scope.userLocation',
								success () {
								//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									uni.getLocation({
										type: 'wgs84',
										success: function (e) {
											console.log('这是当前位置信息', e)
											that.address.latitude = e.latitude;
											that.address.longitude = e.longitude;
										}
									})
								},
								fail (error) {
									//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
									console.log('拒绝授权', error)
			
									uni.showModal({
										title: '提示',
										content: '若点击不授权，将无法使用位置功能',
										cancelText: '不授权',
										cancelColor: '#999',
										confirmText: '授权',
										confirmColor: '#f94218',
										success (res) {
											console.log(res)
											if (res.confirm) {
												// 选择弹框内授权
												uni.openSetting({
													success (res) {
														console.log(res.authSetting,'12121')
														uni.getLocation({
															type: 'wgs84',
															success: function (e) {
																console.log('777', error)
																that.address.latitude = e.latitude;
																that.address.longitude = e.longitude;
															}, 
															fail (error) {
																console.log('失败', error)
															}
														})
													}
												})
											} else if (res.cancel) {
												console.log('用户点击不授权')
											}
										}
									})
								}
							})
						} else {
							uni.getLocation({
								type: 'wgs84',
								success: function (e) {
									console.log('这是当前位置信息', e)
									that.address.latitude = e.latitude;
									that.address.longitude = e.longitude;
								}, 
								fail (error) {
									console.log('失败', error)
								}
							})
						}
					},
					complete(re) {
						console.log('获取数据', re)
						that.getlist()
					}
				})
			},
			mapstakeline() {
				uni.navigateTo({
					url: '/pages/mapstakeline/mapstakeline'
				})
			},
			maptask() {
				uni.navigateTo({
					url: '/pages/maptask/maptask'
				})
			},
			mapdoorplate() {
				uni.navigateTo({
					url: '/pages/mapdoorplate/mapdoorplate'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'map.scss';
</style>
