<template>
    <Modal class="nx-select-position" title="选择位置" :value="true" :closable="false" :mask-closable="false" :width="760" @on-ok="onOK" @on-cancel="onCancel">
        <span class="nx-position-info">位置:{{position.lat}},{{position.lng}}</span>
        <div style="width:760px;height:400px">
            <l-map ref="map" :zoom="13">
                <l-tile-layer v-for="tileProvider in tileProviders" :key="tileProvider.name" :name="tileProvider.name" :visible="tileProvider.visible" :url="tileProvider.url" :attribution="tileProvider.attribution" layer-type="base" :options="options" />
                <l-marker ref="mm" :visible="true" :draggable="true" :lat-lng="position"></l-marker>
            </l-map>
        </div>
    </Modal>
</template>
<script>
// import { LMap, LTileLayer, LMarker, LPolyline, LLayerGroup, LTooltip, LPopup, LControlZoom, LControlAttribution, LControlScale, LControlLayers } from 'vue2-leaflet';
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
import "leaflet/dist/leaflet.css"

const tileProviders = [{
    name: '高德地图',
    visible: true,
    url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    attribution: '天恒众航'
}];


// eslint-disable-next-line
delete L.Icon.Default.prototype._getIconUrl;

// eslint-disable-next-line
L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

export default {
    name: 'SelectPositionMap',
    watch: {},
    computed: {},
    data() {
        return {
            position: {
                lat: 0,
                lng: 0
            },
            tileProviders: tileProviders,
            options: {
                subdomains: ["1", "2", "3", "4"]
            },
        }
    },
    components: {
        LMap,
        LTileLayer,
        LMarker,
        // LPolyline,
        // LLayerGroup,
        // LTooltip,
        // LPopup,
        // LControlZoom,
        // LControlAttribution,
        // LControlScale,
        // LControlLayers
    },
    methods: {
        onCancel() {
            this.remove();
        },
        onOK() {
            this.fnOK(this.position);
            this.remove();
        },
        remove() {
            setTimeout(() => {
                this.destroy();
            }, 300);
        },
        destroy() {
            this.$destroy();
            document.body.removeChild(this.$el);
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.position = Object.assign(this.position, { lat: this.lat, lng: this.lng });
            this.$refs.map.setCenter(this.position);
        });
    }
};
</script>
<style>
.nx-select-position .ivu-modal-body {
    padding: 0 !important;
}


.nx-position-info {
    position: absolute;
    top: 60px;
    left: 49px;
    font-size: 16px;
    z-index: 9999;
    font-weight: bold;
}
</style>