<template>
  <div :class="['form-part', formChanged ? 'changed' : '']">
    <div class="form-part-title">
      <h4>Üye Bilgileri</h4>
      <div class="form-part-title-buttons" v-if="!isPreview">
        <button @click="SendChangeRequest" v-if="usersStore.selectedUserApproveId === 4 && !usersStore.isPanelUser">
          Değişiklik Talebi Gönder
        </button>
        <button @click="OpenPreviewPanel" v-if="loaded">Önizleme</button>
      </div>
    </div>
    <div class="form-part-content form-part-display" v-if="loaded">
      <user-approve-states v-if="!isPreview" />

      <div class="form-item back-grad back-grad-grey">{{ formData.basvuruTipi }}</div>
      <form-display half v-model="formData.email" label="E-posta adresi" />
      <form-display half v-model="formData.telefonNumarasi" label="Telefon Numarası" />

      <template v-if="formData.basvuruTipId === 18">
        <form-display half v-model="formData.gercekAdi" label="Ad" />
        <form-display half v-model="formData.gercekSoyadi" label="Soyadı" />
        <form-display half v-model="formData.gercekTCKN" label="TCKN" />
        <form-display half v-model="formData.gercekVergiDairesi" label="Vergi Dairesi" />
        <form-display half v-model="formData.gercekVergiNo" label="Vergi No" />
        <form-display
          half
          v-model="formData.gercekOdaKayitNo"
          label="Oda Kayıt No/ Ticaret Sicil No" />
        <form-display half v-model="formData.gercekTicariUnvan" label="Ticari Ünvan" />
      </template>

      <template v-if="formData.basvuruTipId === 21">
        <form-display v-model="formData.tuzelUnvan" label="Ünvan" />
        <form-display half v-model="formData.tuzelVergiDairesi" label="Vergi Dairesi" />
        <form-display half v-model="formData.tuzelVergiNo" label="Vergi No" />
        <form-display half v-model="formData.tuzelSicilNo" label="Sicil No" />
        <div class="form-item form-item-half"></div>
      </template>

      <template v-if="formData.basvuruTipId === 22">
        <form-display v-model="formData.dernekUnvan" label="Ünvan" />
        <form-display half v-model="formData.dernekVergiDairesi" label="Vergi Dairesi" />
        <form-display half v-model="formData.dernekVergiNo" label="Vergi No" />
        <form-display half v-model="formData.dernekSicilNo" label="Sicil No" />
        <div class="form-item form-item-half"></div>
      </template>

      <template v-if="formData.basvuruTipId === 23">
        <form-display v-model="formData.sirketUnvan" label="Ünvan" />
        <form-display half v-model="formData.sirketVergiDairesi" label="Vergi Dairesi" />
        <form-display half v-model="formData.sirketVergiNo" label="Vergi No" />
        <form-display half v-model="formData.sirketSicilNo" label="Sicil No" />
        <form-display half v-model="formData.sirketMersis" label="Mersis No" />
      </template>

      <template v-if="formData.basvuruTipId === 26">
        <form-display v-model="formData.kamuUnvan" label="Ünvan" />
        <form-display half v-model="formData.kamuVergiDairesi" label="Vergi Dairesi" />
        <form-display half v-model="formData.kamuVergiNo" label="Vergi No" />
        <form-display half v-model="formData.kamuSicilNo" label="Sicil No" />
        <div class="form-item form-item-half"></div>
      </template>

      <form-display label="İl" half v-model="formData.il" />
      <form-display label="İlçe" half v-model="formData.ilce" />
      <form-display label="Mahalle" half v-model="formData.mahalle" />
      <form-display half v-model="formData.postaKodu" label="Posta Kodu" />
      <form-display v-model="formData.internetSitesi" label="İnternet Sitesi" />
      <form-display v-model="formData.adres" label="Adres" />
    </div>
  </div>
  <panel-wrapper
    wide
    v-if="previewPanel"
    v-model="previewPanel"
    panel-title="Üye Bilgileri Önizleme">
    <template #panelContent>
      <panel-uye-onizleme v-model:id="previewId" />
    </template>
    <template #footerButton>
      <div class="button-c button-save" @click="DownloadPDF">PDF İndir</div>
      <div class="button-c button-save" @click="PrintContent">Yazdır</div>
    </template>
  </panel-wrapper>
