<template>
  <div class="form-part section-list" v-if="piyangoIkramiyeStore.loaded">
    <list-table-content
      title="İkramiye Listesi"
      icon="draws"
      :tableHeader="ikramiyeTableHeader"
      :rowAction="EditIkramiye"
      listText="İkramiye"
      :addAction="AddActionFunction()"
      :apiList="'Ikramiye/Cekilis/' + piyangoStore.selectedLottery"
      apiText="İkramiye Listesi"
      v-model:refresh="piyangoIkramiyeStore.refreshList"
      rowNumber
      :totalValues="piyangoIkramiyeStore.totalIkramiyeValues" />
  </div>
  <panel-wrapper
    wide
    v-if="piyangoIkramiyeStore.ikramiyePanel"
    v-model="piyangoIkramiyeStore.ikramiyePanel"
    :panel-title="piyangoIkramiyeStore.isUpdate ? 'İkramiye Düzenle' : 'İkramiye Ekle'">
    <template #panelContent>
      <panel-piyango-ikramiye />
    </template>
    <template #footerButton>
      <div class="button-c button-save" @click="piyangoIkramiyeService.SaveIkramiye">
        {{ piyangoIkramiyeStore.isUpdate ? 'Kaydet' : 'Ekle' }}
      </div>
    </template>
  </panel-wrapper>
</template>
<script setup lang="ts">
  import { ref,  onBeforeMount, watch } from 'vue'
  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { usePiyangoStore } from '../../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()
  import { usePiyangoServices } from '../../service/piyangoServices'
  const piyangoServices = usePiyangoServices()

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

  import PanelPiyangoIkramiye from '../panel/PanelPiyangoIkramiye.vue'
  import PanelWrapper from '@/components/PanelWrapper.vue'

  const talihliTitle = ref<string>('Talihli Adedi')

  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 !== null ? ', ' + 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: talihliTitle.value,
      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 AddActionFunction = (): any => {
    if (usersStore.isPanelUser) {
      return ''
    } else {
      return NewIkramiye as Function
    }
  }

  const NewIkramiye = () => {
    piyangoIkramiyeStore.ResetForm()
    piyangoIkramiyeStore.isUpdate = false
    piyangoIkramiyeStore.ikramiyePanel = true
  }

  const EditIkramiye = (d: Record<string, any>) => {
    Object.assign(piyangoIkramiyeStore.piyangoIkramiyeForm, d)
    piyangoIkramiyeStore.piyangoIkramiyeForm.birimFiyat = globalStore.toTrLocale(
      piyangoIkramiyeStore.piyangoIkramiyeForm.birimFiyat
    )

    piyangoIkramiyeStore.ikramiyePanel = true
    piyangoIkramiyeStore.isUpdate = true
  }

  const TableHeaderColumns = () => {
    if (!piyangoStore.isLotteryForCharity) {
      talihliTitle.value = 'Asil Talihli Adedi'
      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>
