<template>
  <AdminLayout>
    <Breadcrumb current-page-text="Üyeler Listesi" go="/" />
    <div class="form-inner-comment waiting-d" v-if="!loaded">
      Yükleniyor, lütfen bekleyiniz...
    </div>
    <section class="section-list">
      <list-table-content
        v-if="loaded"
        :tableHeader="tableHeader"
        :rowAction="rwAction"
        icon="customers"
        title="Üyeler"
        listText="Üye"
        apiList="Auth/UyelerList"
        apiText="Üye Listesi"
        isUseRoute />
    </section>
  </AdminLayout>
</template>
<script setup lang="ts">
  import { ref, computed, onBeforeMount } from 'vue'
  import AdminLayout from '@/layouts/AdminLayout.vue'
  import router from '@/router'

  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  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 { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { useGlobalDataStore } from '@/stores/globalDataStore'
  const globalDataStore = useGlobalDataStore()

  const loaded = ref<boolean>(false)

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

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

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

  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: customerTips,
        listVal: 'id',
        listText: 'baslik',
        filterId: 'basvuruTipId'
      },
      style: { width: '10%' }
    },
    {
      name: 'unvan',
      title: 'Ünvan',
      style: { width: '20%' }
    },
    { name: 'email', title: 'Email', sort: true, 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) => {
    if (usersStore.isPanelUser) globalStore.selCustomerType = row.basvuruTipId
    router.push('detay/' + row.id + '/uye-bilgileri')
  }

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

    loaded.value = true
  })
</script>