</template>
<script setup lang="ts">
  import { ref, reactive, onBeforeMount, computed } from 'vue'
  import { usePDF } from 'vue3-pdfmake'

  import PanelUyeOnizleme from '../panel/PanelUyeOnizleme.vue'
  import PanelWrapper from '@/components/PanelWrapper.vue'
  import UserApproveStates from '../content/UserApproveStates.vue'

  import { useRoute } from 'vue-router'
  const route = useRoute()
  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()
  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  import { usePreviewStore } from '@/stores/previewStore'
  const previewStore = usePreviewStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { useCustomerStore } from '../../stores/customerStore'
  const customerStore = useCustomerStore()

  export interface Props {
    isPreview?: boolean
  }

  const props = withDefaults(defineProps<Props>(), { isPreview: false })

  const loaded = ref<boolean>(false)
  const formChanged = ref<boolean>(false)
  const previewPanel = ref<boolean>(false)
  const previewId = ref<number>(0)
  const changeRequestForm = reactive<Record<string, any>>({
    onayDurumuIslemTipiId: 7,
    aciklama: '',
    file: ''
  })

  const UyeId = (): string => {
    if (route.name === 'Profil') {
      return String(usersStore.userId)
    } else {
      if (route.name === 'UyeYetkiliDetay') return String(route.params.altUyeId)
      else return String(route.params.uyeId)
    }
  }

  const formData = reactive<Record<string, any>>({
    basvuruTipi: '',
    gercekAdi: '',
    gercekSoyadi: '',
    gercekTCKN: '',
    gercekTicariUnvan: '',
    tuzelUnvan: '',
    tuzelVergiDairesi: '',
    tuzelVergiNo: '',
    tuzelSicilNo: '',
    dernekUnvan: '',
    dernekVergiDairesi: '',
    dernekVergiNo: '',
    dernekSicilNo: '',
    sirketUnvan: '',
    sirketVergiDairesi: '',
    sirketVergiNo: '',
    sirketSicilNo: '',
    sirketMersis: '',
    kamuUnvan: '',
    kamuVergiDairesi: '',
    kamuVergiNo: '',
    kamuSicilNo: '',
    email: '',
    telefonNumarasi: '',
    ilId: '',
    ilceId: '',
    mahalleId: '',
    postaKodu: '',
    adres: '',
    internetSitesi: '',
    islemTipi: null,
    aciklama: '',
    parentUserId: null
  })

  const GetData = async () => {
    let data: Record<string, any> | any = await dataStore.dataGet(
      'Auth/userbyuserid/' + UyeId()
    )
    if (data !== 'errorfalse') {
      Object.assign(formData, data)
      usersStore.userMail = data.email
      globalStore.selCustomerType = formData.basvuruTipId
      loaded.value = true
    }
  }

  const SendChangeRequest = async () => {
    let form: any
    let dataForm = new FormData()
    dataForm.append('onayDurumuIslemTipiId', changeRequestForm.onayDurumuIslemTipiId)
    dataForm.append('appUserId', String(usersStore.selectedUserId()))
    dataForm.append('onaylayanKisiId', String(usersStore.userId))
    dataForm.append('file', changeRequestForm.file)
    dataForm.append('aciklama', changeRequestForm.aciklama)
    form = await dataStore.dataPost('AppUserOnayDurum/', {
      data: dataForm,
      headers: { 'Content-Type': 'multipart/form-data' },
      toast: { toast: 'Değişiklik başvuruişleminiz başarıyla iletildi.', type: 'success' }
    })

    if (form !== 'errorfalse') {
      if (route.name === 'UyeDetay')
        usersStore.userApproveId = changeRequestForm.onayDurumuIslemTipiId
      else usersStore.userSubApproveId = changeRequestForm.onayDurumuIslemTipiId
    }
  }
  const OpenPreviewPanel = () => {
    previewPanel.value = true
  }

  const pdfmake = usePDF()
  const DownloadPDF = async () => {
    var pdfData: string = document.querySelector('.pdf-content')?.outerHTML || ''
    previewStore.CreatePdfFromHtml(pdfmake, pdfData)
  }

  const PrintContent = () => {
    previewStore.PrintContent(previewId.value)
  }

  onBeforeMount(async () => {
    await dataStore.GetCustomerTipList()
    await dataStore.GetIlList()
    await GetData()
  })
</script>
