<template>
  <div
    :class="[
      'form-part',
      piyangoYardimAmacliValidationStore.formChanged ? 'changed' : ''
    ]">
    <div class="form-part-title">
      <h4>Yardım Amaçlı Piyango Bilet Bilgileri</h4>
    </div>
    <div class="form-part-content" v-if="piyangoYardimAmacliStore.loaded">
      <div class="list-wrapper">
        <table
          :class="[
            'table-border table-colored table-list',
            piyangoYardimAmacliValidationStore.allBiletInvalid ? 'invalid' : ''
          ]">
          <thead>
            <tr>
              <th style="width:25%;">
                <div class="table-head-content">
                  <span></span>
                </div>
              </th>
              <th style="width:25%;">
                <div class="table-head-content">
                  <span>Başlangıç Numarası</span>
                </div>
              </th>
              <th style="width:25%;">
                <div class="table-head-content">
                  <span>Bitiş Numarası</span>
                </div>
              </th>
              <th style="width:25%;">
                <div class="table-head-content">
                  <span>Basılacak Adet</span>
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(rakam, i) in piyangoYardimAmacliStore.yardimAmacliRakamlar">
              <tr>
                <td>{{ rakam.title }}</td>
                <td>
                  <form-input
                    :modelKey="rakam.prefix + 'RakamBaslangic'"
                    v-model="
                      piyangoYardimAmacliStore.piyangoYardimAmacliFormData[
                        rakam.prefix + 'RakamBaslangic'
                      ]
                    "
                    :invalidText="piyangoYardimAmacliValidationStore.invalidTexts[rakam.prefix + 'RakamBaslangic']"
                    @keyup="piyangoYardimAmacliStore.CalculateToplamBilet(rakam)"
                    @keydown="validationStore.allowNumbersWithKeys"
                    :minlength="rakam.maxl"
                    :maxlength="rakam.maxl" />
                </td>
                <td>
                  <form-input
                    modelKey="ucRakamBitis"
                    v-model="
                      piyangoYardimAmacliStore.piyangoYardimAmacliFormData[
                        rakam.prefix + 'RakamBitis'
                      ]
                    "
                    :invalidText="piyangoYardimAmacliValidationStore.invalidTexts[rakam.prefix + 'RakamBitis']"
                    @keyup="piyangoYardimAmacliStore.CalculateToplamBilet(rakam)"
                    @keydown="validationStore.allowNumbersWithKeys"
                    :maxlength="rakam.maxl"
                    :minlength="rakam.maxl" />
                </td>
                <td>
                  <form-input
                    :modelKey="rakam.prefix + 'RakamAdet'"
                    v-model="
                      piyangoYardimAmacliStore.piyangoYardimAmacliFormData[
                        rakam.prefix + 'RakamAdet'
                      ]
                    "
                    :invalidText="piyangoYardimAmacliValidationStore.invalidTexts[rakam.prefix + 'RakamAdet']"
                    disabled />
                </td>
              </tr>
            </template>
            <tr>
              <td colspan="3" style="text-align:right"><strong>Toplam Basılacak Bilet:</strong></td>
              <td>{{ globalStore.toTrLocale(piyangoYardimAmacliStore.toplamBilet) }}</td>
            </tr>
          </tbody>
        </table>
        <div class="form-item" v-if="piyangoYardimAmacliValidationStore.allBiletInvalid">
          <span class="form-item-alert">En az bir satır bilet bilgisi başlangıç ve bitiş numaraları ile girmelisiniz.</span>
        </div>
      </div>
      <div class="form-item"></div>
      <form-input
        modelKey="birimSatisFiyati"
        v-model="piyangoYardimAmacliStore.piyangoYardimAmacliFormData.birimSatisFiyati"
        required
        label="Birim Satış Fiyatı (₺)"
        :invalidText="piyangoYardimAmacliValidationStore.invalidTexts.birimSatisFiyati"
        @keydown="validationStore.allowNumbersWithKeys"
        @keyup="OnKeyup" />
      <form-input
        modelKey="basimevi"
        v-model="piyangoYardimAmacliStore.piyangoYardimAmacliFormData.basimevi"
        required
        label="Basımevinin Adı"
        :invalidText="piyangoYardimAmacliValidationStore.invalidTexts.basimevi"
        @keyup="OnKeyup" />
      <form-textarea
        modelKey="basimeviAdresi"
        v-model="piyangoYardimAmacliStore.piyangoYardimAmacliFormData.basimeviAdresi"
        required
        label="BasımevininAdresi"
        :invalidText="piyangoYardimAmacliValidationStore.invalidTexts.basimeviAdresi"
        @keyup="OnKeyup" />
      <div class="form-item" v-if="piyangoYardimAmacliValidationStore.formChanged">
        <button class="button-c button-save" @click="piyangoYardimAmacliService.SaveYardimAmacliForm">Kaydet</button>
        <button class="button-c button-cancel" @click="piyangoYardimAmacliStore.ResetFormData">Vazgeç</button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onBeforeMount } from 'vue'

  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  import { useValidationStore } from '@/stores/validationStore'
  const validationStore = useValidationStore()
  import { usePiyangoYardimAmacliStore } from '../../stores/piyangoYardimAmacliStore'
  const piyangoYardimAmacliStore = usePiyangoYardimAmacliStore()
  import { usePiyangoYardimAmacliValidationStore } from '../../validation/piyangoYardimAmacliValidationStore'
  const piyangoYardimAmacliValidationStore = usePiyangoYardimAmacliValidationStore()
  import { usePiyangoYardimAmacliService } from '../../service/piyangoYardimAmacliService'
  const piyangoYardimAmacliService = usePiyangoYardimAmacliService()

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

  onBeforeMount(async () => {
    await piyangoYardimAmacliService.GetYardimAmacliData()
  })
</script>
