<template>
  <div
    :class="['form-part', muhasebeSettingsValidationStore.formChanged ? 'changed' : '']">
    <div class="form-part-title">
      <h4>Ayarlar</h4>
      <div class="form-part-title-buttons"></div>
    </div>
    <div class="form-part-content" v-if="muhasebeSettingsService.loaded">
      <form-input
        required
        half
        modelKey="basvuruBedeli"
        v-model="muhasebeSettingsStore.muhasebeSettingsForm.basvuruBedeli"
        :invalidText="muhasebeSettingsValidationStore.invalidTexts.basvuruBedeli"
        label="Başvuru Bedeli"
        @keydown="validationStore.allowPrice"
        @keyup="OnKeyup" />
      <form-input
        required
        half
        modelKey="basvuruBedeliKdvOrani"
        v-model="muhasebeSettingsStore.muhasebeSettingsForm.basvuruBedeliKdvOrani"
        :invalidText="muhasebeSettingsValidationStore.invalidTexts.BasvuruBedeliKdvOrani"
        label="Başvuru Bedeli KDV Oranı"
        @keydown="validationStore.allowPrice"
        @keyup="OnKeyup" />
      <form-input
        required
        half
        modelKey="kurumBanka"
        v-model="muhasebeSettingsStore.muhasebeSettingsForm.kurumBanka"
        :invalidText="muhasebeSettingsValidationStore.invalidTexts.kurumBanka"
        label="Banka"
        @keyup="OnKeyup" />
      <form-input
        required
        half
        modelKey="kurumBankaSube"
        v-model="muhasebeSettingsStore.muhasebeSettingsForm.kurumBankaSube"
        :invalidText="muhasebeSettingsValidationStore.invalidTexts.kurumBankaSube"
        label="Banka Şubesi"
        @keyup="OnKeyup" />
      <form-input
        required
        half
        modelKey="kurumIBAN"
        v-model="muhasebeSettingsStore.muhasebeSettingsForm.kurumIBAN"
        :invalidText="muhasebeSettingsValidationStore.invalidTexts.kurumIBAN"
        label="IBAN"
        @keyup="OnKeyup" />
      <div
        class="form-item"
        v-if="muhasebeSettingsStore.isNew || muhasebeSettingsValidationStore.formChanged">
        <button
          class="button-c button-save"
          @click="muhasebeSettingsService.SaveMuhasebeSettings">
          Kaydet
        </button>
        <button
          class="button-c button-cancel"
          @click="muhasebeSettingsStore.RestoreData"
          v-if="muhasebeSettingsValidationStore.formChanged">
          Vazgeç
        </button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onBeforeMount } from 'vue'

  import { useValidationStore } from '@/stores/validationStore'
  const validationStore = useValidationStore()
  import { useMuhasebeSettingsStore } from '../../store/muhasebeSettingsStore'
  const muhasebeSettingsStore = useMuhasebeSettingsStore()
  import { useMuhasebeSettingsValidationStore } from '../../validation/muhasebeSettingsValidationStore'
  const muhasebeSettingsValidationStore = useMuhasebeSettingsValidationStore()
  import { useMuhasebeSettingsService } from '../../service/muhasebeSettingsService'
  const muhasebeSettingsService = useMuhasebeSettingsService()

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

  onBeforeMount(async () => {
    await muhasebeSettingsService.GetMuhasebeSettings()
    muhasebeSettingsService.loaded = true
  })
</script>
