<template>
  <div class="form-part">
    <div class="form-part-title">
      <h4>Gerekli Dokümanlar</h4>
      <div class="form-part-title-buttons">
        <icon-button
          v-if="!usersStore.isPanelUser"
          icon="plus"
          class="ico-section ico-section-header-btn"
          @click="AddNewDocument" />
      </div>
    </div>
    <div class="form-part-content" v-if="piyangoDocumentStore.loaded">
      <template v-if="piyangoDocumentStore.piyangoDocumentsList.length > 0">
        <div
          class="form-inner-comment waiting-d"
          v-if="
            piyangoDocumentStore.piyangoDocumentsList.length < 6 &&
            piyangoStore.lotteryData.amacpiyangoId !== 3 &&
            piyangoStore.lotteryApprove !== 12
          ">
          Ön Kaydınız Kabul edilmiştir. Lütfen
          <strong>imza sirküsü ve proforma faturayı</strong>
          sisteme yükleyiniz.
        </div>
        <div
          class="form-inner-comment waiting-d"
          v-if="
            piyangoStore.lotteryData.amacpiyangoId === 3 ||
            piyangoStore.lotteryApprove === 12
          ">
          Lütfen
          <strong>imza sirkünüzü</strong>
          sisteme yükleyiniz.
        </div>
        <template v-for="(file, i) in piyangoDocumentStore.piyangoDocumentsList">
          <file-list-item
            :data="file"
            @click="EditDocument"
            title="dokumanAdi"
            :filePath="file.url"
            :editable="piyangoStore.lotteryApprove === 3 || piyangoStore.lotteryApprove === 0" />
        </template>
      </template>
      <template v-else>
        <template
          v-if="
            !usersStore.isPanelUser &&
            (piyangoStore.lotteryApprove === 0 || piyangoStore.lotteryApprove === 12) &&
            piyangoDocumentStore.piyangoDocumentsList.length < 4
          ">
          <div
            class="form-inner-comment waiting-d"
            v-if="
              piyangoStore.lotteryData.amacpiyangoId === 3 ||
              piyangoStore.lotteryApprove === 12
            ">
            Lütfen
            <strong>başvuru dilekçesi ve dekontunuzu</strong>
            sisteme yükleyiniz.
          </div>
          <div class="form-inner-comment" v-else>
            <span>
              Eklenmiş dosya bulunamadı. Üstteki butonu kullanarak dosya ekleyebilirsiniz.
            </span>
            <div class="form-inner-comment waiting-d">
              Piyango başvurusunun incelenebilmesi için piyangoyu düzenleyene ait
              <strong>
                Başvuru Dekontu, Vergi Levhası ve Başvuru bilgilerinin çıktısının
                imzalanmış dökümanı
              </strong>
              sisteme yüklenmiş olmalıdır. Bilgilerinizi doldurduktan sonra Önizleme
              butonuna tıklayarak formu indirebilirsiniz.
            </div>
          </div>
        </template>
      </template>
    </div>
  </div>
  <panel-wrapper
    v-if="piyangoDocumentStore.documentPanel"
    v-model="piyangoDocumentStore.documentPanel"
    :panel-title="piyangoDocumentStore.isUpdate ? 'Dokümanı Düzenle' : 'Doküman Ekle'">
    <template #panelContent>
      <panel-piyango-documents />
    </template>
    <template #footerButton>
      <div class="button-c button-save" @click="piyangoDocumentService.SaveDocument">
        {{ piyangoDocumentStore.isUpdate ? 'Kaydet' : 'Ekle' }}
      </div>
    </template>
  </panel-wrapper>
</template>
<script setup lang="ts">
  import { ref, onBeforeMount } from 'vue'

  import PanelPiyangoDocuments from '../panel/PanelPiyangoDocument.vue'
  import PanelWrapper from '@/components/PanelWrapper.vue'

  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { usePiyangoStore } from '../../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()
  import { usePiyangoDocumentStore } from '../../stores/piyangoDocumentStore'
  const piyangoDocumentStore = usePiyangoDocumentStore()
  import { usePiyangoDocumentService } from '../../service/piyangoDocumentService'
  const piyangoDocumentService = usePiyangoDocumentService()

  const AddNewDocument = () => {
    piyangoDocumentStore.ResetForm()
    piyangoDocumentStore.isUpdate = false
    piyangoDocumentStore.documentPanel = true
  }
  const EditDocument = (d: object) => {
    Object.assign(piyangoDocumentStore.piyangoDocumentForm, d)
    piyangoDocumentStore.documentPanel = true
    piyangoDocumentStore.isUpdate = true
  }

  onBeforeMount(async () => {
    await piyangoDocumentService.GetDocumentList()
  })
</script>
