<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: 'wgs84',
                    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>