<template>
  <div class="form-part form-title" v-if="isNew">
    <div class="form-title-buttons">
      <div class="button-c button-save" @click="SaveData">Kaydet</div>
      <router-link class="button-c button-cancel" to="/profil">Vazgeç</router-link>
    </div>
  </div>
  <div :class="['form-part', uyeBilgileriStore.formChanged ? 'changed' : '']">
    <div class="form-part-title">
      <h4>Üye Bilgileri</h4>
      <div class="form-part-title-buttons">
        <button
          @click="OpenPreviewPanel"
          v-if="
            (route.name === 'Profil' && !usersStore.isPanelUser) ||
            (route.name === 'UyeYetkiliDetay'|| usersStore.selectedUserApproveId === 3) && loaded
          ">
          Önizleme
        </button>
      </div>
    </div>
    <div class="form-part-content" v-if="loaded">
      <user-approve-states v-if="!isPreview && route.name !== 'UyeYetkiliYeni'" />
      <form-select
        v-if="route.name === 'UyeYetkiliYeni' || usersStore.selectedUserApproveId === 3"
        label="Kullanıcı Tipi"
        :listData="yetkiliTipList"
        listText="baslik"
        listVal="id"
        v-model="uyeBilgileriStore.formData.basvuruTipId"
        required
        :invalidText="uyeBilgileriStore.invalidTexts.basvuruTipId"
        @change="uyeBilgileriStore.ChangeKullaniciTipi" />

      <div class="form-item back-grad back-grad-grey" v-else>
        {{ uyeBilgileriStore.formData.basvuruTipi }}
      </div>
      <form-input
        type="email"
        half
        modelKey="email"
        v-model="uyeBilgileriStore.formData.email"
        required
        label="E-posta adresi"
        placeholder="eposta@alanadi.com"
        :invalidText="uyeBilgileriStore.invalidTexts.email" />

      <form-input
        type="tel"
        half
        modelKey="telefonNumarasi"
        v-model="uyeBilgileriStore.formData.telefonNumarasi"
        required
        label="Telefon Numarası"
        placeholder="5554443322"
        @keydown="validationStore.allowNumbersWithKeys"
        @keyup="OnKeyup"
        maxlength="10"
        minlength="10"
        :invalidText="uyeBilgileriStore.invalidTexts.telefonNumarasi" />

      <template v-if="uyeBilgileriStore.formData.basvuruTipId === 18">
        <form-input
          modelKey="gercekAdi"
          half
          v-model="uyeBilgileriStore.formData.gercekAdi"
          required
          label="Ad"
          minlength="2"
          :invalidText="uyeBilgileriStore.invalidTexts.gercekAdi"
          @keydown="validationStore.allowLettersWithKeysExtra($event, /^[ ]*$/)"
          @keyup="OnKeyup" />

        <form-input
          modelKey="gercekSoyadi"
          half
          v-model="uyeBilgileriStore.formData.gercekSoyadi"
          required
          label="Soyadı"
          minlength="2"
          :invalidText="uyeBilgileriStore.invalidTexts.gercekSoyadi"
          @keydown="validationStore.allowLettersWithKeysExtra($event, /^[ ]*$/)"
          @keyup="OnKeyup" />

        <form-input
          modelKey="gercekTCKN"
          half
          v-model="uyeBilgileriStore.formData.gercekTCKN"
          required
          label="TCKN"
          @keydown="validationStore.allowNumbersWithKeys"
          @keyup="OnKeyup"
          maxlength="11"
          minlength="11"
          :invalidText="uyeBilgileriStore.invalidTexts.gercekTCKN" />

        <form-input
          modelKey="gercekVergiDairesi"
          v-model="uyeBilgileriStore.formData.gercekVergiDairesi"
          required
          half
          label="Vergi Dairesi"
          :invalidText="uyeBilgileriStore.invalidTexts.gercekVergiDairesi" />

        <form-input
          modelKey="gercekVergiNo"
          half
          v-model="uyeBilgileriStore.formData.gercekVergiNo"
          required
          label="Vergi No"
          maxlength="10"
          minlength="10"
          :invalidText="uyeBilgileriStore.invalidTexts.gercekVergiNo"
          @keydown="validationStore.allowNumbersWithKeys"
          @keyup="OnKeyup" />

        <form-input
          modelKey="gercekOdaKayitNo"
          half
          v-model="uyeBilgileriStore.formData.gercekOdaKayitNo"
          required
          label="Oda Kayıt No/ Ticaret Sicil No"
          :invalidText="uyeBilgileriStore.invalidTexts.gercekOdaKayitNo"
          @keydown="validationStore.allowNumbersWithKeys"
          @keyup="OnKeyup" />

        <form-input
          modelKey="gercekTicariUnvan"
          half
          v-model="uyeBilgileriStore.formData.gercekTicariUnvan"
          label="Ticari Ünvan"
          :invalidText="uyeBilgileriStore.invalidTexts.gercekTicariUnvan"
          @keyup="OnKeyup" />
      </template>

      <template v-if="uyeBilgileriStore.formData.basvuruTipId === 21">
        <form-input
          modelKey="tuzelUnvan"
          v-model="uyeBilgileriStore.formData.tuzelUnvan"
          required
          label="Ünvan"
          :invalidText="uyeBilgileriStore.invalidTexts.tuzelUnvan"
          @keyup="OnKeyup" />
        <form-input
          modelKey="tuzelVergiDairesi"
          half
          v-model="uyeBilgileriStore.formData.tuzelVergiDairesi"
          required
          label="Vergi Dairesi"
          :invalidText="uyeBilgileriStore.invalidTexts.tuzelVergiDairesi"
          @keyup="OnKeyup" />

        <form-input
          modelKey="tuzelVergiNo"
          half
          v-model="uyeBilgileriStore.formData.tuzelVergiNo"
          required
          label="Vergi No"
          maxlength="11"
          minlength="10"
          :invalidText="uyeBilgileriStore.invalidTexts.tuzelVergiNo"
          @keydown="validationStore.allowNumbersWithKeys"
          @keyup="OnKeyup" />

        <form-input
          modelKey="tuzelSicilNo"
          half
          v-model="uyeBilgileriStore.formData.tuzelSicilNo"
          required
          label="Ticaret Sicil No"
          :invalidText="uyeBilgileriStore.invalidTexts.tuzelSicilNo"
          @keydown="validationStore.allowNumbersWithKeysExtra($event, /^[-]*$/)"
          @keyup="OnKeyup" />
        <div class="form-item form-item-half"></div>
      </template>
      <template v-if="uyeBilgileriStore.formData.basvuruTipId === 22">
        <form-input
          modelKey="dernekUnvan"
          v-model="uyeBilgileriStore.formData.dernekUnvan"
          required
          label="Ünvan"
          :invalidText="uyeBilgileriStore.invalidTexts.dernekUnvan"
          @keyup="OnKeyup" />
        <form-input
          modelKey="dernekVergiDairesi"
          half
          v-model="uyeBilgileriStore.formData.dernekVergiDairesi"
          required
          label="Vergi Dairesi"
          :invalidText="uyeBilgileriStore.invalidTexts.dernekVergiDairesi"
          @keyup="OnKeyup" />

        <form-input
          modelKey="dernekVergiNo"
          half
          v-model="uyeBilgileriStore.formData.dernekVergiNo"
          required
          label="Vergi No"
          maxlength="11"
          minlength="10"
          :invalidText="uyeBilgileriStore.invalidTexts.dernekVergiNo"
          @keydown="validationStore.allowNumbersWithKeys"
          @keyup="OnKeyup" />

        <form-input
          modelKey="dernekSicilNo"
          half
          v-model="uyeBilgileriStore.formData.dernekSicilNo"
          required
          label="Sicil No"
          :invalidText="uyeBilgileriStore.invalidTexts.dernekSicilNo"
          @keydown="validationStore.allowNumbersWithKeysExtra($event, /^[-]*$/)"
          @keyup="OnKeyup" />
        <div class="form-item form-item-half"></div>
      </template>
      <template v-if="uyeBilgileriStore.formData.basvuruTipId === 23">
        <form-input
          modelKey="sirketUnvan"
          v-model="uyeBilgileriStore.formData.sirketUnvan"
          required
          label="Ünvan"
          :invalidText="uyeBilgileriStore.invalidTexts.sirketUnvan"
          @keyup="OnKeyup" />
        <form-input
          modelKey="sirketVergiDairesi"
          half
          v-model="uyeBilgileriStore.formData.sirketVergiDairesi"
          required
          label="Vergi Dairesi"
          :invalidText="uyeBilgileriStore.invalidTexts.sirketVergiDairesi"
          @keyup="OnKeyup" />

        <form-input
          modelKey="sirketVergiNo"
          half
          v-model="uyeBilgileriStore.formData.sirketVergiNo"
          required
          label="Vergi No"
          maxlength="11"
          minlength="10"
          :invalidText="uyeBilgileriStore.invalidTexts.sirketVergiNo"
          @keydown="validationStore.allowNumbersWithKeys"
          @keyup="OnKeyup" />

        <form-input
          modelKey="sirketSicilNo"
          half
          v-model="uyeBilgileriStore.formData.sirketSicilNo"
          required
          label="Ticaret Sicil No"
          :invalidText="uyeBilgileriStore.invalidTexts.sirketSicilNo"
          @keydown="validationStore.allowNumbersWithKeysExtra($event, /^[-]*$/)"
          @keyup="OnKeyup" />

        <form-input
          modelKey="sirketMersis"
          half
          v-model="uyeBilgileriStore.formData.sirketMersis"
          label="Mersis No"
          :invalidText="uyeBilgileriStore.invalidTexts.sirketMersis"
          @keydown="validationStore.allowNumbersWithKeysExtra($event, /^[-]*$/)"
          @keyup="OnKeyup" />
      </template>

      <template v-if="uyeBilgileriStore.formData.basvuruTipId === 26">
        <form-input
          modelKey="kamuUnvan"
          v-model="uyeBilgileriStore.formData.kamuUnvan"
          required
          label="Ünvan"
          :invalidText="uyeBilgileriStore.invalidTexts.kamuUnvan"
          @keyup="OnKeyup" />
        <form-input
          modelKey="kamuVergiDairesi"
          half
          v-model="uyeBilgileriStore.formData.kamuVergiDairesi"
          required
          label="Vergi Dairesi"
          :invalidText="uyeBilgileriStore.invalidTexts.kamuVergiDairesi"
          @keyup="OnKeyup" />

        <form-input
          modelKey="kamuVergiNo"
          half
          v-model="uyeBilgileriStore.formData.kamuVergiNo"
          required
          label="Vergi No"
          maxlength="11"
          minlength="10"
          :invalidText="uyeBilgileriStore.invalidTexts.kamuVergiNo"
          @keydown="validationStore.allowNumbersWithKeys"
          @keyup="OnKeyup" />

        <form-input
          modelKey="kamuSicilNo"
          half
          v-model="uyeBilgileriStore.formData.kamuSicilNo"
          label="Ticaret Sicil No"
          :invalidText="uyeBilgileriStore.invalidTexts.kamuSicilNo"
          @keydown="validationStore.allowNumbersWithKeysExtra($event, /^[-]*$/)"
          @keyup="OnKeyup" />
        <div class="form-item form-item-half"></div>
      </template>

      <form-select
        label="İl"
        half
        :listData="globalDataStore.ilList"
        listText="ad"
        listVal="id"
        v-model="uyeBilgileriStore.formData.ilId"
        required
        :invalidText="uyeBilgileriStore.invalidTexts.ilId"
        @change="ChangeIl" />
      <form-select
        label="İlçe"
        half
        :listData="uyeBilgileriStore.ilceList"
        listText="ad"
        listVal="id"
        v-model="uyeBilgileriStore.formData.ilceId"
        required
        :invalidText="uyeBilgileriStore.invalidTexts.ilceId"
        @change="ChangeIlce"
        :disabled="ilceDisabled" />
      <form-select
        label="Mahalle"
        half
        :listData="uyeBilgileriStore.mahalleList"
        listText="ad"
        listVal="id"
        v-model="uyeBilgileriStore.formData.mahalleId"
        @keyup="OnKeyup"
        required
        :invalidText="uyeBilgileriStore.invalidTexts.mahalleId"
        :disabled="mahalleDisabled" />
      <form-input
        modelKey="postaKodu"
        half
        v-model="uyeBilgileriStore.formData.postaKodu"
        label="Posta Kodu"
        :invalidText="uyeBilgileriStore.invalidTexts.postaKodu"
        maxlength="5"
        minlength="5"
        @keydown="validationStore.allowNumbersWithKeys"
        @keyup="OnKeyup" />
      <form-input
        modelKey="internetSitesi"
        v-model="uyeBilgileriStore.formData.internetSitesi"
        label="İnternet Sitesi"
        :invalidText="uyeBilgileriStore.invalidTexts.internetSitesi"
        minlength="6"
        @keyup="OnKeyup" />
      <form-textarea
        modelKey="adres"
        v-model="uyeBilgileriStore.formData.adres"
        required
        label="Adres"
        minlength="4"
        :invalidText="uyeBilgileriStore.invalidTexts.adres"
        @keyup="OnKeyup" />
      <div class="form-item" v-if="uyeBilgileriStore.formChanged && !isNew">
        <button class="button-c button-save" @click="SaveData">Kaydet</button>
        <button class="button-c button-cancel" @click="CancelSave">Vazgeç</button>
      </div>
    </div>
  </div>
  <div class="form-part form-title" v-if="isNew">
    <div class="form-title-buttons">
      <div class="button-c button-save" @click="SaveData">Kaydet</div>
      <router-link class="button-c button-cancel" to="/profil">Vazgeç</router-link>
    </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, onBeforeMount, computed, watch } 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'

  export interface Props {
    isPreview?: boolean
  }

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

  import { useUyeBilgileriStore } from '../../stores/UyeBilgileriStore'
  const uyeBilgileriStore = useUyeBilgileriStore()
  uyeBilgileriStore.ResetStore()

  import { useRoute } from 'vue-router'
  const route = useRoute()
  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  import { useGlobalDataStore } from '@/stores/globalDataStore'
  const globalDataStore = useGlobalDataStore()
  import { useValidationStore } from '@/stores/validationStore'
  const validationStore = useValidationStore()
  import { usePreviewStore } from '@/stores/previewStore'
  const previewStore = usePreviewStore()
  import router from '@/router'

  const loaded = ref<boolean>(false)
  const isNew = ref<boolean>(false)
  const previewPanel = ref<boolean>(false)
  const previewId = ref<number>(0)
  const yetkiliTipList = ref<Record<string, any>[]>([])

  const SetYetkiliTipList = () => {
    Object.assign(yetkiliTipList.value, globalDataStore.customerTips)

    // let araciInd = yetkiliTipList.value.findIndex((p) => p.id === 23)
    // yetkiliTipList.value.splice(araciInd, 1)
  }

  const ilceDisabled = computed<boolean>(() => {
    return (
      uyeBilgileriStore.ilceList.length === 0 &&
      (uyeBilgileriStore.formData.ilceId === null ||
        uyeBilgileriStore.formData.ilceId === 0)
    )
  })
  const mahalleDisabled = computed<boolean>(() => {
    return uyeBilgileriStore.mahalleList.length === 0
  })

  const OnKeyup = () => {
    uyeBilgileriStore.formChanged = true
  }
  const ChangeIl = async (e: Event, v: string | number, d: Record<string, any>) => {
    uyeBilgileriStore.formData.ilceId = ''
    uyeBilgileriStore.formData.mahalleId = ''
    uyeBilgileriStore.mahalleList = []
    if (Object.keys(d).length === 0) {
      uyeBilgileriStore.ilceList = []
      uyeBilgileriStore.formChanged = true
      return
    }
    uyeBilgileriStore.ilceList = await dataStore.GetIlcelerByIlId(v)
    uyeBilgileriStore.formChanged = true
  }
  const ChangeIlce = async (e: Event, v: string | number, d: Record<string, any>) => {
    uyeBilgileriStore.formData.mahalleId = ''
    if (Object.keys(d).length === 0) {
      uyeBilgileriStore.mahalleList = []
      uyeBilgileriStore.formChanged = true
      return
    }
    uyeBilgileriStore.mahalleList = await dataStore.GetMahallelerByIlceId(v)
    uyeBilgileriStore.formChanged = true
  }

  const SaveData = async () => {
    if (uyeBilgileriStore.FormCheck()) {
      uyeBilgileriStore.ResetFormItems()
      uyeBilgileriStore.formData.basvuruTipi = uyeBilgileriStore.formData.basvuruTipId
      var register: any = {}

      if (isNew.value) {
        uyeBilgileriStore.formData.parentUserId = usersStore.userId

        register = await dataStore.dataPost('Auth/register', {
          data: uyeBilgileriStore.formData
        })
      } else {
        register = await dataStore.dataPut(
          'Auth/Guncelleme/' + usersStore.selectedUserId(),
          {
            data: uyeBilgileriStore.formData
          }
        )
      }

      if (register !== 'errorfalse') {
        if (isNew.value) {
          usersStore.userSubApproveId = 0
          router.push(
            '/uyeler/detay/' +
              route.params.uyeId +
              '/yetkili-uye/detay/' +
              register.user.id+'/kisi-kurum-bilgileri'
          )
          isNew.value = false
        }else{
          GetData()
        }
        uyeBilgileriStore.formChanged = false
        loaded.value = false    
      }
    } else {
      uyeBilgileriStore.isFormValid = true
    }
  }

  const CancelSave = () => {
    uyeBilgileriStore.RestoreForm()
  }

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

      Object.assign(uyeBilgileriStore.safeData, uyeBilgileriStore.formData)
      loaded.value = true
    }
  }

  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 () => {
    if (route.name === 'UyeYetkiliYeni') isNew.value = true
    await dataStore.GetCustomerTipList()
    await dataStore.GetIlList()
    SetYetkiliTipList()
    if (!isNew.value) {
      await GetData()
    } else {
      uyeBilgileriStore.ResetStore()
      loaded.value = true
    }
  })

  watch(
    () => route.params.altUyeId,
    async () => {
      if (route.name === 'UyeYetkiliDetay') {
        await GetData()
      }
    }
  )
</script>
