<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { onMounted, ref } from "vue";
import { nextTick } from "vue";

const leafletmapContainer = ref(null);
const selectedFactory = ref("");
let map = null;
let markerRefs = [];

const customOptions = {
  minWidth: 250,
};

const markers = [
  {
    position: [31.29834, 120.58319],
    popup: {
      title: "CCT瀚荃蘇州廠",
      img: "https://picsum.photos/id/700/600/400",
      deviceNumber: 10,
      online: 8,
      offline: 2,
    },
  },
  {
    position: [29.56301, 106.55156],
    popup: {
      title: "CCT瀚荃重慶廠",
      img: "https://picsum.photos/id/701/600/400",
      deviceNumber: 20,
      online: 15,
      offline: 5,
    },
  },
  {
    position: [23.02067, 113.75179],
    popup: {
      title: "CCT瀚荃東莞廠",
      img: "https://picsum.photos/id/702/600/400",
      deviceNumber: 30,
      online: 25,
      offline: 5,
    },
  },
  {
    position: [25.16742, 121.44587],
    popup: {
      title: "CCT瀚荃淡水廠",
      img: "https://picsum.photos/id/703/600/400",
      deviceNumber: 46,
      online: 25,
      offline: 21,
    },
  },
];


onMounted(() => {
  map = L.map(leafletmapContainer.value, {
    center: [31.35, 113.4],
    zoom: 5,
  });

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(map);

  markerRefs = markers.map(({ position, popup }) => {
    const marker = L.marker(position)
      .bindPopup(
        `
        <div class="font-bold text-lg mb-2">${popup.title}</div>
        <img src="${popup.img}" class="w-full rounded mb-2" />
        <div class="flex justify-between text-base mt-2">
          <div class="text-center">
            設備總數<br><span class="text-white text-2xl">${popup.deviceNumber}</span>
          </div>
          <div class="text-center">
            在線設備<br><span class="text-green-500 text-2xl">${popup.online}</span>
          </div>
          <div class="text-center">
            離線設備<br><span class="text-red-600 text-2xl">${popup.offline}</span>
          </div>
        </div>
    `,
        customOptions
      )
      .addTo(map);
    return marker;
  });
});

function focusFactory(idx) {
  if (!map || !markerRefs[idx]) return;
  const pos = markers[idx].position;
  map.flyTo(pos, 6, { animate: true });
  markerRefs[idx].openPopup();
}
</script>
<template>
  <div class="relative w-full h-full">
    <div class="absolute top-4 right-4 z-20 flex items-center gap-2">
      <select
        id="factory-select"
        v-model="selectedFactory"
        class="select select-sm bg-cyan-950 rounded-md border-info  focus-within:border-info"
        @change="focusFactory(selectedFactory)"
      >
        <option value="" disabled>下屬共計 5 家子企業</option>
        <option v-for="(m, idx) in markers" :key="idx" :value="idx">
          {{ m.popup.title }}
        </option>
      </select>
    </div>
    <div class="leafletmapContainer z-10" ref="leafletmapContainer"></div>
  </div>
</template>
<style lang="scss">
.leafletmapContainer {
  width: 100%;
  height: 100%;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #164e63 !important; // 你要的顏色
  color: #ffffff;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.leaflet-container a.leaflet-popup-close-button{
    color: #fff;
    font-size: 1rem;
    padding-top: 0.4rem;
}
</style>