<template>
	<view class="page">
		<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
<!-- 		<view class="coupon-tab" :style="{'padding-top':(pageTop+'px')}">
			<view class="tab" :class="{'action':TabShow===0}" @click="onCouponTab(0)">
				<text>全部</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':TabShow===1}" @click="onCouponTab(1)">
				<text>正常</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':TabShow===2}" @click="onCouponTab(2)">
				<text>需维护</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':TabShow===3}" @click="onCouponTab(3)">
				<text></text>
				<text class="line"></text>
			</view>
		</view> -->
		<!-- <view class="listBox" :style="{'padding-top':(pageTop+'px')}"> -->
		<view class="content">
		<!-- 列表 -->
		<view class="user-list">
			<view class="topimg">
				<map style="width: 100%;" :min-scale="9"  id="customMap" :scale="15"   :markers="markers" layer-style="1" subkey="PTOBZ-QDQEG-DK3QM-QMYWN-I5WDZ-CCB6S"
					:latitude="address.latitude" :longitude="address.longitude">
				</map>
			</view>
			<view class="list" @click="mapstakelinedetail(item)" v-for="(item,index) in list" :key="index">
				<view class="title">
					<view>{{item.markerNumber}}【{{item.markerType}}】</view>
					<text>位置：{{item.location}}</text>
				</view>
		<!-- 		<view class="more-content">
					<view class="more-content-img"><text class="more-content-text">正常</text><image src="../../static/right.png"></image></view>
				</view> -->
			</view>
		</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers:[],
				address: {
					// 纬度
					latitude: 29.99599,
					// 经度
					longitude: 104.13412
				},
				TabShow: 0,
				nvConfig:{
					title:"界桩界线管护",
					bgColor:"#ffffff",
					color:"#000000",
					fixedAssist:{
						hide:true,
					},
				},
				list:[],
				pages:{
					pageNum:1,
					pageSize:10
				}
			}
		},
		onPageScroll(e) {this.$refs.nv.pageScroll(e)},
		computed:{
			pageTop(){return parseInt(88*uni.getSystemInfoSync().windowWidth/750) + uni.getSystemInfoSync().statusBarHeight}
		},
		onLoad() {
			this.getlist();
		},
		methods:{
			addMarkers(list) {
				const positions = []
				list.forEach((item, index) => {
				
					positions.push({
						latitude: item.latitude,
						longitude:item.longitude,
						title: item.markerNumber,
					})
				})
				const newMarkers = []
				positions.forEach((p, i) => {
					// console.log(i)
					newMarkers.push(
						Object.assign({}, {
							id: i,
					
							joinCluster: false, // 指定了该参数才会参与聚合  
							label: {
								padding: 10,
								height: 30,
								borderRadius: 10,
								bgColor: '#0098ae',
								color:'#fff',
								content: `${p.title}`
							}
						}, p)
					)
				})
				this.markers = newMarkers
				const markers = newMarkers
				this._mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			},
			// 获取我的任务的列表
			getlist(){
				this.API.getplie(this.pages).then(res=>{
					console.log("界桩",res);
					this.list = res.rows
					this.addMarkers(this.list)
				})
			},
			onCouponTab(type){
				this.TabShow = type;
			},
			mapstakelinedetail(e) {
				uni.navigateTo({
					url: '/pages/mapstakelinedetail/mapstakelinedetail?cent='+JSON.stringify(e)
				})
			},
		}
	}
</script>

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