<template>
  <section class="section-list">
    <div class="section-list-header">
      <h2>İzin Bedel Oranı Listesi</h2>
      <div class="section-list-header-buttons">
        <button class="button-c button-add" @click="izinBedelOraniStore.NewForm()">
          <i class="ico-c">
            <svg width="16" height="16">
              <use href="@/assets/images/icons.svg#plus"></use>
            </svg>
          </i>
          Yeni İzin Bedel Oranı Ekle
        </button>
      </div>
    </div>
    
    <list-table-content
      v-if="izinBedelOraniService.loaded"
      :tableHeader="tableHeader"
      :rowAction="EditIzinBedelOrani"
      icon="draws"
      title="İzin Bedel Oranları"
      listText="İzin Bedel Oranı"
      :apiList="'IzinBedelOrani'"
      apiText="İzin Bedel Oranı Listesi" />
  </section>
</template>
<script setup lang="ts">
  import { ref, computed, onBeforeMount } from 'vue'
  import { useIzinBedelOraniStore } from '../store/izinBedelOraniStore'
  import { useIzinBedelOraniService } from '../service/izinBedelOraniService'

  const izinBedelOraniStore = useIzinBedelOraniStore()
  const izinBedelOraniService = useIzinBedelOraniService()

  const tableHeader = ref<Record<string, any>[]>(
     [
      {
        name: 'id',
        title: 'ID',
        sort: true,
        style: { width: '8%' }
      },
      {
        name: 'ad',
        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>`
          }
        }
      },
      {
        name: 'actions',
        title: 'İşlemler',
        style: { width: '15%' },
        computeHtml: (v: Record<string, any>): string => {
          let actions = `<button class="button-c button-edit" onclick="window.editIzinBedelOrani(${v.id})">
            <i class="ico-c">
              <svg width="14" height="14">
                <use href="@/assets/images/icons.svg#edit"></use>
              </svg>
            </i>
            Düzenle
          </button> `
          return actions
        }
      }
    ]
  )

  const EditIzinBedelOrani = (row: any) => {
    izinBedelOraniStore.EditForm(row)
  }

  onBeforeMount(async () => {
    await izinBedelOraniService.GetIzinBedelOraniList()
    izinBedelOraniService.loaded = true
  })
</script>
