<script setup>
import {ref, computed, onMounted, watch} from 'vue';
import jsPDF from 'jspdf';
import {useAuthStore} from '@/stores/Auth';
import dejavuFont from '@/fonts/DejaVuSans-normal.js';
import schemeImage from '@/assets/road-scheme.jpg'; // Импортируем изображение

const authStore = useAuthStore();
const fullResponse = ref({});
const selectedDistrictId = ref(null);
const selectedPointId = ref(null);

// Сбрасываем выбор точки при изменении района
watch(selectedDistrictId, () => {
  selectedPointId.value = null;
});


onMounted(async () => {
  const {response, error} = await authStore.getPointList();
  if (response) {
    fullResponse.value = response.data;
  } else {
    console.error('Ошибка загрузки точек:', error);
  }
});

const allPoints = computed(() => fullResponse.value.points || []);

const pointsInDistrict = computed(() => {
  return allPoints.value.filter(p => p.district_id === selectedDistrictId.value);
});

// хранит и оригинальное, и склонённое имя
const districtOptions = computed(() => {
  const districts = new Map();
  allPoints.value.forEach(p => {
    const d = p.district;
    if (d) {
      districts.set(d.id, {
        name: (d.name ?? '').trim(),
        name_declined: (d.name_declined ?? '').trim()
      });
    }
  });
  return Array.from(districts.entries()).map(([id, {name, name_declined}]) => ({
    id,
    name,
    name_declined
  })).sort((a, b) => a.name.localeCompare(b.name, 'ru'));
});

// Необязательно, но можно оставить привычное название
const districtName = computed(() => {
  if (!selectedDistrictId.value) return 'Оренбургской области';
  return districtOptions.value.find(d => d.id === selectedDistrictId.value)?.name
      || 'Оренбургской области';
});

// Для шапки PDF — либо точка, либо склонённое название района
const headerName = computed(() => {
  if (selectedPointId.value) {
    const point = pointsInDistrict.value.find(p => p.id === selectedPointId.value);
    return point?.name || '';
  }
  return districtOptions.value.find(d => d.id === selectedDistrictId.value)
          ?.name_declined
      || 'Оренбургской области';
});
const generatePdf = async () => {

  const doc = new jsPDF({orientation: 'landscape', unit: 'mm', format: 'a4'});
  doc.addFileToVFS('DejaVuSans.ttf', dejavuFont);
  doc.addFont('DejaVuSans.ttf', 'DejaVuSans', 'normal');
  doc.setFont('DejaVuSans');
  doc.setFontSize(8);

  doc.text('Согласовано:', 15, 15, {align: 'left'});
  doc.setFontSize(8);
  doc.text('Заместитель директора', 15, 20, {align: 'left'});
  doc.text('ГУ ГУДХОО', 15, 25, {align: 'left'});
  doc.text('Подпись: ________________________________', 15, 30, {align: 'left'});
  doc.text('Карташков Сергей Александрович', 15, 35, {align: 'left'});
  doc.text('Дата: ___________________________________', 15, 40, {align: 'left'});
  doc.setFontSize(8);
  doc.text('Утверждаю:', 110, 15, {align: 'left'});
  doc.setFontSize(8);
  doc.text('Главный инженер', 110, 20, {align: 'left'});
  doc.text('АО "Оренбургремдорстрой"', 110, 25, {align: 'left'});
  doc.text('Подпись: ________________________________', 110, 30, {align: 'left'});
  doc.text('Кравец Владимир Николаевич', 110, 35, {align: 'left'});
  doc.text('Дата: ___________________________________', 110, 40, {align: 'left'});
  doc.text('Утверждаю:', 200, 15, {align: 'left'});
  doc.setFontSize(8);
  doc.text('Генеральный директор', 200, 20, {align: 'left'});
  doc.text('ООО "ИТБ"', 200, 25, {align: 'left'});
  doc.text('Подпись: ________________________________', 200, 30, {align: 'left'});
  doc.text('Иванов Дмитрий Александрович', 200, 35, {align: 'left'});
  doc.text('Дата: ___________________________________', 200, 40, {align: 'left'});
  const pageWidth = doc.internal.pageSize.getWidth();
  doc.setFontSize(12);
  doc.text(
      `Схема организации дорожного движения на автомобильных дорогах общего пользования регионального`,
      pageWidth / 2, // X-координата (середина страницы)
      48,            // Y-координата (прежняя позиция)
      {align: 'center'} // Опции выравнивания
  );

  doc.text(
      `и межмуниципального значения ${headerName.value} по заявке №1 от 16.04.2025г.`,
      pageWidth / 2, // X-координата (середина страницы)
      53,            // Y-координата (прежняя позиция)
      {align: 'center'} // Опции выравнивания
  );

  const imgWidth = 300; // Ширина изображения
  const imgHeight = 100; // Высота изображения
  const x = (pageWidth - imgWidth) / 2; // Центрирование по горизонтали

  // Добавляем изображение
  const img = new Image();
  img.src = schemeImage;

  await new Promise((resolve) => {
    img.onload = () => {
      doc.addImage(img, 'JPEG', x, 58, imgWidth, imgHeight);
      resolve();
    };
  });

  doc.save(`Схема организации ДД_${headerName.value.slice(0, 10)}.pdf`);
};
</script>

<template>
  <div class="container mt-4">
    <h3 class="mb-3">Схема организации дорожного движения</h3>

    <div class="row mb-3 g-2">
      <div class="col-md-3">
        <select class="form-select" v-model="selectedDistrictId">
          <option :value="null">Все районы</option>
          <option v-for="district in districtOptions" :key="district.id" :value="district.id">
            {{ district.name }}
          </option>
        </select>
      </div>
      <div class="col-md-4">
        <select
            class="form-select"
            v-model="selectedPointId"
            :disabled="!selectedDistrictId"
        >
          <option :value="null">Все точки</option>
          <option
              v-for="point in pointsInDistrict"
              :key="point.id"
              :value="point.id"
          >
            {{ point.name }}
          </option>
        </select>
      </div>
      <div class="col-md-4 text-end">
        <button
            class="btn btn-outline-primary"
            @click="generatePdf"
            :disabled="!selectedDistrictId"
        >
          Скачать PDF
        </button>
      </div>
    </div>


  </div>
</template>

<style scoped>
select {
  font-size: 14px;
}
</style>
