<template>
  <section class="section-list">
    <list-table-content
      title="İtiraz/Şikayet Listesi"
      icon="draws"
      :tableHeader="tableHeader"
      :rowAction="EditItiraz"
      listText="İkramiye"
      :addAction="itirazAction()"
      :apiList="'Itiraz/Cekilis/' + piyangoStore.selectedLottery"
      apiText="İtiraz/Şikayet Listesi"
      v-model:refresh="piyangoItirazStore.refreshList" />
  </section>
  <panel-wrapper
    v-if="piyangoItirazStore.itirazPanel"
    v-model="piyangoItirazStore.itirazPanel"
    :panel-title="
      piyangoItirazStore.isUpdate
        ? 'İtiraz/Şikayet Süreci Düzenle'
        : 'İtiraz/Şikayet Süreci Ekle'
    ">
    <template #panelContent>
      <panel-piyango-itiraz />
    </template>
    <template #footerButton>
      <div class="button-c button-save" @click="piyangoItirazService.SaveItiraz">
        {{ piyangoItirazStore.isUpdate ? 'Kaydet' : 'Ekle' }}
      </div>
    </template>
  </panel-wrapper>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  import { useDateStore } from '@/stores/dateStore'
  const dateStore = useDateStore()
  import { usePiyangoItirazStore } from '../stores/piyangoItirazStore'
  const piyangoItirazStore = usePiyangoItirazStore()
  import { usePiyangoItirazService } from '../service/piyangoItirazService'
  const piyangoItirazService = usePiyangoItirazService()
  import { usePiyangoStore } from '../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()

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

  const tableHeader = ref<Record<string, any>[]>([
    {
      name: 'itirazTarihi',
      title: 'İtiraz Tarihi',
      sort: true,
      style: { width: '10%' },
      compute: (v: Record<string, any>): string => {
        return v.itirazTarihi === null
          ? ''
          : dateStore.dateFormat({ pattern: 'dd-mm-yy', date: v.itirazTarihi })
      }
    },
    {
      name: 'itirazEden',
      title: 'İtiraz Eden',
      sort: true,
      style: { width: '15%' }
    },
    {
      name: 'aciklama',
      title: 'Açıklama',
      sort: true,
      style: { width: '20%' }
    },
    {
      name: 'durum',
      title: 'Durum',
      sort: true
    },
    {
      name: 'surecTipiAdi',
      title: 'Süreç Tipi',
      sort: true
    },
    {
      name: 'belgeUrl',
      title: 'Belge',
      computeHtml: (v: Record<string, any>) => {
        if (v.belgeUrl !== null && v.belgeUrl !== undefined) {
          return globalStore.TableCellDocument(v.belgeUrl)
        }
      }
    }
  ])
  const itirazAction = () => {
    if (usersStore.isPanelUser) return NewItiraz as Function
    else return ''
  }

  const NewItiraz = () => {
    piyangoItirazStore.ResetForm()
    piyangoItirazStore.itirazPanel = true
  }

  const EditItiraz = (d: Record<string, any>) => {
    piyangoItirazStore.isUpdate = true
    Object.assign(piyangoItirazStore.piyangoItirazForm, d)
    piyangoItirazStore.itirazPanel = true
  }
</script>
