<template>
  <section class="section-list">
    <list-table-content
      :tableHeader="tableHeader"
      icon="draws"
      title="Talihli Listesi"
      listText="Talihli"
      :apiList="'Katilimci/AsilYedek/' + piyangoStore.selectedLottery"
      v-model:refresh='refreshList'
      isUseRoute
    >
      <template #extraButtons>
        <a href='/data/ornek-talihli-listesi.xlsx' target='_blank' class='button-c' v-if='piyangoStore.lotteryData.cekilisYontemi =="Fiziksel"'>
          Örnek Talihli Dosyası İndir
        </a>
        <button
          class='button-c'
          @click='AddNewDocument'
          v-if='!usersStore.isPanelUser && !piyangoStore.lotteryDrawState && piyangoStore.lotteryData.cekilisYontemi =="Fiziksel"'>
          Talihli Dosyası Yükle
        </button>
      </template>
    </list-table-content>
    <panel-wrapper
      v-if='talihliFilePanel'
      v-model='talihliFilePanel'
      panel-title='Talihli Dosyası Yükle'>
      <template #panelContent>
        <panel-talihli-document />
      </template>
      <template #footerButton>
        <button class='button-c button-save' @click='FileUpload'>Yükle</button>
      </template>
    </panel-wrapper>
    <panel-wrapper
      v-if="uploadProgressPanel"
      v-model="uploadProgressPanel"
      panel-title="Yükleme Durumu">
      <template #panelContent>
        <div class="progress-container">
          <div class="upload-warning">
            📌 İşlem sırasında tarayıcıyı veya bu sekmeyi kapatmayınız.
          </div>
          <div class="progress-bar">
            <div
              class="progress-fill"
              :style="{ width: uploadProgressValue + '%' }"
            ></div>
          </div>
          <div class="progress-text">
            <template v-if="uploadProgressValue === 0">
              Dosya içeriği okunuyor, yükleme başlatılıyor...
            </template>
            <template v-else>
              {{ uploadProgressValue }}%
            </template>
          </div>
        </div>
      </template>
    </panel-wrapper>
  </section>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()

  import { usePiyangoStore } from '../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()

  import { useUsersStore } from '@/stores/usersStore'
  import PanelWrapper from '@/components/PanelWrapper.vue'
  import PanelTalihliDocument from '@/module/cekilisler/components/panel/PanelTalihliDocument.vue'
  import { connectToHub, onCompleted, onProgress } from '@/module/cekilisler/service/signalrService'
  const usersStore = useUsersStore()
  const tableHeader = ref<Record<string, any>>([
    {
      name: 'cekilisKatilimSiraNo',
      title: 'Çekiliş Katılım Sıra No',
      sort: true,
      style: { width: '20%' }
    },
    {
      name: 'cekilisHakkiAdedi',
      title: 'Çekiliş Hakkı Adedi',
      style: { width: '10%' }
    },

    {
      name: 'sifreCode',
      title: 'Şifre (Code)',
      sort: true,
      style: { width: '20%' }
    },
    {
      name: 'magazaKartNumarasi',
      title: '(Mağaza Kartı)  (Müşteri Kartı) Numarası',
      sort: true,
      style: { width: '20%' }
    },
    {
      name: 'isimSoyisim',
      title: 'Ad Soyad',
      sort: true,
      style: { width: '20%' }
    },{
      name: 'ikramiye',
      title: 'İkramiyesi'
    },{
      name: '',
      title: 'Talihli',
      computeHtml: (v: Record<string, any>) => {
        if (v.asilTalihli)
          return `<span class="back-grad back-grad-ok">${v.talihliSira !== undefined && v.talihliSira !== null ? v.talihliSira+'.' : ''} Asıl Talihli </span>`
        if (v.yedekTalihli)
          return `<span class="back-grad back-grad-waiting">${v.talihliSira !== undefined && v.talihliSira !== null ? v.talihliSira+'.' : ''} Yedek Talihli </span>`
      },
      style: { width: '15%' }
    },

    {
      name: 'telefonNumarasi',
      title: 'Telefon',
      sort: true
    },
    {
      name: 'ilce',
      title: 'İlçe',
      sort: true
    },
    {
      name: 'il',
      title: 'İl',
      sort: true
    },
    {
      name: 'email',
      title: 'Email',
      sort: true,
      style: { width: '15%' }
    },{
      name: 'katilimTarihi',
      title: 'Katılım Tarihi',
      sort: true,
      style: { width: '15%' }
    },
    {
      name: 'fisFaturaTarihi',
      title: 'Fiş/Fatura Tarihi',
      sort: true,
      style: { width: '15%' }
    },
    {
      name: 'fisFaturaNo',
      title: 'Fiş/Fatura No',
      sort: true,
      style: { width: '15%' }
    },
    {
      name: 'kampanyaliUrunTutari',
      title: 'Fiş/Fatura (Kampanyalı Ürün Tutarı)',
      sort: true,
      style: { width: '15%' }
    },
    {
      name: 'toplamTutar',
      title: 'Fiş/Fatura  Toplam Tutarı',
      sort: true,
      style: { width: '15%' }
    },

    {
      name: 'magazaAdiYeri',
      title: 'Mağaza Adı/Yeri',
      sort: true,
      style: { width: '15%' }
    }
  ])
  const talihliFilePanel = ref<boolean>(false)
  const refreshList = ref<boolean>(false)
  const uploadProgressPanel = ref<boolean>(false)
  const uploadProgressValue = ref(0)


  import { usePiyangoTalihliStore } from '../stores/piyangoTalihliStore'

  const piyangoTalihliStore = usePiyangoTalihliStore()
  import { usePiyangoKatilimciValidationStore } from '../validation/piyangoKatilimciValidationStore'

  const piyangoKatilimciValidationStore = usePiyangoKatilimciValidationStore()
  const AddNewDocument = () => {
    dataStore.panelData = {
      title: '',
      file: ''
    }
    talihliFilePanel.value = true
  }
  const FileUpload = async () => {
    // const connectionId = await connectToHub()

    // Progress modal'ı aç
    uploadProgressValue.value = 0
    uploadProgressPanel.value = true

    // onProgress((data) => {
    //   uploadProgressValue.value = data.Percent
    //   console.log('Progress:', data.Percent)
    // })
    //
    // onCompleted((data) => {
    //   console.log('Tamamlandı:', data)
    //   uploadProgressPanel.value = false
    //   refreshList.value = true
    //   talihliFilePanel.value = false
    // })

    const formData = new FormData()
    formData.append('file', piyangoTalihliStore.piyangoTalihliFileFormData.excelFile)
    console.log( dataStore.panelData)
    const response = await dataStore.dataPost(
      `Katilimci/talihli-yukle/${piyangoStore.selectedLottery}`,
      {
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' }
      }
    )

    if (response.data !== 'errorfalse') {
         uploadProgressPanel.value = false
         refreshList.value = true
         talihliFilePanel.value = false
    } else {
      // Hata olursa paneli kapat
      uploadProgressPanel.value = false
    }
  }
</script>
