<template>
  <section class="section-list">
    <list-table-content
      :tableHeader="tableHeader"
      icon="draws"
      title="Teminat Listesi"
      listText="Teminat"
      :rowAction="OpenTeminatDurum"
      :addAction="teminatAddAction"
      :apiList="
        'TeminantStates/GetTeminantStateCekilisList/' + piyangoStore.selectedLottery
      "
      v-model:refresh="piyangoTeminatStore.refreshList" 
      isUseRoute/>
  </section>
  <panel-wrapper
    wide
    v-if="piyangoTeminatStore.teminatPanel"
    v-model="piyangoTeminatStore.teminatPanel"
    :panel-title="piyangoTeminatStore.isNew ? 'Teminat Ekle' : 'Teminat Detayı'">
    <template #panelContent>
      <panel-piyango-teminat-durumu-display
        v-if="
          usersStore.isPanelUser ||
          (!usersStore.isPanelUser &&
            piyangoStore.lotteryApprove !== 0 &&
            piyangoStore.lotteryApprove !== 1 &&
            piyangoStore.lotteryApprove !== 2 &&
            piyangoStore.lotteryApprove !== 3 &&
            !piyangoTeminatStore.isNew)
        " />
      <panel-piyango-teminat-durumu
        v-if="
          !usersStore.isPanelUser &&
          (piyangoStore.lotteryApprove === 0 ||
            piyangoStore.lotteryApprove === 1 ||
            piyangoStore.lotteryApprove === 2 ||
            piyangoStore.lotteryApprove === 3 ||
            piyangoTeminatStore.isNew)
        " />
    </template>
    <template #footerButton>
      <button
        class="button-c button-save"
        :disabled="!piyangoTeminatValidationStore.formChanged"
        @click="piyangoTeminatService.SaveTeminatDurum"
        v-if="
          usersStore.isPanelUser ||
          (!usersStore.isPanelUser &&
            (piyangoStore.lotteryApprove === 0 ||
              piyangoStore.lotteryApprove === 1 ||
              piyangoStore.lotteryApprove === 2 ||
              piyangoStore.lotteryApprove === 3)) ||
          piyangoTeminatStore.isNew
        ">
        Kaydet
      </button>
    </template>
  </panel-wrapper>
</template>
<script setup lang="ts">
  import { ref, computed, onBeforeMount } from 'vue'
  import PanelWrapper from '@/components/PanelWrapper.vue'

  import PanelPiyangoTeminatDurumu from './panel/PanelPiyangoTeminatDurumu.vue'
  import PanelPiyangoTeminatDurumuDisplay from './panel/PanelPiyangoTeminatDurumuDisplay.vue'

  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  import { useDateStore } from '@/stores/dateStore'
  const dateStore = useDateStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { usePiyangoStore } from '../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()
  import { usePiyangoTeminatStore } from '../stores/piyangoTeminatStore'
  const piyangoTeminatStore = usePiyangoTeminatStore()
  import { usePiyangoTeminatService } from '../service/piyangoTeminatService'
  const piyangoTeminatService = usePiyangoTeminatService()
  import { usePiyangoServices } from '../service/piyangoServices'
  const piyangoServices = usePiyangoServices()
  import { usePiyangoTeminatValidationStore } from '../validation/piyangoTeminatValidationStore'
  const piyangoTeminatValidationStore = usePiyangoTeminatValidationStore()

  const tableHeader = ref<Record<string, any>[]>([
    {
      name: 'teminantNo',
      title: 'Teminat No',
      sort: true,
      style: { width: '10%' }
    },
    {
      name: 'teminantDate',
      title: 'Teminat Tarihi',
      sort: true,
      style: { width: '10%' },
      compute: (v: Record<string, any>): string => {
        return dateStore.dateFormat({
          date: v.teminantDate,
          pattern: 'yy-mm-dd',
          splitDate: '-'
        })
      }
    },
    {
      name: 'amount',
      title: 'Tutarı',
      compute: (v: Record<string, any>): string => {
        return globalStore.toTrLocale(v.amount)
      },
      style: { width: '10%' },
      sort: true
    },
    {
      name: 'teminatParentTypeText',
      title: 'Para Birimi',
      style: { width: '5%' },
      sort: true
    },
    {
      name: 'teminantChildTypeText',
      title: 'Teminat Türü',
      style: { width: '10%' }
    },
    {
      name: 'bankName',
      title: 'Banka',
      style: { width: '10%' }
    },
    {
      name: 'bankBranch',
      title: 'Şube'
    },
    {
      name: 'bankBranch',
      title: 'Dosya',
      computeHtml: (v: Record<string, any>) => {
        if (v.teminantDocumentUrl !== null && v.teminantDocumentUrl !== undefined) {
          return globalStore.TableCellDocument(v.teminantDocumentUrl)
        }
      }
    },
    {
      name: '',
      title: 'Teminat Durumu',
      computeHtml: (v: Record<string, any>) => {
        if (v.state === 1) {
          return `<span class='back-grad back-grad-ok'>${v.stateText}</span>`
        }
        if (v.state === 2) {
          return `<span class='back-grad back-grad-alert'>${v.stateText}</span>`
        }
        if (v.state === 3) {
          return `<span class='back-grad back-grad-waiting'>${v.stateText}</span>`
        }
      },
      style: { width: '10%' }
    }
  ])

  const teminatAddAction = computed(() => {
    if (!usersStore.isPanelUser) return NewTeminatDurum
    else return ''
  })

  const NewTeminatDurum = () => {
    piyangoTeminatStore.isNew = true
    piyangoTeminatStore.loaded = false
    piyangoTeminatStore.selectedTeminatId = null
    piyangoTeminatStore.teminatPanel = true
  }

  const OpenTeminatDurum = (row: Record<string, any>) => {
    piyangoTeminatStore.isNew = false
    piyangoTeminatStore.loaded = false
    piyangoTeminatStore.teminatPanel = true
    piyangoTeminatStore.selectedTeminatId = row.id
  }
</script>
