<template>
    <Filters @run-search="() => filterData(filters)" class="mb-4">
        <Type4 @update:filters="(value) => filters = value" />
    </Filters>

    <Anomali_LAPPGU_LPT :data="data" />
    <Anomali_LAPPGU_LPP :data="data" />
</template>

<script setup lang="ts">
import { Type4 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
import { Anomali_LAPPGU_LPP, Anomali_LAPPGU_LPT } from '../.'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { ref } from 'vue'
const data = ref<any[]>([])

const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
    laporanAnomaliPenangananPengaduanGangguanPetugas(
      dateFrom: $dateFrom
      dateTo: $dateTo
      posko: $posko
      idUid: $idUid
      idUp3: $idUp3
    ) {
        nama_posko
        persen_penyelesaian_petugas_anomali_cc_123_marking
        persen_penyelesaian_petugas_anomali_cc_123_non_marking
        persen_penyelesaian_petugas_anomali_marking
        persen_penyelesaian_petugas_anomali_non_marking
        persen_penyelesaian_petugas_anomali_pln_mobile_marking
        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
        total_penyelesaian_petugas_anomali_cc_123_marking
        total_penyelesaian_petugas_anomali_cc_123_non_marking
        total_penyelesaian_petugas_anomali_marking
        total_penyelesaian_petugas_anomali_non_marking
        total_penyelesaian_petugas_anomali_pln_mobile_marking
        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
        total_petugas
    }
  }
`

const filterData = (params: any) => {
    const { posko, uid, up3 } = params
    const dateValue = params.periode.split(' s/d ')
    refetch({
        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
        posko: posko ? posko.id : "",
        idUid: uid ? uid.id : 0,
        idUp3: up3 ? up3.id : 0
    })
    onResult((queryResult) => {
        if (queryResult.data != undefined) {
            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
                data.value = [
                    ...data.value,
                    {
                        ...item,
                    }
                ]
            })
        }
        console.log(queryResult.data)
        console.log(queryResult.loading)
        console.log(queryResult.networkStatus)
    })
    onError((error) => {
        console.log(error)
    })
}
const { onResult, onError, loading, refetch } = useQuery(
    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
    {
        dateFrom: new Date().toISOString().slice(0, 10),
        dateTo: new Date().toISOString().slice(0, 10),
        posko: '',
        idUid: 0,
        idUp3: 0
    }
)
const filters = ref()
</script>