<template>
  <AdminLayout>
    <Breadcrumb currentPageText="Muhasebe / İzin Bedel Oranı" />
    <section class="section-list">
      <list-table-content
        :tableHeader="tableHeader"
        :rowAction="updateAction"
        :addAction="addAction"
        icon="draws"
        title="İzin Bedel Oranları"
        listText="İzin Bedel Oranı"
        :tableData="izinBedelOraniList"
        apiText="İzin Bedel Oranı Listesi"
        apiList="IzinBedelOrani"
        v-model:refresh="refresh"
        :rowActions="rowActions"
        :rowActionStyle="'width:15%;'" />
    </section>
    
    <panel-wrapper
      v-if="panel"
      v-model="panel"
      :panel-title="isUpdate ? 'İzin Bedel Oranı Düzenle' : 'Yeni İzin Bedel Oranı Ekle'">
      <template #panelContent>
        <form-input 
          required 
          v-model="panelIzinBedelOrani.ad" 
          label="Ad" 
          maxlength="100" />
        <form-input 
          required 
          v-model="panelIzinBedelOrani.oran" 
          label="Oran (%)" 
          maxlength="3"
          @keydown="validationStore.allowNumbersWithKeys"
          description="1-100 arasında bir rakam giriniz" />
        <form-textarea 
          required 
          v-model="panelIzinBedelOrani.aciklama" 
          label="Açıklama" 
          maxlength="500"
          rows="4" />
        <form-checkbox 
          v-model="panelIzinBedelOrani.aktif" 
          label="Aktif" />
      </template>
      <template #footerButton>
        <div class="button-c button-save" @click="save">
          {{ isUpdate ? 'Güncelle' : 'Ekle' }}
        </div>
      </template>
    </panel-wrapper>
  </AdminLayout>
</template>
<script setup lang="ts">
  import { ref, onBeforeMount, computed } from 'vue'
  import AdminLayout from '@/layouts/AdminLayout.vue'
  import PanelWrapper from '@/components/PanelWrapper.vue'
  import { useIzinBedelOraniStore } from '../store/izinBedelOraniStore'
  import { useIzinBedelOraniService } from '../service/izinBedelOraniService'
  import { useValidationStore } from '@/stores/validationStore'
  import { useDialogStore } from '@/components/global/dialogStore'
  import { useDataStore } from '@/stores/dataStore'

  const izinBedelOraniStore = useIzinBedelOraniStore()
  const izinBedelOraniService = useIzinBedelOraniService()
  const validationStore = useValidationStore()
  const dialogStore = useDialogStore()
  const dataStore = useDataStore()

  const panel = ref<boolean>(false)
  const isUpdate = ref<boolean>(false)
  const refresh = ref<boolean>(false)
  const panelIzinBedelOrani = ref<Record<string, any>>({})
  const izinBedelOraniList = ref<Record<string, any>[]>([])

  const tableHeader = ref<Record<string, any>[]>(
      [
      {
        name: 'id',
        title: 'ID',
        sort: true,
        style: { width: '8%' }
      },
      {
        name: 'adi',
        title: 'Ad',
        sort: true,
        style: { width: '20%' }
      },
      {
        name: 'oran',
        title: 'Oran (%)',
        sort: true,
        style: { width: '15%' },
        compute: (v: Record<string, any>): string => {
          return `%${v.oran}`
        }
      },
      {
        name: 'aciklama',
        title: 'Açıklama',
        sort: true,
        style: { width: '30%' }
      },
      {
        name: 'aktif',
        title: 'Durum',
        sort: true,
        style: { width: '12%' },
        computeHtml: (v: Record<string, any>): string => {
          if (v.aktif) {
            return `<span class="back-grad back-grad-ok">Aktif</span>`
          } else {
            return `<span class="back-grad back-grad-alert">Pasif</span>`
          }
        }
      }
    ]
  )

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

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

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

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

  const addAction = async () => {
    isUpdate.value = false
    panelIzinBedelOrani.value = {
      ad: '',
      oran: 0,
      aciklama: '',
      aktif: true
    }
    panel.value = true
  }

  const updateAction = (row: any) => {
    const foundItem = izinBedelOraniList.value.find((x) => x.id == row.id)
    if (foundItem) {
      panelIzinBedelOrani.value = {
        id: foundItem.id,
        ad: foundItem.adi,
        oran: foundItem.oran,
        aciklama: foundItem.aciklama,
        aktif: foundItem.aktif
      }
    }
    panel.value = true
    isUpdate.value = true
  }

  const save = async () => {
    const result = await izinBedelOraniService.SaveIzinBedelOrani(panelIzinBedelOrani.value, isUpdate.value)
    if (result) {
      panel.value = false
      isUpdate.value = false
      refresh.value = true
      await loadIzinBedelOraniList()
    }
  }

  const loadIzinBedelOraniList = async () => {
    const data = await dataStore.dataGet('IzinBedelOrani')
    if (data !== 'errorfalse') {
      izinBedelOraniList.value = data
    }
  }

  onBeforeMount(async () => {
    await loadIzinBedelOraniList()
  })
</script>
