<template>
  <list-table-content
    :tableHeader="tableHeader"
    :rowAction="EditMecra"
    formTitle="İlan Edilecek Diğer Mecralar"
    listText="Mecra"
    :addAction="AddActionFunction()"
    :apiList="'Mecra/Cekilis/' + piyangoStore.selectedLottery"
    apiText="Mecra Listesi"
    page="form"
    v-model:refresh="piyangoMecraStore.refreshList" />
  <panel-wrapper
    v-if="piyangoMecraStore.mecraPanel"
    v-model="piyangoMecraStore.mecraPanel"
    :panel-title="piyangoMecraStore.isUpdate ? 'Mecra Düzenle' : 'Mecra Ekle'">
    <template #panelContent>
      <panel-piyango-mecra />
    </template>
    <template #footerButton>
      <div class="button-c button-save" @click="piyangoMecraService.SaveMecra">
        {{ piyangoMecraStore.isUpdate ? 'Kaydet' : 'Ekle' }}
      </div>
    </template>
  </panel-wrapper>
</template>
<script setup lang="ts">
  import { ref } from 'vue'

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

  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { usePiyangoStore } from '../../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()
  import { usePiyangoMecraStore } from '../../stores/piyangoMecraStore'
  const piyangoMecraStore = usePiyangoMecraStore()
  import { usePiyangoMecraService } from '../../service/piyangoMecraService'
  const piyangoMecraService = usePiyangoMecraService()

  const tableHeader = ref<Record<string, any>>([
    {
      name: 'mecraAdi',
      title: 'Mecra Adı',
      sort: true
    }
  ])

  const AddActionFunction = (): any => {
    if (usersStore.isPanelUser) {
      return ''
    } else {
      return AddNewMecra as Function
    }
  }
  
  const AddNewMecra = () => {
    piyangoMecraStore.ResetForm()
    piyangoMecraStore.isUpdate = false
    piyangoMecraStore.mecraPanel = true
  }
  
  const EditMecra = (d: Record<string, any>) => {
    Object.assign(piyangoMecraStore.piyangoMecraForm, d)
    piyangoMecraStore.mecraPanel = true
    piyangoMecraStore.isUpdate = true
  }
</script>
