<template>
  <div class="form-part form-title">
    <div class="form-title-buttons">
      <div class="button-c button-save" @click="SaveData">Kaydet</div>
    </div>
  </div>
  <div :class="['form-part', formChanged ? 'changed' : '']">
    <div class="form-part-title">
      <h4>Onay Durumu</h4>
    </div>
    <div class="form-part-content">
      <form-select
        label="İşlem"
        :listData="onayIslemTipleri"
        listText="tipAdi"
        listVal="islemTipiId"
        v-model="formData.onayDurumuIslemTipiId"
        required
        :invalidText="invalidTexts.onayDurumuIslemTipiId" />
      <form-file
        v-model="formData.file"
        elclass="panel-documents-item"
        :invalidText="invalidTexts.file" />
      <form-textarea
        v-model="formData.aciklama"
        :invalidText="invalidTexts.aciklama"
        label="Açıklama"
        @keyup="OnKeyup" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onBeforeMount, computed } from '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 { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { useGlobalDataStore } from '@/stores/globalDataStore'
  const globalDataStore = useGlobalDataStore()
  import { useValidationStore } from '@/stores/validationStore'
  const validationStore = useValidationStore()
  import { useCustomerStore } from '../../stores/customerStore'
  const customerStore = useCustomerStore()

  const loaded = ref<boolean>(false)
  const formChanged = ref<boolean>(false)
  const isFormValid = ref<boolean>(true)

  const invalidTexts = ref<Record<string, any>>({})
  const onayIslemTipleri = ref<Record<string, any>[]>([])

  const formData = reactive<Record<string, any>>({
    onayDurumuIslemTipiId: null,
    aciklama: ''
  })
  const OnKeyup = () => {
    formChanged.value = true
  }
  const IsFieldEmpty = (field: string, text: string) => {
    if (validationStore.checkEmpty(formData[field]) || formData[field] === 0) {
      invalidTexts.value[field] = text
      isFormValid.value = false
    } else {
      delete invalidTexts.value[field]
    }
  }

  const UyeId = () => {
    if (route.name === 'UyeYetkiliDetay') return route.params.altUyeId
    else return usersStore.selectedUserId()
  }

  const FormCheck = (): boolean => {
    IsFieldEmpty('onayDurumuIslemTipiId', 'İşlem tipi seçmelisiniz.')

    return isFormValid.value
  }
  const SaveData = async () => {
    if (FormCheck()) {
      let form: any
      let dataForm = new FormData()
      dataForm.append('onayDurumuIslemTipiId', formData.onayDurumuIslemTipiId)
      dataForm.append('appUserId', String(UyeId()))
      dataForm.append('onaylayanKisiId', String(usersStore.userId))
      dataForm.append('file', formData.file)
      dataForm.append('aciklama', formData.aciklama)
      form = await dataStore.dataPost('AppUserOnayDurum/', {
        data: dataForm,
        headers: { 'Content-Type': 'multipart/form-data' },
        toast: { toast: 'Onay durumu başarıyla kaydedildi', type: 'success' }
      })

      if (form !== 'errorfalse') {
        formChanged.value = false
        loaded.value = false
        if (route.name === 'UyeDetay')
          usersStore.userApproveId = formData.onayDurumuIslemTipiId
        else if (route.name === 'UyeYetkiliDetay')
          usersStore.userSubApproveId = formData.onayDurumuIslemTipiId
        Object.assign(formData, {})
        customerStore.uyeOnayRefresh = true
      }
    } else {
      isFormValid.value = true
    }
  }
  const RemoveIncelemeBekleniyor = () => {
    const removeAdminIndex: number[] = [6, 7]
    for (let i: number = 0; i < removeAdminIndex.length; i++) {
      let ind = onayIslemTipleri.value.findIndex((p) => p.islemTipiId === removeAdminIndex[i])
      if (ind >= 0) onayIslemTipleri.value.splice(ind, 1)
    }
  }
  onBeforeMount(async () => {
    onayIslemTipleri.value = await dataStore.dataGet('AppUserOnayDurumuIslemTipi')
    RemoveIncelemeBekleniyor()
  })
</script>
