<template>
  <div class="form-part">
    <div class="form-part-title">
      <h4>Piyango Resimleri</h4>
      <a href="/data/mpi-sablon.zip" class="button-c" target="_blank">
        Örnek Resim Şablonları
      </a>
    </div>
    <div class="form-part-content">
      <template v-for="(file, i) in fileList">
        <file-list-item
          :data="file"
          onlyPreview
          :editable="false"
          :filePath="file.resimYolu">
          <template #actionButtons v-if="usersStore.isPanelUser">
            <i
              class="ico-c ico-btn ico-section back-grad-alert"
              @click="DeleteImagePop(file)">
              <svg><use href="/src/assets/images/icons.svg#trash"></use></svg>
            </i>
          </template>
        </file-list-item>
      </template>
      <div
        v-if="usersStore.isPanelUser && fileList.length === 0"
        class="form-inner-comment">
        Eklenmiş resim bulunamadı.
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onBeforeMount } from 'vue'

  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { usePiyangoStore } from '../../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()
  import { useDialogStore } from '@/components/global/dialogStore'
  const dialogStore = useDialogStore()

  const fileList = ref<Record<string, any>[]>([])

  const GetData = async () => {
    let dt = await dataStore.dataGet(
      'CekilisResim/Cekilis/' + piyangoStore.selectedLottery
    )
    if (dt !== 'errorfalse') fileList.value.splice(0, fileList.value.length, ...dt.data)
  }

  const DeleteImagePop = (data: Record<string, any>) => {
    dialogStore.CreateDialog({
      title: 'Resim Sil',
      id: 'deleteimage',
      content: 'Resimi silmek istediğinize emin misiniz? Bu işlem geri alınamaz.',
      closeText: 'Vazgeç',
      buttons: [
        {
          label: 'Resmi Sil',
          type: 'alert',
          function: () => DeleteImage(data.id)
        }
      ]
    })
  }

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

    if (dt !== 'errorfalse') {
      dialogStore.CloseDialog('deleteimage')
      await GetData()
    }
  }

  onBeforeMount(async () => {
    await GetData()
  })
</script>
