<template>
  <div class="dealAddDoc">
    <div class="modal-content">
<!--      <span class="close" @click="closeModal">&times;</span>-->
<!--      <h3 class="mb-4">Добавление документа</h3>-->

      <div class="mb-4">
        <label for="document-name" class="block text-sm font-medium text-gray-700">Название документа</label>
        <InputText
            id="document-name"
            v-model="documentName"
            placeholder="Введите название документа"
            class="w-full p-2 border rounded"
        />
      </div>

      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700">
          Выберите файл
        </label>
        <FileUpload
            name="file"
            customUpload
            :auto="false"
            :multiple="false"
            accept=".pdf,.doc,.docx,.jpg,.png"
            @select="onFileSelect"
            @uploader="saveDealDoc"
            chooseLabel="Выбрать"
            uploadLabel="Загрузить"
            cancelLabel="Отмена"
        />
      </div>

<!--      <div class="mb-4">-->
<!--        <label for="document-file" class="block text-sm font-medium text-gray-700">Выберите файл</label>-->
<!--        <input-->
<!--            type="file"-->
<!--            id="document-file"-->
<!--            @change="handleFileChange"-->
<!--            class="w-full p-2 border rounded"-->
<!--        />-->
<!--      </div>-->

<!--      <div class="text-center">-->
<!--        <button @click="saveDealDoc" class="mt-4 p-2 rounded bg-blue-500 text-white">-->
<!--          Загрузить-->
<!--        </button>-->
<!--      </div>-->

    </div>
  </div>
</template>

<script setup>
import {inject, ref} from 'vue';
//import { useLaravelApi } from '@/composables/useLaravelApi';
import { dealsApi } from '@/shared/api/deal';
import InputText from "primevue/inputtext";
import FileUpload from 'primevue/fileupload';

// const props = defineProps({
//   deal: {
//     type: Object,
//     required: true
//   },
// });

const dialogRef = inject('dialogRef');
const props = dialogRef.value.data;

//const emit = defineEmits(['close', 'select']);

// Реактивные переменные для названия и файла
const documentName = ref('');
const selectedFile = ref(null);

// Событие выбора файла
const onFileSelect = (event) => {
  selectedFile.value = event.files[0];
  console.log(selectedFile);
};


// Обработчик изменения файла
// const handleFileChange = (event) => {
//   selectedFile.value = event.target.files[0];
// };

const closeModal = () => {
  //emit('close');
};

// Сохранение документа
const saveDealDoc = async (event) => {
  console.log('saveDealDoc вызван', event);
  if (!documentName.value || !selectedFile.value) {
    alert('Пожалуйста, заполните все поля');
    return;
  }

  //const { fetchData } = useLaravelApi();

  // Создаем FormData для отправки файла
  const formData = new FormData();
  formData.append('name', documentName.value);
  formData.append('file', selectedFile.value);
  if (props.deal.id) {
    formData.append('target_id', props.deal.id);
  }

  formData.append('target_type', 10); // Пример значения

  try {
    const response = await dealsApi.uploadDocument(formData);
    //emit('select', response.data.data);
    dialogRef.value.close(response.data.data)
    //closeModal();
  } catch (error) {
    console.error('Ошибка при загрузке документа:', error);
    alert('Произошла ошибка при загрузке документа');
  }

  // try {
  //   const response = await fetchData('/documents', {
  //     method: 'POST',
  //     data: formData,
  //   });
  //
  //   // Передаем документ в родительский компонент
  //   emit('select', response.data.data);
  //
  //   // Закрываем модальное окно
  //   closeModal();
  // } catch (error) {
  //   console.error('Ошибка при загрузке документа:', error);
  //   alert('Произошла ошибка при загрузке документа');
  // }
};

</script>

<!--<style>-->
<!--.modal {-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  position: fixed;-->
<!--  z-index: 1;-->
<!--  left: 0;-->
<!--  top: 0;-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  background-color: rgba(0, 0, 0, 0.5);-->
<!--}-->
<!--.modal-content {-->
<!--  background-color: #fff;-->
<!--  padding: 20px;-->
<!--  border-radius: 10px;-->
<!--  width: 80%;-->
<!--  max-width: 500px;-->
<!--}-->
<!--.close {-->
<!--  position: absolute;-->
<!--  top: 10px;-->
<!--  right: 20px;-->
<!--  font-size: 24px;-->
<!--  cursor: pointer;-->
<!--}-->
<!--</style>-->
