<template>
  <div>
    <md-dialog :md-active.sync="show" @close="show=false" style="z-index: 10">
      <l-map style="height: 450px; width: 700px; border-radius: 3px; border: 3px solid #f4722b" :zoom="zoom" :center="center">
        <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
        <l-marker v-for="srv in Object.values(this.$API.stats.servers_map).filter(server => server['player_count']>0)" :key="srv['name']" :lat-lng="srv['city_pos']">
          <l-icon class-name="icom-map">{{srv['name']}}</l-icon>
          <l-popup><p class="p-map" v-on:click="$refs.wwm_ssd.openFIF(srv)">{{srv['name']}}<br>{{human_name_impl(srv['player_count'], srv['naming'])}}<br>Подключиться</p></l-popup>
        </l-marker>
        <l-marker v-for="srv in Object.values(this.$API.stats.servers_map).filter(server => server['player_count'] === 0 && server['status'] === true)" :key="srv['name']" :lat-lng="srv['city_pos']">
          <l-icon class-name="icom-map"><div class="headline">{{srv['name']}}</div></l-icon>
          <l-popup><p class="p-map" v-on:click="$refs.wwm_ssd.openFIF(srv)">{{srv['name']}}<br>{{human_name_impl(srv['player_count'], srv['naming'])}}<br>Подключиться</p></l-popup>
        </l-marker>
        <l-marker v-for="srv in Object.values(this.$API.stats.servers_map).filter(server => server['status'] === false)" :key="srv['name']" :lat-lng="srv['city_pos']">
          <l-icon class-name="icom-map">{{srv['name']}}</l-icon>
          <l-popup><p class="p-map">{{srv['name']}}<br>{{human_name_impl(srv['player_count'], srv['naming'])}}</p></l-popup>
        </l-marker>
      </l-map>
      <md-button class="btn-default" v-on:click="showMe(false)">Закрыть</md-button>
      <ServerFullInfo :server-data="null" ref="wwm_ssd"/>
    </md-dialog>
  </div>
</template>

<script>
import { latLng } from "leaflet";
import { LMap, LTileLayer, LMarker, LPopup, LIcon} from "vue2-leaflet";
import ServerFullInfo from "@/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue";
export default {
  name: "WorldwideMap",
  components: {
    ServerFullInfo,
    LMap,
    LMarker,
    LTileLayer,
    LPopup,
    LIcon
  },
  data: () => ({
    show: false,
    url: 'https:///tile.openstreetmap.org/{z}/{x}/{y}.png',
    attribution:
        'хохлы',
    zoom: 3,
    center: [57.91, 64.21],
    markerLatLng: [51.504, -0.159]
  }),
  methods: {
    latLng,
    showMe(b) {
      this.show = b;
    },
    human_name_impl(p, n) {
      return `${p} ${this.$API.human_name_impl(p,n)}`;
    }
  }
}
</script>

<style>
.p-map {
  color: black;
  cursor: pointer;
}

.icom-map {
  border-radius: 5px;
  border: 0px solid black;
  background: #ffffff;
  text-align: center;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  font-family: tf2secondary;
}

.leaflet-control-attribution {
  display: none !important;
}
</style>