<script>
import L from 'leaflet';

import 'leaflet/dist/leaflet.css';
import { LMap, LTileLayer, LMarker,LPopup } from 'vue2-leaflet';
export default {
  name: "Map",
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LPopup
  },
  props: {
    devices:{
      type: Array,
      required: false,
    },
    tools:{
      type: Array,
      required: false,
    },
    center:{
      type: Array,
      required: true
    }
  },
  data(){
    return {
      zoom: 17,
      // url: '/osm/{z}/{x}/{y}.png',
      // url: 'http://111.9.31.174:10004/osm/{z}/{x}/{y}.png',
      url: 'http://192.168.10.141:80/osm/{z}/{x}/{y}.png',
      // center: [30.179807299212037, 104.5828285200382],
      attribution: '&copy; 唐山百川智能机器股份有限公司',
      markerLatLng: '',
      options: {
        dragging: true
      },
      bounds: new L.LatLngBounds(
        L.latLng(30.17596, 104.57733),  // 西南角
        L.latLng(30.184689, 104.588063)    // 东北角
      ),
      deviceIcon: new L.Icon({
        iconUrl: '/images/device.png',
        iconRetinaUrl: '/images/device2x.png',
        iconSize: [16, 16], // Default size
        iconAnchor: [8, 8],
        popupAnchor: [0, -8],
      }),
      toolIcon: new L.Icon({
        iconUrl: '/images/tool.png',
        iconRetinaUrl: '/images/tool2x.png',
        iconSize: [16, 16], // Default size
        iconAnchor: [8, 8],
        popupAnchor: [0, -8],
      })
    }
  },
  methods: {

  }
}
</script>

<template>
  <l-map class="map-attribution" style="height: 890px" :max-bounds="bounds" :zoom="zoom" :center="center" :min-zoom="17" :max-zoom="18" :use-global-leaflet="false" :options="options" :attributionControl="false">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker v-for="device in devices" v-if="device.latlng" :lat-lng="device.latlng" :key="device.id" :icon="deviceIcon" :title="device.name">
      <l-popup>
        <div>
          {{device.name}}
        </div>
      </l-popup>
    </l-marker>
    <l-marker v-for="tool in tools" v-if="tool.latlng" :lat-lng="tool.latlng" :key="tool.id" :icon="toolIcon">
      <l-popup>
        <div>
          {{tool.name}}
        </div>
      </l-popup>
    </l-marker>
  </l-map>
</template>

<style scoped>
.map-attribution{
  /deep/ .leaflet-control-attribution  a{
  display: none;
}
  /deep/ .leaflet-control-attribution  span{
    display: none;
  }
}
</style>