<template>
  <list-table-content
    :tableHeader="tableHeader"
    apiList="KullaniciGorevi"
    icon="draws"
    listText="Görev"
    title="Kullanıcı Görevleri"
    :addAction="NewGorev"
    :rowAction="EditGorev"
    v-model:refresh="appUserRoleStore.refreshList" />
  <panel-wrapper
    v-if="appUserRoleStore.rolePanel"
    v-model="appUserRoleStore.rolePanel"
    :panel-title="appUserRoleStore.isUpdate ? 'Görevi Düzenle' : 'Görev Ekle'">
    <template #panelContent>
      <panel-kullanici-gorev />
    </template>
    <template #footerButton>
      <div class="button-c button-save" @click="appUserRoleService.SaveRole">
        {{ appUserRoleStore.isUpdate ? 'Kaydet' : 'Ekle' }}
      </div>
    </template>
  </panel-wrapper>
</template>
<script setup lang="ts">
  import { ref } from 'vue'

  import { useAppUserRoleStore } from '../../stores/appUserRoleStore'
  const appUserRoleStore = useAppUserRoleStore()
  import { useAppUserRoleService } from '../../service/appUserRoleService'
  const appUserRoleService = useAppUserRoleService()

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

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

  const NewGorev = () => {
    appUserRoleStore.ResetForm()
    appUserRoleStore.rolePanel = true
  }
  const EditGorev = (d: Record<string, any>) => {
    appUserRoleStore.isUpdate = true
    Object.assign(appUserRoleStore.appUserRoleForm, d)
    appUserRoleStore.rolePanel = true
  }
</script>
