<template>
  <div :class="['form-part']" id="display-yardimamacli">
    <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.isFormValid ? 'invalid' : ''
          ]">
          <thead>
            <tr>
              <th>
                <div class="table-head-content">
                  <span></span>
                </div>
              </th>
              <th>
                <div class="table-head-content">
                  <span>Başlangıç Numarası</span>
                </div>
              </th>
              <th>
                <div class="table-head-content">
                  <span>Bitiş Numarası</span>
                </div>
              </th>
              <th>
                <div class="table-head-content">
                  <span>Basılacak Adet</span>
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(rakam, i) in piyangoYardimAmacliStore.yardimAmacliRakamlar">
              <tr
                v-if="
                  piyangoYardimAmacliStore.piyangoYardimAmacliFormData[
                    rakam.prefix + 'RakamBaslangic'
                  ] !== null &&
                  piyangoYardimAmacliStore.piyangoYardimAmacliFormData[
                    rakam.prefix + 'RakamBitis'
                  ] !== null &&
                  piyangoYardimAmacliStore.piyangoYardimAmacliFormData[
                    rakam.prefix + 'RakamAdet'
                  ] !== null
                ">
                <td>{{ rakam.title }}</td>
                <td>
                  <form-display
                    v-model="
                      piyangoYardimAmacliStore.piyangoYardimAmacliFormData[
                        rakam.prefix + 'RakamBaslangic'
                      ]
                    " />
                </td>
                <td>
                  <form-display
                    v-model="
                      piyangoYardimAmacliStore.piyangoYardimAmacliFormData[
                        rakam.prefix + 'RakamBitis'
                      ]
                    " />
                </td>
                <td>
                  <form-display
                    v-model="
                      piyangoYardimAmacliStore.piyangoYardimAmacliFormData[
                        rakam.prefix + 'RakamAdet'
                      ]
                    " />
                </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-inner-comment alert-d"
          v-if="!piyangoYardimAmacliValidationStore.isFormValid">
          <template
            v-for="msg in piyangoYardimAmacliValidationStore.biletInvalidMessages">
            {{ msg }}
            <br />
          </template>
        </div>
      </div>
      <div class="form-item"></div>
      <form-display
        v-model="piyangoYardimAmacliStore.piyangoYardimAmacliFormData.birimSatisFiyati"
        label="Birim Satış Fiyatı (₺)" />
      <form-display
        v-model="piyangoYardimAmacliStore.piyangoYardimAmacliFormData.basimevi"
        label="Basımevinin Adı" />
      <form-display
        v-model="piyangoYardimAmacliStore.piyangoYardimAmacliFormData.basimeviAdresi"
        label="Basımevinin Adresi" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onBeforeMount } from 'vue'

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

  onBeforeMount(async () => {
    await piyangoYardimAmacliService.GetYardimAmacliData()
    piyangoYardimAmacliValidationStore.CheckBiletEmpty()

    if (!piyangoYardimAmacliValidationStore.allBiletInvalid) {
      piyangoYardimAmacliValidationStore.CheckBiletSatir()
    }
  })
</script>
