<script setup>
import {ref, watch, nextTick, onBeforeUnmount, computed} from 'vue';
import {useMapPrintStore} from '@/stores/MapPrint';

const printStore = useMapPrintStore();
const filteredPoints = ref([]);
let mapInstance = null;

function handleBeforePrint() {
  document.title = `Атлас_${districtName.value}.pdf`;
  if (mapInstance && typeof mapInstance.container.fitToViewport === 'function') {
    mapInstance.container.fitToViewport();
  }
}

async function initPrint() {
  await nextTick();
  const mapContainer = document.getElementById('map');
  if (!mapContainer) return;

  // Получаем и фильтруем точки
  const raw = Array.isArray(printStore.points) ? printStore.points.map(p => p.point || p) : [];
  filteredPoints.value = raw
      .filter(p => p.latitude && p.longitude)
      .sort((a, b) => {
        const aNum = Number(a.record_number) || 0;
        const bNum = Number(b.record_number) || 0;
        return aNum - bNum;
      });
  if (!filteredPoints.value.length) return;

  await ymaps.ready();
  await nextTick();

  // Сброс старой карты
  if (mapInstance) {
    mapInstance.destroy();
    mapContainer.innerHTML = '';
  }

  // Инициализация карты
  const [lat, lon] = [
    filteredPoints.value[0].latitude,
    filteredPoints.value[0].longitude
  ];
  mapInstance = new ymaps.Map('map', {center: [lat, lon], zoom: 8, controls: ['zoomControl']});
  mapInstance.behaviors.disable(['default']);

  const groups = new Map();          // key → массив точек
  filteredPoints.value.forEach(p => {
    const key = p.latitude + ',' + p.longitude;
    (groups.get(key) ?? groups.set(key, []).get(key)).push(p);
  });

  const proj = mapInstance.options.get('projection');
  const zoom = mapInstance.getZoom();
  const R   = 18;                    // радиус «расхождения» в px

  groups.forEach(list => list.forEach((p, idx) => {
    const base = [+p.latitude, +p.longitude];

    let coords = base;               // куда реально поставим точку
    let iconOffset;                  // или только сместим иконку

    if (list.length > 1) {
      // угол для текущей точки
      const angle = 2 * Math.PI * idx / list.length;
      // Пиксельные координаты исходной точки
      const px = proj.toGlobalPixels(base, zoom);
      // Смещаем на R px по кругу
      const shiftedPx = [px[0] + R * Math.cos(angle),
        px[1] + R * Math.sin(angle)];
      coords = proj.fromGlobalPixels(shiftedPx, zoom);
      // вместо изменения coords можно оставить coords=base,
      // а задать iconOffset: [R * cos, R * sin] – опция `iconOffset`
    }

    mapInstance.geoObjects.add(new ymaps.Placemark(
        coords,
        { iconContent: p.record_number, balloonContent: p.name },
        {
          preset: 'islands#blueStretchyIcon',
          iconLabelMaxWidth: 40,
          ...(iconOffset ? { iconOffset } : {})
        }
    ));
  }));

  const bounds = mapInstance.geoObjects.getBounds();
  mapInstance.setBounds(bounds, {
    checkZoomRange: false,
    useMapMargin: false,
    zoomMargin: [10, 10]
  });

  // Добавляем метки и линии
  filteredPoints.value.forEach(point => {
    if (point.geojson) {
      const geojson = typeof point.geojson === 'string' ? JSON.parse(point.geojson) : point.geojson;
      geojson.features?.forEach(f => {
        if (f.geometry?.type === 'LineString') {
          const poly = new ymaps.Polyline(f.geometry.coordinates, {}, {
            strokeColor: '#FF0000',
            strokeWidth: 2,
            strokeOpacity: 1
          });
          mapInstance.geoObjects.add(poly);
        }
      });
    }
  });
  mapInstance.container.fitToViewport();
  window.addEventListener('beforeprint', handleBeforePrint);
  setTimeout(() => window.print(), 500);
}

const districtName = computed(() => {
  return filteredPoints.value.length
      ? filteredPoints.value[0].district?.name
      : 'Оренбургской области';
});

watch(
    () => printStore.points,
    () => {
      initPrint();
    },
    {immediate: true}
);

onBeforeUnmount(() => {
  window.removeEventListener('beforeprint', handleBeforePrint);
  if (mapInstance) mapInstance.destroy();
});
</script>

