<template>
  <AdminLayout>
    <Breadcrumb current-page-text="Sayfa Listesi" go="/" />
    <section class="section-list">
      <list-table-content
        :tableHeader="tableHeader"
        :rowAction="pageDetail"
        icon="sitemanagement"
        title="Sayfalar"
        listText="Sayfa"
        addRoute="yeni-sayfa"
        apiList="Page"
        apiText="Sayfa Listesi"
        :refresh="refresh"
        :rowActions="rowActions"
        :rowActionStyle="'width:10%;'"
        isUseRoute />
    </section>
  </AdminLayout>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import AdminLayout from '@/layouts/AdminLayout.vue'
  import { useDialogStore } from '@/components/global/dialogStore'
  const dialogStore = useDialogStore()
  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()
  import router from '@/router'

  const tableHeader = ref<Record<string, any>[]>([
    {
      name: 'title',
      title: 'Sayfa Başlığı',
      sort: true
    }
  ])
  const refresh = ref<boolean>(false)

  const DeleteRowPop = (data: Record<string, any>, i: number) => {
    dialogStore.CreateDialog({
      title: 'Sayfa Sil',
      id: 'deleteslider',
      content: 'Sayfayı silmek istediğinize emin misiniz?',
      closeText: 'Vazgeç',
      buttons: [
        {
          label: 'Sil',
          type: 'alert',
          function: () => DeleteRow(data.id)
        }
      ]
    })
  }

  const DeleteRow = async (id: number | string) => {
    var dt = await dataStore.dataDelete('Page/' + id)

    if (dt !== 'errorfalse') {
      dialogStore.CloseDialog('deleteslider')
      refresh.value = true
    }
  }

  const rowActions = ref<Record<string, any>[]>([
    {
      text: 'Sil',
      class: 'alert',
      action: () => DeleteRowPop
    }
  ])

  const pageDetail = (row: any) => {
    router.push('/sayfalar/detay/' + row.id)
  }
</script>
