<template>
  <AdminLayout>
    <Breadcrumb currentPageText="Muhasebe / Piyango Listesi" />
    <section class="section-list">
      <list-table-content
        v-if="loaded"
        :tableHeader="tableHeader"
        :rowAction="OpenPiyango"
        icon="draws"
        title="Piyangolar"
        listText="Piyango"
        :apiList="'Cekilis/GetCekilislerListAtanan/' + usersStore.userId"
        apiText="Piyango Listesi" />
    </section>
  </AdminLayout>
</template>
<script setup lang="ts">
  import { ref, computed, onBeforeMount } from 'vue'

  import AdminLayout from '@/layouts/AdminLayout.vue'
  import { useDateStore } from '@/stores/dateStore'

  const dateStore = useDateStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { usePiyangoStore } from '@/module/cekilisler/stores/piyangoStore'
  const piyangoStore = usePiyangoStore()
  import { usePiyangoDataStore } from '@/module/cekilisler/stores/piyangoDataStore'
  const piyangoDataStore = usePiyangoDataStore()
  import { usePiyangoServices } from '@/module/cekilisler/service/piyangoServices'
  const piyangoServices = usePiyangoServices()

  import router from '@/router'

  const loaded = ref<boolean>(false)

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

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

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

  const tableHeader = computed<Record<string, any>[]>(() => {
    let header: Record<string, any>[] = []

    if (usersStore.isAraciFirma || usersStore.isPanelUser) {
      header.push({ name: 'duzenleyen', title: 'Düzenleyen' })
    }

    header.push(
      {
        name: 'piyangoId',
        title: 'Piyango ID',
        sort: true,
        style: { width: '10%' }
      },
      {
        name: 'baslik',
        title: 'Başlık',
        sort: true,
        style: { width: '15%' }
      },
      {
        name: 'piyangoamac',
        title: 'Piyango Amacı',
        sort: true,
        filter: {
          type: 'select',
          data: piyangoAmaclari.value,
          listVal: 'id',
          listText: 'amacAdi',
          filterId: 'piyangoAmacId'
        }
      },
      {
        name: 'olusturmaTarihi',
        title: 'Oluşturulma Tarihi',
        compute: (v: Record<string, any>): string => {
          return dateStore.dateFormat({ date: v.olusturmaTarihi })
        },
        sort: true,
        filter: {
          type: 'date',
          range: true
        }
      }
    )

    if (usersStore.isVakifDernek || usersStore.isPanelUser) {
      header.push({
        name: 'cekilisTarihi',
        title: 'Çekiliş Tarihi',
        compute: (v: Record<string, any>): string => {
          return dateStore.dateFormat({ date: v.cekilisTarihi })
        },
        sort: true,
        filter: {
          type: 'date',
          range: true
        }
      })
    }
    if (!usersStore.isVakifDernek || usersStore.isPanelUser) {
      header.push(
        {
          name: 'baslangicTarihi',
          title: 'Başlangıç Tarihi',
          compute: (v: Record<string, any>): string => {
            if (v.baslangicTarihi.includes('0001-')) return ''
            else return dateStore.dateFormat({ date: v.baslangicTarihi })
          },
          sort: true,
          filter: {
            type: 'date',
            range: true
          }
        },
        {
          name: 'bitisTarihi',
          title: 'Bitis Tarihi',
          compute: (v: Record<string, any>): string => {
            if (v.bitisTarihi.includes('0001-')) return ''
            else return dateStore.dateFormat({ date: v.bitisTarihi })
          },
          sort: true,
          filter: {
            type: 'date',
            range: true
          }
        }
      )
    }

    header.push(
      {
        name: 'cekilisYontemi',
        title: 'Çekiliş Yöntemi',
        sort: true,
        filter: {
          type: 'select',
          data: cekilisYontemleri.value,
          listVal: 'id',
          listText: 'deger',
          filterId: 'cekilisYontemiId'
        }
      },
      { name: 'ikramiyeler', title: 'İkramiyeler', style: { width: '15%' } },
      {
        name: 'durum',
        title: 'Durum',
        style: { width: '10%' },
        computeHtml: (v: Record<string, any>): string => {
          return `<span class="back-grad ${piyangoStore.LoterryStatusClass(v.durum)}">
                ${v.durum}
              </span>`
        },
        filter: {
          type: 'select',
          data: piyangoOnayDurumlari.value,
          listVal: 'id',
          listText: 'tipAdi',
          filterId: 'durumId'
        }
      },
      {
        name: 'atanmis',
        title: 'Sevk Durumu',
        computeHtml: (v: Record<string, any>): string => {
          if (v.atanmis) {
            return `<strong class="back-grad back-grad-sevk-ok">
                ${v.atananlar}
              </strong>`
          } else {
            return `<span class="back-grad back-grad-sevk">
                Sevk Edilmemiş</span>`
          }
        }
      },
      {
        name: 'basvuruBedelNo',
        title: 'Muhasebeleştirme Durumu',
        computeHtml: (v: Record<string, any>): string => {
          let durum = ''
          if (v.basvuruBedelNo !== null) {
            durum += `<strong">Başvuru Bedel No: </strong>
                ${v.basvuruBedelNo}<br>`
          }
          if (v.izinBedelNo !== null) {
            durum += `<strong">İzin Bedel No: </strong>
                ${v.izinBedelNo}`
          }
          return durum
        }
      }
    )
    return header
  })

  // tablodan herhangi bir satır tıklayınca çalısır
  const OpenPiyango = (row: any) => {
    router.push('/muhasebe/piyango-detay/' + row.id)
  }

  onBeforeMount(async () => {
    await piyangoServices.GetCekilisYontemiList()
    await piyangoServices.GetPiyangoAmaclariList()
    await piyangoServices.GetPiyangoOnayDurumList()

    loaded.value = true
  })
</script>