<template>
  <div id="print-area">
    <div class="header-row">
      <div class="agree-block">
        <strong>Согласовано</strong>
        <div>Представитель</div>
        <div>ГУ ГУДХОО</div>
        <div>Подпись:______________________________________</div>
        <div>______________________________________________</div>
        <div>Дата: ________________________________________</div>
      </div>
      <div class="agree-block">
        <strong>Согласовано</strong>
        <div>Представитель</div>
        <div>АО "Оренбургремдорстрой"</div>
        <div>Подпись:______________________________________</div>
        <div>______________________________________________</div>
        <div>Дата: ________________________________________</div>
      </div>
      <div class="approve-block">
        <strong>Утверждаю</strong>
        <div>Генеральный директор</div>
        <div>ООО "ИТБ"</div>
        <div>Подпись:______________________________________</div>
        <div>Иванов Дмитрий Александрович</div>
        <div>Дата: ________________________________________</div>
      </div>
    </div>
    <h2 class="print-heading">Дорожная карта {{ districtName }}</h2>
    <div class="print-container">
      <div class="map-section">
        <div id="map"></div>
      </div>
      <div class="table-section">
        <table class="points-table">
          <thead>
          <tr>
            <th>Номер ПУИДД</th>
            <th>Наименование а/д</th>
            <th>Протяженность</th>
            <th>Пункт учёта</th>
            <th>Категория</th>
            <th>Координаты</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="point in filteredPoints" :key="point.id">
            <td>{{
                `${point.record_number ?? '-'}`
              }}
            </td>
            <td>{{ point.name }}</td>
            <td>{{ point.length ? Number(point.length).toFixed(2) : '-' }}</td>
            <td>{{ point.accounting_point ?? '-' }}</td>
            <td>
              <template v-if="Array.isArray(point.road_category)">
                <span v-for="cat in point.road_category" :key="cat">{{ cat }}</span>
              </template>
              <span v-else>{{ point.road_category ?? '-' }}</span>
            </td>
            <td>{{ point.latitude }}, {{ point.longitude }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style>
/* ----------------------------------
   Общие стили (экран + печать)
---------------------------------- */
#print-area {
  padding: 20px;

  box-sizing: border-box;
}

/* шапка с подписями */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
/* небольшой отступ между блоками "Согласовано" */
.agree-block + .agree-block {
  margin-left: 20px;
}

/* контейнер: карта + таблица рядом */
.print-container {
  border-color: #721c24;
  display: flex;
  gap: 10px;
  width: 100%;

  /* высоту не жёстко задаём, пусть подстраивается */
}
/* экранная карта: 40% ширины, фиксированная высота */
.map-section {
  flex: 0 0 90%;

  height: 1800px;
}
#map {
  width: 100%;
  height: 100%;
}
/* таблица справа: 60% ширины, скролл при необходимости */
.table-section {
  flex: 0 0 10%;
  overflow: auto;
}

/* таблица */
.points-table {
  width: 100% !important;
  border-collapse: collapse; /* убрать двойные границы */
  table-layout: auto;        /* авто-ширины колонок */
  font-size: 8px;            /* мелкий шрифт на экране */
}
.points-table th,
.points-table td {
  border: 1px solid #333;
  padding: 1px 4px;
  word-wrap: break-word;
  white-space: normal;
}
/* задаём %-ширины ключевым столбцам, чтобы не поехало */
.points-table th:nth-child(1),
.points-table td:nth-child(1) { width:  8%; } /* номер ПУИДД */
.points-table th:nth-child(2),
.points-table td:nth-child(2) { width: 50%; } /* наименование */




/* ----------------------------------
   Стили только для печати
---------------------------------- */
@page {
  size: A3 landscape;
  margin: 10mm;
}

@media print {
  /* скрыть всё, кроме нашего блока */
  html { zoom: 50%; }
  body * {
    visibility: hidden;
  }
  #print-area,
  #print-area * {
    visibility: visible;
  }
  /* развернуть print-area на весь лист */
  #print-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10mm;
    box-sizing: border-box;
  }
  /* контейнер карта+таблица */
  .print-container {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
  }
  /* карта: займёт 35% ширины, высота 120 мм */
  .map-section {
    flex: 0 0 55%;
    width: 4000px;
  }
  #map {
    width: 100% !important;
    height: 100% !important;
  }
  .table-section {
    flex: 0 0 45%;
    overflow: visible !important;

  }
  .points-table {
    width: 100% !important;
    table-layout: auto !important;
  }

  .points-table th,
  .points-table td {
    border: 1px solid #333;
    padding: 1px 4px;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: medium;
  }
  /* ----------  DEBUG: границы блоков  ---------- */
  .debug-layout #print-area        { outline: 4px solid red;    }
  .debug-layout .print-container   { outline: 3px dashed blue;  }

  .debug-layout .map-section       { outline: 3px solid green;  }
  .debug-layout .table-section     { outline: 3px solid orange; }

  .debug-layout .header-row        { outline: 2px dashed purple;}
  .debug-layout .agree-block,
  .debug-layout .approve-block     { outline: 1px dotted #555;  }

  /* чтобы таблица тоже «читалась» */
  .debug-layout .points-table      { outline: 2px dashed teal;  }
}
</style>
