<template>
  <list-table-content
    v-if="loaded"
    :tableHeader="tableHeader"
    :rowAction="adminRowAction"
    formTitle="Piyango Onay Durumları"
    listText="Kayıt"
    :apiList="'OnayDurumu/GetSonOnayDurumlariList/' + piyangoStore.selectedLottery"
    apiText="Piyango Onay Log Listesi"
    page="form"
    :refresh="piyangoOnayStore.refreshList"
    :rowActions="adminRowActions" />
  <panel-wrapper
    v-if="piyangoOnayStore.onayFormPanel"
    v-model="piyangoOnayStore.onayFormPanel"
    panel-title="Onay Durumunu Düzenle">
    <template #panelContent>
      <panel-piyango-onay />
    </template>
    <template #footerButton>
      <div class="button-c button-save" @click="piyangoOnayService.SaveOnayDurumPanel">
        Kaydet
      </div>
    </template>
  </panel-wrapper>
</template>
<script setup lang="ts">
  import { ref, onBeforeMount, computed } from 'vue'
  import PanelPiyangoOnay from '../panel/PanelPiyangoOnay.vue'
  import PanelWrapper from '@/components/PanelWrapper.vue'

  import { useDateStore } from '@/stores/dateStore'
  const dateStore = useDateStore()
  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  import { usePiyangoOnayStore } from '../../stores/piyangoOnayStore'
  const piyangoOnayStore = usePiyangoOnayStore()
  import { usePiyangoOnayService } from '../../service/piyangoOnayService'
  const piyangoOnayService = usePiyangoOnayService()
  import { usePiyangoStore } from '../../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()
  import { usePiyangoDataStore } from '../../stores/piyangoDataStore'
  const piyangoDataStore = usePiyangoDataStore()
  import { useDialogStore } from '@/components/global/dialogStore'
  const dialogStore = useDialogStore()
  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()

  const loaded = ref<boolean>(false)

  const piyangoOnayDurumlari = computed<Record<string, any>[]>(() => {
    return piyangoDataStore.piyangoOnayDurumlari
  })

  const mudurlukListesi = ref<Record<string, any>[]>([
    { id: 1, name: '1 No\'lu Özel Çekilişler İzin ve Takip Şubesi Müdürlüğü' },
    { id: 2, name: '2 No\'lu Özel Çekilişler İzin ve Takip Şubesi Müdürlüğü' },
    { id: 3, name: '3 No\'lu Özel Çekilişler İzin ve Takip Şubesi Müdürlüğü' }
  ])

  const cekilisGorevlisiListesi = ref<Record<string, any>[]>([
    { id: 1, name: 'Antalya Şube Müdürlüğü' },
    { id: 2, name: 'Gaziantep Şube Müdürlüğü' },
    { id: 3, name: 'Aksaray Şube Müdürlüğü' },
    { id: 4, name: 'Kadıköy Şube Müdürlüğü' },
    { id: 5, name: 'Karşıyaka Şube Müdürlüğü' },
    { id: 6, name: 'Muğla Şube Müdürlüğü' },
    { id: 7, name: 'Trabzon Şube Müdürlüğü' },
    { id: 8, name: 'Noter' },
    { id: 9, name: 'Başkanlık Personeli' }
  ])

  const tableHeader = ref<Record<string, any>[]>([
    {
      name: 'tarih',
      title: 'Tarih',
      compute: (v: Record<string, any>): string => {
        return v.tarih === null
          ? ''
          : dateStore.dateFormat({ pattern: 'dd-mm-yy', date: v.tarih })
      },
      sort: true,
      filter: {
        type: 'date',
        between: true
      }
    },
    {
      name: 'kisiAdi',
      title: 'Kişi',
      sort: true,
      style: { width: '20%' }
    },
    {
      name: 'onayDurumuIslemTipiAdi',
      title: 'İşlem',
      sort: true,
      computeHtml: (v: Record<string, any>): string => {
        const statusName = v.onayDurumuIslemTipiAdi || ''
        const statusClass = piyangoStore.GetIslemStatusClass(statusName)
        return `<span class='islem-status-badge ${statusClass}'>${statusName}</span>`
      },
      filter: {
        type: 'select',
        data: piyangoOnayDurumlari,
        listVal: 'id',
        listText: 'tipAdi',
        filterId: 'onayDurumuIslemTipiId'
      }
    },
    {
      name: 'aciklama',
      title: 'Açıklama'
    },
    {
      dosyaUrl: 'aciklama',
      title: 'Dosya',
      computeHtml: (v: Record<string, any>) => {
        if (v.dosyaUrl !== null && v.dosyaUrl !== undefined) {
          return globalStore.TableCellDocument(v.dosyaUrl)
        }
      },
      style: { width: '20%' }
    },
    {
      name: 'izinSayisi',
      title: 'İzin Sayısı'
    },
    {
      name: 'izinTarihi',
      title: 'İzin Tarihi',
      compute: (v: Record<string, any>): string => {
        return v.izinTarihi === null || v.izinTarihi === undefined || v.izinTarihi === ''
          ? ''
          : dateStore.dateFormat({ pattern: 'dd-mm-yy', date: v.izinTarihi })
      }
    },
    {
      name: 'izinAciklamasi',
      title: 'İzin Açıklaması'
    },
    {
      name: 'kapsamDisiSebebi',
      title: 'Kapsam Dışı Sebebi'
    },
    {
      name: 'mudurluk',
      title: 'Müdürlük',
      compute: (v: Record<string, any>): string => {
        if (v.mudurluk === null || v.mudurluk === undefined || v.mudurluk === '') {
          return ''
        }
        const mudurluk = mudurlukListesi.value.find((item: Record<string, any>) => item.id === v.mudurluk)
        return mudurluk ? mudurluk.name : ''
      }
    },
    {
      name: 'cekilisGorevlisi',
      title: 'Çekiliş Görevlisi',
      compute: (v: Record<string, any>): string => {
        if (v.cekilisGorevlisi === null || v.cekilisGorevlisi === undefined || v.cekilisGorevlisi === '') {
          return ''
        }
        const gorevli = cekilisGorevlisiListesi.value.find((item: Record<string, any>) => item.id === v.cekilisGorevlisi)
        return gorevli ? gorevli.name : ''
      }
    },
  ])

  const EditOnay = (d: Record<string, any>) => {
    Object.assign(piyangoOnayStore.piyangoPanelOnayForm, {
      ...piyangoOnayStore.piyangoOnayBaseForm,
      ...d,
      izinAciklamasi: d.izinAciklamasi != null ? d.izinAciklamasi : '',
      kapsamDisiSebebi: d.kapsamDisiSebebi != null ? d.kapsamDisiSebebi : null,
      mudurlukId: d.mudurluk != null ? d.mudurluk : null,
      cekilisGorevlisiId: d.cekilisGorevlisi != null ? d.cekilisGorevlisi : null
    })
    piyangoOnayStore.onayFormPanel = true
  }

  const DeleteRowPop = (data: Record<string, any>, i: number) => {
    dialogStore.CreateDialog({
      title: 'Onay Durumu Sil',
      id: 'deleteonaydurumu',
      content: 'Onay durumunu silmek istediğinize emin misiniz?',
      closeText: 'Vazgeç',
      buttons: [
        {
          label: 'Sil',
          type: 'alert',
          function: () => DeleteRow(data.id)
        }
      ]
    })
  }

  const DeleteRow = async (id: number | string) => {
    var dt = await dataStore.dataDelete('OnayDurumu/' + id, {
      toast: { toast: 'Onay durumu başarıyla silindi', type: 'success' }
    })

    if (dt !== 'errorfalse') {
      dialogStore.CloseDialog('deleteonaydurumu')
      window.location.reload()
    }
  }

  const rowActions = ref<Record<string, any>[]>([
    {
      text: 'Sil',
      class: 'alert',
      action: DeleteRowPop
    }
  ])

  const adminRowAction = computed(() => {
    return usersStore.isPanelUser ? EditOnay : undefined
  })

  const adminRowActions = computed(() => {
    return usersStore.isPanelUser ? rowActions.value : []
  })

  onBeforeMount(async () => {
    loaded.value = true
  })
</script>
