<template>
	<view class="bodys">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="head">
			<map id='midMap' ref='midMap' :latitude="latitude" :markers="markList" :longitude="longitude" @tap="changeMap" scale="10">
			</map>
			<view class="search">
				<view class="head_border">
				</view>
				<view class="controlss">
					<view class="controlss-back">
						<image src="../../static/img/left.svg" @click="backView" mode=""></image>
					</view>
					<view class="controlss-input" @click="goSearch">
						<input type="text" placeholder="搜索工作的地点" disabled="true" />
						<image src="../../static/img/search.svg" style="margin-left: auto;" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="controlsPop">
			<view class="listTitle">
				附近零工岗位
			</view>
			<view class="borderbom"></view>
			<scroll-view scroll-y lower-threshold="0" style="height: 92%;" @scrolltolower="upLoad" v-if="companyList.length>0">
				<block v-for="(item, index) in companyList" :key="item.id">
					<companyList :companyitem="item" :near="true"></companyList>
					<view class="baddd"></view>
				</block>
			</scroll-view>
			<view class="nothingArea" v-else>
				<image src="../../static/img/pic_notask.svg" mode="" class="nothing"></image>
				<view class="nothingContnt">
					暂无岗位信息
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import companyList from '@/components/companyList/companyList.vue';
	import testData from '@/common/textdata.js';
	import {
		nearMission
	} from '@/api/mission.js';
	import {
		getcoder,
		querySearch
	} from "@/api/map.js";

	export default {
		components: {
			companyList
		},
		data() {
			return {
				longitude: 116.40,
				latitude: 39.90,
				// key: 'FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI',
				key: 'MTCBZ-WAAWC-H3M22-AL6XI-G4XN6-YZFK5',
				currentPoint: {},
				companyList: [],
				markList: [],
				inpoints: [],
				inputValue: '',
				searchResult: false,
				searchResultList: [],
				page: {
					current: 1,
					size: 10,
					total: 0
				},
				mapCtx: null,
				type: ""
			};
		},
		onLoad: function(option) {
			if (option.item) {
				const item = JSON.parse(decodeURIComponent(option.item));
				var point = {
					target: {
						latitude: item.lat,
						longitude: item.lng
					}
				};
				this.currentPoint = point;
				this.type = 'search';
			}
		},
		onShow: function() {
			if (this.type === 'search') {
				this.changeMap(this.currentPoint);
			} else {
				this.getLocation();
			}
			// that.inputValue='';
			//发起定位授权弹窗
			// uni.authorize({
			// 	scope: 'scope.userLocation',
			// 	success() {
			// 		that.getLocation()
			// 	},
			// 	fail() {
			// 		uni.showModal({
			// 		    title: '提示',
			// 		    content: '获取您的位置，以便为您推荐合适工作信息',
			// 		    success: function (res) {
			// 		        if (res.confirm) {
			// 		           that.getLocation();
			// 		        } else if (res.cancel) {
			// 					//默认位置
			// 					var point = {
			// 						target:{
			// 							latitude:that.latitude,
			// 							longitude:that.longitude
			// 						}
			// 					};
			// 					that.currentPoint = point;
			// 		            that.changeMap(point);
			// 		        }
			// 		    }
			// 		});
			// 	}
			// });
			// that.getLocation();
		},
		methods: {
			/*定位*/
			getLocation: function() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						//初始化当前点
						var point = {
							target: {
								latitude: res.latitude,
								longitude: res.longitude
							}
						};
						that.currentPoint = point;
						// that.latitude = res.latitude;
						// that.longitude = res.longitude;
						//设置当前点 并逆地址解析和获取任务
						that.changeMap(point);
					},
					fail: function() {
						//默认位置
						var point = {
							target: {
								latitude: that.latitude,
								longitude: that.longitude
							}
						};
						that.currentPoint = point;
						that.changeMap(point);
					},
					complete: function(e) {}
				});
			},
			/*设置当前点 并逆地址解析和获取任务*/
			changeMap: function(e) {
				this.page.current = 1;
				if (e) {
					var point = {
						target: {
							latitude: e.target.latitude,
							longitude: e.target.longitude
						}
					};
					this.currentPoint = point;
					this.latitude = e.target.latitude;
					this.longitude = e.target.longitude;
					this.markList = [];
					this.getAddrByPoint(e.target);
					this.getData(e.target);
				}
			},
			/*逆地址解析*/
			getAddrByPoint: function(point) {
				var that = this;
				var location = point.latitude + ',' + point.longitude
				that.setCurrentMarker(point); //设置当前marker
				getcoder(location, encodeURI(that.key), 0).then(res => {
					var address = res.data.result.address_component.city + res.data.result.formatted_addresses.recommend;
					this.markList.forEach(ele => { //给当前marker添加label
						if (ele.id === 0) {
							ele.title = address;
							ele['callout'] = {
								content: address,
								color: '#000000',
								fontSize: 12,
								borderRadius: 2,
								borderWidth: 0,
								borderColor: '#ffffff',
								bgColor: '#ffffff',
								padding: '5',
								display: 'ALWAYS',
								textAlign: 'center'
							}
						}
					})
				});
			},
			/*设置当前定位点marker*/
			setCurrentMarker: function(point) {
				this.markList.push({
					id: 0,
					latitude: point.latitude,
					longitude: point.longitude,
					title: '',
					zIndex: 2,
					iconPath: '/static/img/location.png',
					// width: 20,
					// height: 20
				})
			},
			/*设置任务点*/
			setmarkers: function() {
				// 设置任务点
				var inpoints = [];
				inpoints.push({
					latitude: this.currentPoint.target.latitude,
					longitude: this.currentPoint.target.longitude
				})
				if (this.companyList.length) {
					for (var i = 0; i < this.companyList.length && i < 10; i++) {
						inpoints.push({
							latitude: this.companyList[i].lat,
							longitude: this.companyList[i].lon
						})
						this.markList.push({
							id: i + 1,
							latitude: this.companyList[i].lat,
							longitude: this.companyList[i].lon,
							zIndex: 1,
							iconPath: '/static/img/point.png',
							// width: 30,
							// height: 30
						})
					}
				}
				this.inpoints = inpoints;
			},
			goSearch() {
				uni.navigateTo({
					url: '../seach/placeSearch'
				});
			},
			// search:function(){
			// 	if(this.inputValue){
			// 		this.querySearch(this.inputValue)
			// 	}else{
			// 		return
			// 	}
			// },
			// //关键词输入提示
			// querySearch:function(queryString) {
			// 	querySearch(queryString, encodeURI(this.key)).then(res => {
			// 		if (res.data.status === 0) {
			// 		  this.searchResultList = res.data.data;
			// 		  if(this.searchResultList.length){
			// 		  	this.searchResultList.forEach((item, index) => {
			// 		  		item.title = this.getInf(item.title, this.inputValue);
			// 		  	});
			// 		  }
			// 		}
			// 	});
			// },
			// // 8-2、选择地址
			// handleSelect:function(item) {
			// 	this.page.current=1;
			// 	this.searchResult=false;
			// 	this.inputValue='';
			// 	this.searchResultList = [];
			// 	var point = {
			// 		target:{
			// 			latitude:item.location.lat,
			// 			longitude:item.location.lng
			// 		}
			// 	};
			// 	this.currentPoint = point;
			// 	this.changeMap(point);
			// },
			// //高亮
			// getInf(str, key) {
			// 	if (str && key) {
			// 		let replaceReg = new RegExp(key, 'g')// 匹配关键字正则
			// 		let replaceString = "<span style='color: #1b66ff;'>" + key + "</span>" // 高亮替换
			// 		return str.replace(replaceReg, replaceString);
			// 	}
			// },
			// cancel:function(){
			// 	this.inputValue = '';
			// 	this.searchResult = false;
			// },
			getData: function(obj) {
				nearMission(this.page.current, this.page.size, obj.latitude, obj.longitude, 50).then(res => {
					if (this.page.current === 1) {
						this.companyList = [];
					}
					this.page.current += 1;
					this.page.total = res.data.data.total;
					if (res.data.data && res.data.data.records.length) {
						this.companyList = this.companyList.concat(res.data.data.records);
					}
					//非上拉加载 即设置任务点
					if (obj !== 'upload') {
						this.setmarkers();
					}
				})
			},
			//上拉加载
			upLoad: function() {
				if (this.page.current <= Math.ceil(this.page.total / this.page.size)) {
					this.getData('upload');
				} else {
					uni.showToast({
						icon: "none",
						title: '已经是最后一页',
					})
					return
				}
			},
			backView: function() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.locationimg {
		width: 40rpx;
		height: 40rpx;
		position: fixed;
		left: 355rpx;
		top: 250rpx;
	}

	.baddd {
		background: #f6f6f6;
		height: 20rpx;
	}

	.head_border {
		width: 60rpx;
		height: 8rpx;
		border-radius: 30rpx;
		margin: 0 auto;
		background-color: #ddd;
		margin-bottom: 10rpx;
	}

	.head {
		font-family: PingFangSC-Medium;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
		height: 50%;
		position: relative;
		/* 	border-bottom: 20rpx solid #f6f6f6; */
	}

	map {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.head .search {
		position: absolute;
		top: 10rpx;
		left: 0;
		right: 0;
	}

	.head .search .controlss {
		display: flex;
		justify-content: center;
		flex-direction: row;
		margin: 0rpx 20rpx;
	}

	.head .search .controlss .controlss-back {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		padding: 5rpx;
		background-color: #ffffff;
	}

	.head .search .controlss .controlss-input {
		flex: 1;
		padding: 10rpx 30rpx;
		background-color: #ffffff;
		border-radius: 200rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.head .search .controlss input {
		text-align: left;
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
		font-weight: normal;
	}

	.head .search .controlss image {
		width: 40rpx;
		height: 40rpx;
	}

	.controlsPop {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 50%;
		background-color: #fefefe;
		display: flex;
		flex-direction: column;
	}

	.controlsPop .listTitle {
		padding: 10rpx 20rpx;
		font-size: 24rpx;
	}

	.controlsPop .nothingArea {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.controlsPop .nothingContnt {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #333333;
		margin-top: 30rpx;
		text-align: center;
	}

	.controlsPop .nothing {
		width: 400rpx;
		height: 200rpx;
		display: block;
		margin: 0 auto;
	}

	/* 
.searchPage .headSearch .search-view {
	border-bottom: 1rpx solid #dddddd;
	padding: 10rpx 30rpx;
	background: rgba(255, 255, 255, 1);
	position: relative;
}
.searchPage .headSearch .close{
	position: absolute;
	right: 24rpx;
	top: 0;
	height: 60rpx;
	padding: 5rpx 0;
	line-height: 60rpx;
	font-family: PingFangSC-Regular;
	font-size: 32rpx;
	color: #333333;
}
.searchPage .headSearch .search-item{
	display: flex;
	width: 80%;
	padding: 0 24rpx;
	height: 60rpx;
	line-height: 60rpx;
	background: rgba(249, 249, 249, 1);
	border-radius: 200px;
	align-items: center;
}
.searchPage .headSearch .search-item input {
	padding: 0 24rpx;
	height: 80rpx;
	font-weight: 400;
	flex: 1;
	text-align: start;
	font-size: 28rpx;
	font-family: PingFang-SC-Bold, PingFang-SC;
	color: rgba(51, 51, 51, 1);
}
.searchPage .headSearch .search-item .placeholderClass {
	color: #CCCCCC; 
}
.searchPage .headSearch .search-item image {
	height: 32rpx;
	width: 32rpx;
}

.searchPage .scroll-view{
	flex:1;
	position: fixed;
	bottom: 0;
	left: 0;
	top:80rpx;
}

.searchPage .search-result {
	background-color: #fff;
}
.searchPage .search-result li{
	font-weight: normal;
	text-align: left;
	border-bottom:1rpx solid #f2f2f2;
	padding: 28rpx 30rpx;
	list-style:none;
}
.searchPage .search-result li .title{
	font-size:32rpx;
} */

	.highlight {
		color: #1b66ff;
	}

	.searchPage .search-result li .address {
		font-size: 24rpx;
		color: #999999
	}

	.borderbom {
		width: 100%;
		height: 1rpx;
		border-bottom: 1rpx solid #f2f2f2;
	}

	page {
		width: 100%;
		height: 100%;
	}

	.bodys {
		width: 100%;
		height: 100%;
		position: relative;
	}
</style>
