<template>
  <list-table-content
    :tableHeader="tableHeader"
    apiList="Birim"
    icon="draws"
    listText="Birim"
    title="Kullanıcı Birimleri"
    :addAction="NewBirim"
    :rowAction="EditBirim"
    v-model:refresh="appUserUnitStore.refreshList" />
  <panel-wrapper
    v-if="appUserUnitStore.unitPanel"
    v-model="appUserUnitStore.unitPanel"
    :panel-title="appUserUnitStore.isUpdate ? 'Birim Düzenle' : 'Birim Ekle'">
    <template #panelContent>
      <panel-kullanici-birim />
    </template>
    <template #footerButton>
      <div class="button-c button-save" @click="appUserUnitService.SaveUnit">
        {{ appUserUnitStore.isUpdate ? 'Kaydet' : 'Ekle' }}
      </div>
    </template>
  </panel-wrapper>
</template>
<script setup lang="ts">
  import { ref } from 'vue'

  import { useAppUserUnitStore } from '../../stores/appUserUnitStore'
  const appUserUnitStore = useAppUserUnitStore()
  import { useAppUserUnitService } from '../../service/appUserUnitService'
  const appUserUnitService = useAppUserUnitService()

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

  const tableHeader = ref<Record<string, any>[]>([
    {
      name: 'birimAdi',
      title: 'Kullanıcı Birimleri',
      sort: true
    }
  ])

  const NewBirim = () => {
    appUserUnitStore.ResetForm()
    appUserUnitStore.isUpdate = false
    appUserUnitStore.unitPanel = true
  }

  const EditBirim = (d: Record<string, any>) => {
    Object.assign(appUserUnitStore.appUserUnitForm, d)
    appUserUnitStore.unitPanel = true
    appUserUnitStore.isUpdate = true
  }
</script>
