<template>
  <div class="form-part section-list" v-if="piyangoDosyaKapamaStore.loaded">
    <list-table-content
      title="Dosya Kapama İkramiye Listesi"
      icon="draws"
      :tableHeader="ikramiyeTableHeader"
      :rowAction="EditIkramiye"
      listText="İkramiye"
      :addAction="NewIkramiye"
      :apiList="'TeminatIadeEvrak/ByPiyangoId/' + piyangoStore.selectedLottery"
      apiText="Dosya Kapama İkramiye Listesi"
      v-model:refresh="piyangoDosyaKapamaStore.dosyaKapamaIkramiyeListesiRefresh"
      rowNumber />
  </div>
  <panel-wrapper
    wide
    v-if="piyangoDosyaKapamaStore.dosyaKapamaIkramiyePanel"
    v-model="piyangoDosyaKapamaStore.dosyaKapamaIkramiyePanel"
    :panel-title="
      piyangoDosyaKapamaStore.isDosyaKapamaIkramiyeUpdate
        ? 'İkramiye Düzenle'
        : 'İkramiye Ekle'
    ">
    <template #panelContent>
      <panel-piyango-dosya-kapama-ikramiye />
    </template>
    <template #footerButton>
      <div
        class="button-c button-save"
        @click="piyangoDosyaKapamaService.SaveDosyaKapamaIkramiye">
        {{ piyangoDosyaKapamaStore.isDosyaKapamaIkramiyeUpdate ? 'Kaydet' : 'Ekle' }}
      </div>
    </template>
  </panel-wrapper>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { usePiyangoStore } from '../../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()

  import { usePiyangoDosyaKapamaStore } from '../../stores/piyangoDosyaKapamaStore'
  const piyangoDosyaKapamaStore = usePiyangoDosyaKapamaStore()
  import { usePiyangoDosyaKapamaService } from '../../service/piyangoDosyaKapamaService'
  const piyangoDosyaKapamaService = usePiyangoDosyaKapamaService()

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

  const ikramiyeTableHeader = ref<Record<string, any>[]>([
    {
      name: 'tahhutEdilenIkramiye',
      title: 'Taahhüt Edilen İkramiye',
      style: { width: '20%' },
      computeHtml: (v: Record<string, any>) => {
        return `<span>${v.tahhutEdilenIkramiyeAdet} ${v.tahhutEdilenIkramiye}</span>`
      }
    },
    {
      name: 'teslimEdilenIkramiye',
      title: 'Teslim Edilen İkramiye',
      style: { width: '20%' },
      computeHtml: (v: Record<string, any>) => {
        let asil: string = ''
        let yedek: string = ''
        if (
          v.teslimEdilenIkramiyeAsil &&
          v.teslimEdilenIkramiyeAsil !== null &&
          v.teslimEdilenIkramiyeAsil !== 0 &&
          v.teslimEdilenIkramiyeAsil !== ''
        ) {
          asil = `<span >${v.teslimEdilenIkramiyeAsil} ASIL</span>`
        }
        if (
          v.teslimEdilenIkramiyeYedek &&
          v.teslimEdilenIkramiyeYedek !== null &&
          v.teslimEdilenIkramiyeYedek !== 0 &&
          v.teslimEdilenIkramiyeYedek !== ''
        ) {
          yedek = `<span >${v.teslimEdilenIkramiyeYedek} YEDEK</span>`
        }
        return asil !== ''
          ? yedek !== ''
            ? asil + '<br/>' + yedek
            : asil
          : yedek !== ''
          ? yedek
          : ''
      }
    },
    {
      name: 'alinmayanIkramiye',
      title: 'Alınmayan İkramiye',
      style: { width: '20%' }
    },
    {
      name: 'aciklama',
      title: 'Açıklama'
    }
  ])

  const NewIkramiye = () => {
    piyangoDosyaKapamaStore.ResetIkramiyeFormData()
    piyangoDosyaKapamaStore.isDosyaKapamaIkramiyeUpdate = false
    piyangoDosyaKapamaStore.dosyaKapamaIkramiyePanel = true
  }

  const EditIkramiye = (d: Record<string, any>) => {
    Object.assign(piyangoDosyaKapamaStore.dosyaKapamaIkramiyeData, d)
    piyangoDosyaKapamaStore.dosyaKapamaIkramiyePanel = true
    piyangoDosyaKapamaStore.isDosyaKapamaIkramiyeUpdate = true
  }
</script>
