<template>
  <div class="form-part-content" v-if="piyangoOnayStore.onayPanelLoaded">
    <form-select
      label="İşlem"
      :listData="piyangoDataStore.piyangoOnayDurumlari"
      listText="tipAdi"
      listVal="islemId"
      v-model="piyangoOnayStore.piyangoPanelOnayForm.onayDurumuIslemTipiId"
      required
      :invalidText="piyangoOnayValidationStore.invalidTextsPanel.onayDurumuIslemTipiId">
      <template #option="{ optionData }">
        <span 
          v-if="optionData && optionData.tipAdi" 
          class="islem-status-badge" 
          :class="piyangoStore.GetIslemStatusClass(optionData.tipAdi)">
          {{ optionData.tipAdi }}
        </span>
        <span v-else>{{ optionData?.tipAdi || optionData }}</span>
      </template>
      <template #activator="{ activatorData }">
        <span 
          v-if="activatorData && activatorData.tipAdi" 
          class="islem-status-badge" 
          :class="piyangoStore.GetIslemStatusClass(activatorData.tipAdi)">
          {{ activatorData.tipAdi }}
        </span>
        <span v-else>Lütfen Seçim Yapınız</span>
      </template>
    </form-select>
    <template v-if="showIzinFields">
      <form-date
        type="date"
        required
        modelKey="izinTarihi"
        v-model="piyangoOnayStore.piyangoPanelOnayForm.izinTarihi"
        label="İzin Tarihi"
        :invalidText="piyangoOnayValidationStore.invalidTextsPanel.izinTarihi"
        @change="OnKeyup" />
      <form-input
        modelKey="izinSayisi"
        v-model="piyangoOnayStore.piyangoPanelOnayForm.izinSayisi"
        required
        label="İzin Sayısı"
        placeholder="İzin Sayısı"
        :invalidText="piyangoOnayValidationStore.invalidTextsPanel.izinSayisi"
        @keyup="OnKeyup" />
      <form-textarea
        v-model="piyangoOnayStore.piyangoPanelOnayForm.izinAciklamasi"
        :invalidText="piyangoOnayValidationStore.invalidTextsPanel.izinAciklamasi"
        label="İzin Açıklaması"
        @keyup="OnKeyup" />
    </template>
    <form-select
      v-if="showIzinVerildiFields || showMudurlukFields"
      label="Müdürlük"
      :listData="mudurlukListesi"
      listText="name"
      listVal="id"
      v-model="piyangoOnayStore.piyangoPanelOnayForm.mudurlukId"
      required
      :invalidText="piyangoOnayValidationStore.invalidTextsPanel.mudurlukId"
      @change="OnKeyup" />
    <form-select
      v-if="showIzinVerildiFields"
      label="Çekiliş Görevlisi"
      :listData="cekilisGorevlisiListesi"
      listText="name"
      listVal="id"
      v-model="piyangoOnayStore.piyangoPanelOnayForm.cekilisGorevlisiId"
      required
      :invalidText="piyangoOnayValidationStore.invalidTextsPanel.cekilisGorevlisiId"
      @change="OnKeyup" />
    <form-select
      v-if="showKapsamDisiSebebi"
      label="Kapsam Dışı Sebebi"
      :listData="kapsamDisiSebepListesi"
      listText="name"
      listVal="id"
      v-model="piyangoOnayStore.piyangoPanelOnayForm.kapsamDisiSebebi"
      required
      :invalidText="piyangoOnayValidationStore.invalidTextsPanel.kapsamDisiSebebi"
      @change="OnKeyup" />
    <form-file
      v-model="piyangoOnayStore.piyangoPanelOnayForm.file"
      elclass="panel-documents-item"
      :invalidText="piyangoOnayValidationStore.invalidTextsPanel.file" />
    <form-textarea
      v-model="piyangoOnayStore.piyangoPanelOnayForm.aciklama"
      :invalidText="piyangoOnayValidationStore.invalidTextsPanel.aciklama"
      label="Açıklama"
      @keyup="OnKeyup" />
  </div>
