<template>
  <section class="section-list">
    <list-table-content
      v-if="loaded"
      :tableHeader="tableHeader"
      :rowAction="rwAction"
      :addRoute="YetkiliKurumLink()"
      icon="draws"
      title="Yetkili Olduğu Kişi/Kurum"
      listText="Kayıt"
      :apiList="'Auth/userbyuserChildList/' + usersStore.selectedUserId()"
      isUseRoute />
  </section>
</template>
<script setup lang="ts">
  import { ref, computed, onBeforeMount } from 'vue'

  import { useGlobalDataStore } from '@/stores/globalDataStore'
  const globalDataStore = useGlobalDataStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()
  import { useDateStore } from '@/stores/dateStore'
  const dateStore = useDateStore()
  import { useCustomerStore } from '../stores/customerStore'
  const customerStore = useCustomerStore()
  import { useCustomerService } from '../service/customerService'
  const customerService = useCustomerService()
  import { useRoute } from 'vue-router'
  const route = useRoute()
  import router from '@/router'

  const loaded = ref<boolean>(false)

  const UyeId = () => {
    if (usersStore.isPanelUser) return route.params.uyeId
    else return usersStore.userId
  }

  const YetkiliKurumLink = (): string => {
    if (usersStore.isPanelUser) return ''
    else return '/uyeler/detay/' + UyeId() + '/yetkili-uye/yeni'
  }

  const ilList = computed<Record<string, any>[]>(() => {
    return globalDataStore.ilList
  })

  const userTips = computed<Record<string, any>[]>(() => {
    return globalDataStore.customerTips
  })

  const customerOnayIslemTipleri = computed<Record<string, any>[]>(() => {
    return customerStore.onayIslemTipleri
  })

  const tableHeader = ref<Record<string, any>>([
    {
      name: 'olusturmatarihi',
      title: 'Kayıt Tarihi',
      sort: true,
      compute: (v: Record<string, any>): string => {
        if (v.olusturmatarihi === null) return ''
        else return dateStore.dateFormat({ date: v.olusturmatarihi })
      },
      filter: {
        type: 'date',
        between: true
      },
      style: { width: '10%' }
    },
    {
      name: 'basvuruTipi',
      title: 'Kullanıcı Tipi',
      sort: true,
      filter: {
        type: 'select',
        data: userTips,
        listVal: 'id',
        listText: 'baslik',
        filterId: 'basvuruTipId'
      },
      style: { width: '10%' }
    },
    {
      name: 'unvan',
      title: 'Ünvan',
      style: { width: '20%' }
    },
    { name: 'email', title: 'Email', style: { width: '10%' } },
    { name: 'telefonNumarasi', title: 'Telefon' },
    {
      name: 'il',
      title: 'İl',
      sort: true,
      filter: {
        type: 'select',
        data: ilList,
        listVal: 'id',
        listText: 'ad',
        filterId: 'ilId'
      }
    },
    { name: 'ilce', title: 'İlçe', sort: true },
    {
      name: 'islemTipi',
      title: 'Durum',
      sort: true,
      computeHtml: (v: Record<string, any>): string => {
        return `<span class='back-grad ${customerStore.CellStatusClass(v.islemTipId)}'>
                 ${v.islemTipi}
              </span>`
      },
      filter: {
        type: 'select',
        data: customerOnayIslemTipleri,
        listVal: 'id',
        listText: 'tipAdi',
        filterId: 'islemTipId'
      },
      style: { width: '10%' }
    }
  ])

  const rwAction = (row: any) => {
    router.push(
      '/uyeler/detay/' +
        UyeId() +
        '/yetkili-uye/detay/' +
        row.id +
        '/kisi-kurum-bilgileri'
    )
  }

  onBeforeMount(async () => {
    await dataStore.GetIlList()
    await dataStore.GetCustomerTipList()
    await customerService.GetCustomerOnayIslemTipleri()

    loaded.value = true
  })
</script>
