<template>
  <div class="dealAddDoc">
    <div class="deal-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">Название документа <span class="text-red-500">*</span></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
            ref="fileUploadRef"
            name="file"
            customUpload
            :auto="false"
            :multiple="false"
            accept=".pdf,.doc,.docx,.jpg,.png"
            @select="onFileSelect"
            @uploader="saveDealDoc"
            @clear="selectedFile = null"
        >
          <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
            <div class="flex flex-wrap gap-2">
              <Button @click="chooseCallback()" size="small" outlined severity="secondary">
                <img :src="plusIcon" alt="" width="14" height="14" class="mr-1"> Выбрать
              </Button>
              <Button @click="clearCallback()" size="small" outlined severity="danger" :disabled="!files || files.length === 0">
                <img :src="closeIcon" alt="" width="14" height="14" class="mr-1"> Отмена
              </Button>
            </div>
          </template>
          <template #content="{ files }">
            <div v-if="files && files.length > 0" class="flex items-center justify-between gap-2 p-2">
              <div class="flex items-center gap-2">
                <img :src="defaultDocIcon" alt="" width="32" height="32">
                <span class="text-sm">{{ files[0].name }}</span>
              </div>
              <Button @click="onUploadClick" size="small" outlined severity="success">
                <img :src="sendIcon" alt="" width="14" height="14" class="mr-1"> Загрузить
              </Button>
            </div>
          </template>
          <template #empty>
            <span class="text-gray-500">Перетащите файл сюда или нажмите "Выбрать"</span>
          </template>
        </FileUpload>
      </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';
import Button from 'primevue/button';
import defaultDocIcon from '@/shared/assets/images/deal/deal-doc-icon.png';
import plusIcon from '@/shared/assets/icons/plus-green.svg';
import sendIcon from '@/shared/assets/icons/send.svg';
import closeIcon from '@/shared/assets/icons/close.svg';
import {useToast} from 'primevue/usetoast';

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

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

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

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

const onUploadClick = () => {
  if (fileUploadRef.value) {
    fileUploadRef.value.upload();
  }
};

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


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

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

// Сохранение документа
const saveDealDoc = async () => {
  if (!documentName.value) {
    alert('Заполните название документа');
    return;
  }
  if (!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);
    toast.add({
      severity: 'success',
      summary: 'Документ загружен',
      detail: `«${documentName.value}» успешно добавлен`,
      life: 3000
    });
    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>-->
