<template>
  <section class="section-list">
    <list-table-content
      v-if="loaded"
      :tableHeader="tableHeader"
      :rowAction="rwAction"
      icon="draws"
      title="Piyangolar"
      listText="Piyango"
      :addRoute="PiyangoLink()"
      :apiList="apiList"
      apiText="Piyango Listesi"
      isUseRoute />
  </section>
</template>
<script setup lang="ts">
  import { ref, computed, onBeforeMount } from 'vue'

  import { useDateStore } from '@/stores/dateStore'
  const dateStore = useDateStore()
  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  import { useGlobalDataStore } from '@/stores/globalDataStore'
  const globalDataStore = useGlobalDataStore()
  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 apiList = ref<string>('')

  apiList.value = usersStore.isSuperAdmin
    ? 'Cekilis/GetCekilislerListDuzenleyenAdmin/' + usersStore.selectedUserId()
    : 'Cekilis/GetCekilislerListDuzenleyen/' + usersStore.selectedUserId()

  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 PiyangoLink = (): string => {
    if (usersStore.isPanelUser) return ''
    else return 'yeni-piyango'
  }

  const tableHeader = ref<Record<string, any>[]>([
    { name: 'duzenleyen', title: 'Düzenleyen', sort: true },
    {
      name: 'baslik',
      title: 'Başlık',
      sort: true,
      style: { width: '15%' }
    },
    {
      name: 'piyangoamac',
      title: 'Piyango Amacı',
      sort: true,
      filter: {
        type: 'select',
        data: piyangoAmaclari,
        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',
        between: true
      }
    },
    {
      name: 'cekilisTarihi',
      title: 'Çekiliş Tarihi',
      compute: (v: Record<string, any>): string => {
        return dateStore.dateFormat({ date: v.cekilisTarihi })
      },
      sort: true,
      filter: {
        type: 'date',
        between: true
      }
    },
    {
      name: 'baslangicTarihi',
      title: 'Başlangıç Tarihi',
      compute: (v: Record<string, any>): string => {
        return dateStore.dateFormat({ date: v.baslangicTarihi })
      },
      sort: true,
      filter: {
        type: 'date',
        between: true
      }
    },
    {
      name: 'bitisTarihi',
      title: 'Bitis Tarihi',
      compute: (v: Record<string, any>): string => {
        return dateStore.dateFormat({ date: v.bitisTarihi })
      },
      sort: true,
      filter: {
        type: 'date',
        between: true
      }
    },
    {
      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='${piyangoStore.LoterryStatusClass(v.durum)}'>
                ${v.durum}
              </span>`
      },
      sort: true,
      filter: {
        type: 'select',
        data: piyangoOnayDurumlari.value,
        listVal: 'id',
        listText: 'tipAdi',
        filterId: 'durumId'
      }
    }
  ])

  if (usersStore.isPanelUser) {
    tableHeader.value.push({
      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>`
        }
      }
    })
  }

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

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

    loaded.value = true
  })
</script>
