<template>
  <div class="form-part section-list" id="display-ikramiye" v-if="!isPreview">
    <list-table-content
      v-if="piyangoIkramiyeStore.loaded"
      title="İkramiye Listesi"
      icon="draws"
      :tableHeader="ikramiyeTableHeader"
      listText="İkramiye"
      addAction=""
      :apiList="'Ikramiye/Cekilis/' + piyangoStore.selectedLottery"
      rowNumber
      :totalValues="piyangoIkramiyeStore.totalIkramiyeValues" />
  </div>
  <template v-else>
    <list-table-content
      v-if="piyangoIkramiyeStore.loaded"
      formTitle="İkramiye Listesi"
      :tableHeader="ikramiyeTableHeader"
      listText="İkramiye"
      addAction=""
      :apiList="'Ikramiye/Cekilis/' + piyangoStore.selectedLottery"
      rowNumber
      :totalValues="piyangoIkramiyeStore.totalIkramiyeValues"
      page="form"
      :isPreview="isPreview" />
  </template>
</template>
<script setup lang="ts">
  import { ref, onBeforeMount, watch } from 'vue'
  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  import { usePiyangoStore } from '../../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()
  import { usePiyangoServices } from '../../service/piyangoServices'
  const piyangoServices = usePiyangoServices()

  import { usePiyangoIkramiyeStore } from '../../stores/piyangoIkramiyeStore'
  const piyangoIkramiyeStore = usePiyangoIkramiyeStore()

  export interface Props {
    isPreview?: boolean
  }

  const props = withDefaults(defineProps<Props>(), { isPreview: false })

  const ikramiyeTableHeader = ref<Record<string, any>>([
    {
      name: 'cinsi',
      title: 'Cinsi, Markası, Modeli',
      computeHtml: (v: Record<string, any>): string => {
        return `${v.cinsi}, ${v.marka}, ${v.model}`
      },
      style: { width: '20%' }
    },
    {
      name: 'birimFiyat',
      title: 'Birim Değeri (KDV+ÖTV Dahil)',
      sort: true,
      price: true,
      computeHtml: (v: Record<string, any>): string => {
        if (v.paraBirimi !== null)
          return `${globalStore.toTrLocale(v.birimFiyat)} ${
            v.paraBirimi.paraBirimiSembol
          }`
        else return globalStore.toTrLocale(v.birimFiyat)
      },
      style: { width: '10%' }
    },
    {
      name: 'asilTalihliAdedi',
      title: piyangoStore.isLotteryForCharity ? 'Talihli Adedi' : 'Asil Talihli Adedi',
      sort: true
    },
    {
      name: 'toplamDeger',
      title: 'Toplam Değer',
      sort: true,
      price: true,
      compute: (v: Record<string, any>): string => {
        if (v.paraBirimi !== null)
          return `${globalStore.toTrLocale(v.toplamDeger)} ${
            v.paraBirimi.paraBirimiSembol
          }`
        else return globalStore.toTrLocale(v.toplamDeger)
      }
    }
  ])

  const TableHeaderColumns = () =>{
    if (!piyangoStore.isLotteryForCharity) {
        ikramiyeTableHeader.value.push({
          name: 'yedekTalihliAdedi',
          title: 'Yedek Talihli Adedi',
          sort: true
        })
      }
  }

  onBeforeMount(async () => {
    piyangoIkramiyeStore.loaded = false
    await piyangoServices.GetParaBirimleri()
    TableHeaderColumns()
    piyangoIkramiyeStore.loaded = true
  })

  watch(
    () => piyangoStore.isLotteryForCharity,
    () => {
      TableHeaderColumns()
    }
  )
</script>
