<template>
    <div class="map">
        <baidu-map class="bm" ref="map" :center="center" :zoom="zoom" @ready="handler"  @click="locationManage">
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :offset="offset" :showAddressBar="true" :autoLocation="true" key=""
             @locationSuccess="locationSuccess" @locationError="locationError"></bm-geolocation>
            <bm-marker :position="center"></bm-marker>
        </baidu-map>
        <div class="back" @click="back">
            <van-icon name="arrow-left" size="20" color="#FFFFFF" />
        </div>
        <div class="res">
            <div class="add">
                <div>{{name}}</div>
                <div>{{address}}</div>
            </div>
            <div class="btn">
                <van-button size="normal" class="btn-round" type="info" @click="confirmPlace">确定</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import Bus from '@/bus'

export default {
    data () {
        return {
            map: null,
            center: {
                lng: 0, 
                lat: 0
            },
            zoom: 12,
            offset: null,
            address: null,
            name: null,
            loading: false,
            point: null,
            addressComponents: null
        }
    },
    methods: {
        handler ({BMap, map}) {
            this.map = map
            this.center.lng = 116.404
            this.center.lat = 39.915
            this.zoom = 15
            this.offset = new window.BMap.Size(10, 80)
            this.locationPosition()
        },
        locationManage({type, target, point, pixel, overlay}){
            const map = this.map
            const vm = this;
            console.log(type, target, point, pixel, overlay)
                     vm.center=point;
         map.panTo(vm.center);
               vm.geoPoint(vm.center);
        },
        locationSuccess(data) {
            if (data) {
                this.geoPoint(data.point)
            }
        },
        locationError(err) {
            if (err) {
                this.$toast.fail('定位失败，请检查是否开启定位功能')
            }
        },
        geoPoint(point) {
            const myGeo = new window.BMap.Geocoder()
            const vm = this
            myGeo.getLocation(new window.BMap.Point(point.lng, point.lat), function(res) {
                console.log('loc: ', res)
                if (res) {
                    vm.address = res.address
                    vm.name = res.business
                    vm.point = point,
                    vm.addressComponents = res.addressComponents
                }
            })
        },
        locationPosition2(){
		   const map = this.map, vm = this;
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition((position)=>{
                console.log('position2',position)
                vm.center={
                    lat:position.latitude,
                    lng:position.longitude
                }
                map.panTo(vm.center);
                vm.geoPoint(vm.center);            
            },{enableHighAccuracy: true})
        },
        locationPosition() {
            const geolocation = new window.BMap.Geolocation({
                maximumAge: 10  // 清除缓存
            });
            geolocation.enableSDKLocation();
            const map = this.map, vm = this;
            geolocation.getCurrentPosition(function(res){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(res.point);
                    map.addOverlay(mk);
                    map.panTo(res.point);
                    vm.geoPoint(res.point);
                }
                else {
                    vm.$toast.fail(`定位失败[${this.getStatus()}]`);
                }
            })
        },
        confirmPlace() {
            if (this.address && this.point) {
                Bus.$emit('changePosition', {
                    address: this.address,
                    point: this.point,
                    addressComponents: this.addressComponents
                })
                this.back()
            }
            else {
                this.$toast.fail('定位失败，请检查是否开启定位功能')
            }
        },
        back() {
            this.$router.back()
        }
    }
}
</script>

<style lang="scss" scoped>
.map {
    width: 100%;
    height: 100vh;
    position: relative;
    .bm {
        width: 100%;
        height: 100%;
    }
    .back {
        position: absolute;
        top: 30px;
        left: 8px;
        width: 40px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($color: #000000, $alpha: 0.4);
    }
    .res {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #FFFFFF;
        padding: 10px;
        .add {
            flex: 1;
            div:first-child {
                font-size: 16px;
                color: #343434;
            }
            div:last-child {
                font-size: 13px;
                color: #888888;
            }
        }
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            .btn-round {
                border-radius: 8px;
            }
        }
    }
}
</style>