</template>
<script setup lang="ts">
  import { onBeforeMount, computed, ref } from 'vue'
  import { usePiyangoOnayStore } from '../../stores/piyangoOnayStore'
  const piyangoOnayStore = usePiyangoOnayStore()
  import { usePiyangoOnayValidationStore } from '../../validation/piyangoOnayValidationStore'
  const piyangoOnayValidationStore = usePiyangoOnayValidationStore()
  import { usePiyangoDataStore } from '../../stores/piyangoDataStore'
  const piyangoDataStore = usePiyangoDataStore()
  import { usePiyangoServices } from '../../service/piyangoServices'
  const piyangoServices = usePiyangoServices()
  import { usePiyangoStore } from '../../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()

  const kapsamDisiId = computed<number | null>(() => {
    const kapsamDisi = piyangoDataStore.piyangoOnayDurumlari.find(
      (item: Record<string, any>) => item.tipAdi === 'Kapsam Dışı'
    )
    return kapsamDisi ? kapsamDisi.islemId : null
  })

  const showIzinFields = computed<boolean>(() => {
    return (
      piyangoOnayStore.piyangoPanelOnayForm.onayDurumuIslemTipiId === 4 ||
      piyangoOnayStore.piyangoPanelOnayForm.onayDurumuIslemTipiId === kapsamDisiId.value
    )
  })

  const showIzinVerildiFields = computed<boolean>(() => {
    return piyangoOnayStore.piyangoPanelOnayForm.onayDurumuIslemTipiId === 4
  })

  const showMudurlukFields = computed<boolean>(() => {
    return piyangoOnayStore.piyangoPanelOnayForm.onayDurumuIslemTipiId === kapsamDisiId.value
  })

  const showKapsamDisiSebebi = computed<boolean>(() => {
    return piyangoOnayStore.piyangoPanelOnayForm.onayDurumuIslemTipiId === kapsamDisiId.value
  })

  const kapsamDisiSebepListesi = ref<Record<string, any>[]>([
    { id: '2/a', name: '2/a' },
    { id: '2/b', name: '2/b' },
    { id: '2/c', name: '2/c' },
    { id: '2/ç', name: '2/ç' },
    { id: '2/d', name: '2/d' },
    { id: '2/e', name: '2/e' },
    { id: '2/f', name: '2/f' },
    { id: '2/g', name: '2/g' },
    { id: 'Diğer', name: 'Diğer' }
  ])

  const cekilisGorevlisiListesi = ref<Record<string, any>[]>([
    { id: 1, name: 'Antalya Şube Müdürlüğü' },
    { id: 2, name: 'Gaziantep Şube Müdürlüğü' },
    { id: 3, name: 'Aksaray Şube Müdürlüğü' },
    { id: 4, name: 'Kadıköy Şube Müdürlüğü' },
    { id: 5, name: 'Karşıyaka Şube Müdürlüğü' },
    { id: 6, name: 'Muğla Şube Müdürlüğü' },
    { id: 7, name: 'Trabzon Şube Müdürlüğü' },
    { id: 8, name: 'Noter' },
    { id: 9, name: 'Başkanlık Personeli' }
  ])

  const mudurlukListesi = ref<Record<string, any>[]>([
    { id: 1, name: '1 No\'lu Özel Çekilişler İzin ve Takip Şubesi Müdürlüğü' },
    { id: 2, name: '2 No\'lu Özel Çekilişler İzin ve Takip Şubesi Müdürlüğü' },
    { id: 3, name: '3 No\'lu Özel Çekilişler İzin ve Takip Şubesi Müdürlüğü' }
  ])

  const OnKeyup = () => {
    piyangoOnayValidationStore.formChanged = true
  }

  onBeforeMount(async () => {
    await piyangoServices.GetPiyangoOnayDurumList()
    piyangoDataStore.RemoveOnayDurumIncelemeBekleniyor()
    piyangoOnayStore.onayPanelLoaded = true
  })
</script>
