<template>
  <div
    :class="['form-part', izinBedelOraniValidationStore.formChanged ? 'changed' : '']">
    <div class="form-part-title">
      <h4>{{ izinBedelOraniStore.isNew ? 'Yeni İzin Bedel Oranı' : 'İzin Bedel Oranı Düzenle' }}</h4>
      <div class="form-part-title-buttons"></div>
    </div>
    <div class="form-part-content">
      <form-input
        required
        half
        modelKey="ad"
        v-model="izinBedelOraniStore.izinBedelOraniForm.ad"
        :invalidText="izinBedelOraniValidationStore.invalidTexts.ad"
        label="Ad"
        maxlength="100"
        @keyup="OnKeyup" />
      <form-input
        required
        half
        modelKey="oran"
        v-model="izinBedelOraniStore.izinBedelOraniForm.oran"
        :invalidText="izinBedelOraniValidationStore.invalidTexts.oran"
        label="Oran (%)"
        maxlength="3"
        @keydown="validationStore.allowNumbersWithKeys"
        description="1-100 arasında bir rakam giriniz"
        @keyup="OnKeyup" />
      <form-textarea
        required
        modelKey="aciklama"
        v-model="izinBedelOraniStore.izinBedelOraniForm.aciklama"
        :invalidText="izinBedelOraniValidationStore.invalidTexts.aciklama"
        label="Açıklama"
        maxlength="500"
        rows="4"
        @keyup="OnKeyup" />
      <form-checkbox
        modelKey="aktif"
        v-model="izinBedelOraniStore.izinBedelOraniForm.aktif"
        label="Aktif"
        @change="OnKeyup" />
      <div
        class="form-item"
        v-if="izinBedelOraniStore.isNew || izinBedelOraniValidationStore.formChanged">
        <button
          class="button-c button-save"
          @click="izinBedelOraniService.SaveIzinBedelOrani">
          {{ izinBedelOraniStore.isNew ? 'Kaydet' : 'Güncelle' }}
        </button>
        <button 
          class="button-c button-cancel" 
          @click="CancelForm" 
          v-if="izinBedelOraniValidationStore.formChanged">
          Vazgeç
        </button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onBeforeMount } from 'vue'
  import { useValidationStore } from '@/stores/validationStore'
  const validationStore = useValidationStore()
  import { useIzinBedelOraniStore } from '../../store/izinBedelOraniStore'
  const izinBedelOraniStore = useIzinBedelOraniStore()
  import { useIzinBedelOraniValidationStore } from '../../validation/izinBedelOraniValidationStore'
  const izinBedelOraniValidationStore = useIzinBedelOraniValidationStore()
  import { useIzinBedelOraniService } from '../../service/izinBedelOraniService'
  const izinBedelOraniService = useIzinBedelOraniService()

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

  const CancelForm = () => {
    if (izinBedelOraniStore.isNew) {
      izinBedelOraniStore.isNew = false
    } else {
      izinBedelOraniStore.RestoreData()
      izinBedelOraniValidationStore.formChanged = false
    }
  }

  onBeforeMount(() => {
    if (izinBedelOraniStore.isNew) {
      izinBedelOraniStore.ResetForm()
    }
  })
</script>
