<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 &&
            (usersStore.selectedUserApproveId === 0 ||
              usersStore.selectedUserApproveId === 3)
          "
          icon="plus"
          class="ico-section ico-section-header-btn"
          @click="NewDocument" />
      </div>
    </div>
    <div class="form-part-content" v-if="customerDocumentStore.loaded">
      <template v-if="customerDocumentStore.customerDocumentsList.length > 0">
        <div
          class="form-inner-comment waiting-d"
          v-if="customerDocumentStore.customerDocumentsList.length < 3">
          En az
          <strong>Ticaret Sicil Gazetesi, Vergi Levhası, İmza Sirküleri</strong>
          sisteme yüklenmiş olmalıdır.
        </div>
        <template v-for="(file, i) in customerDocumentStore.customerDocumentsList">
          <file-list-item
            :data="file"
            @click="EditDocument"
            :filePath="file.filePath"
            :editable="
              usersStore.isPanelUser ||
              (!usersStore.isPanelUser &&
                (usersStore.selectedUserApproveId === 3 ||
                  usersStore.selectedUserApproveId === 0))
            "
            title="title">
            <template #actionButtons v-if="usersStore.isPanelUser">
              <i
                class="ico-c ico-btn ico-section back-grad-alert"
                @click="DeleteDocumentPop(file)">
                <svg><use href="/src/assets/images/icons.svg#trash"></use></svg>
              </i>
            </template>
          </file-list-item>
        </template>
      </template>
      <template v-else>
        <template
          v-if="!usersStore.isPanelUser && usersStore.selectedUserApproveId !== 5">
          <div class="form-inner-comment">
            <span>
              Eklenmiş dosya bulunamadı. Üstteki butonu kullanarak dosya ekleyebilirsiniz.
            </span>
            <div class="form-inner-comment waiting-d">
              Üyelik kaydının incelenebilmesi için öncelikle
              <strong>Ticaret Sicil Gazetesi, Vergi Levhası, İmza Sirküleri</strong>
              sisteme yüklenmiş olmalıdır.
            </div>
          </div>
        </template>
        <template v-else>
          <div class="form-inner-comment waiting-d">
            <template v-if="customerDocumentStore.customerDocumentsList.length === 0">
              Eklenmiş dosya bulunamadı. En az
              <strong>Ticaret Sicil Gazetesi, Vergi Levhası, İmza Sirküleri</strong>
              sisteme yüklenmiş olmalıdır.
            </template>
            <template
              v-if="
                customerDocumentStore.customerDocumentsList.length > 0 &&
                customerDocumentStore.customerDocumentsList.length < 3
              ">
              En az
              <strong>Ticaret Sicil Gazetesi, Vergi Levhası, İmza Sirküleri</strong>
              sisteme yüklenmiş olmalıdır.
            </template>
          </div>
        </template>
      </template>
    </div>
  </div>
  <panel-wrapper
    v-if="customerDocumentStore.documentPanel"
    v-model="customerDocumentStore.documentPanel"
    :panel-title="customerDocumentStore.isUpdate ? 'Dokümanı Düzenle' : 'Doküman Ekle'">
    <template #panelContent>
      <panel-user-document />
    </template>
    <template #footerButton>
      <div class="button-c button-save" @click="customerDocumentService.SaveDocument">
        {{ customerDocumentStore.isUpdate ? 'Kaydet' : 'Ekle' }}
      </div>
    </template>
  </panel-wrapper>
</template>
<script setup lang="ts">
  import { onBeforeMount } from 'vue'

  import PanelUserDocument from '../panel/PanelUserDocument.vue'
  import PanelWrapper from '@/components/PanelWrapper.vue'

  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { useCustomerDocumentStore } from '../../stores/customerDocumentStore'
  const customerDocumentStore = useCustomerDocumentStore()
  import { useCustomerDocumentService } from '../../service/customerDocumentService'
  const customerDocumentService = useCustomerDocumentService()
  import { useDialogStore } from '@/components/global/dialogStore'
  const dialogStore = useDialogStore()
  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()

  const NewDocument = () => {
    customerDocumentStore.ResetForm()
    customerDocumentStore.isUpdate = false
    customerDocumentStore.documentPanel = true
  }

  const EditDocument = (d: object) => {
    Object.assign(customerDocumentStore.customerDocumentForm, d)
    customerDocumentStore.isUpdate = true
    customerDocumentStore.documentPanel = true
  }

  const DeleteDocumentPop = (data: Record<string, any>) => {
    dialogStore.CreateDialog({
      title: 'Doküman Sil',
      id: 'deletedoc',
      content: 'Dokümanı silmek istediğinize emin misiniz? Bu işlem geri alınamaz.',
      closeText: 'Vazgeç',
      buttons: [
        {
          label: 'Doküman Sil',
          type: 'alert',
          function: () => DeleteDocument(data.id)
        }
      ]
    })
  }

  const DeleteDocument = async (id: number | string) => {
    var dt = await dataStore.dataDelete('AppUserDocument/' + id)

    if (dt !== 'errorfalse') {
      dialogStore.CloseDialog('deletedoc')
      await customerDocumentService.GetDocumentList()
    }
  }

  onBeforeMount(async () => {
    usersStore.SetSelectedUser()

    await customerDocumentService.GetDocumentList()
  })
</script>
