<template>
  <Filters @run-search="() => filterData(filters)" class="mb-4">
    <Type3 @update:filters="(value) => {
      filters = value
    }
      " />
  </Filters>
  <div>
    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
      column-resizing-mode="widget" :word-wrap-enabled="true">
      <DxSelection mode="single" />
      <DxPaging :enabled="false" />
      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
        v-if="loading" v-model:visible="loading" :enabled="true" />
      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
      <DxColumnFixing :enabled="true" />

      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
        caption="NO" css-class="custom-table-column" />
      <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
      <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :caption="i"
          css-class="custom-table-column" />
      </DxColumn>
    </DxDataGrid>
  </div>
</template>

<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { ref } from 'vue'

import { DxDataGrid } from 'devextreme-vue'
import {
  DxColumn,
  DxColumnFixing,
  DxExport,
  DxLoadPanel,
  DxPaging,
  DxScrolling,
  DxSearchPanel,
  DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
  if (e.format === 'pdf') {
    const doc = new jsPDF()

    exportToPdf({
      jsPDFDocument: doc,
      component: e.component,
      indent: 5
    }).then(() => {
      doc.save(`.pdf`)
    })
  } else {
    const workbook = new Workbook()
    const worksheet = workbook.addWorksheet('Employees')

    exportToExcel({
      component: e.component,
      worksheet,
      autoFilterEnabled: true
    }).then(() => {
      workbook.xlsx.writeBuffer().then((buffer: any) => {
        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
      })
    })

    e.cancel = true
  }
}

const onSelectionChanged = ({ selectedRowsData }: any) => {
  const data = selectedRowsData[0]
  console.log(data)
}

const data = ref<any[]>([])
const GET_DATA = gql`
  query rekapitulasiKeluhanBerdasarkanMedia(
    $dateFrom: Date!
    $dateTo: Date!
    $idUlp: Int!
    $idUid: Int!
    $idUp3: Int!
  ) {
    rekapitulasiKeluhanBerdasarkanMedia(
      dateFrom: $dateFrom
      dateTo: $dateTo
      idUlp: $idUlp
      idUid: $idUid
      idUp3: $idUp3
    ) {
      media
      tgl1
      tgl10
      tgl11
      tgl12
      tgl13
      tgl14
      tgl15
      tgl16
      tgl17
      tgl18
      tgl19
      tgl2
      tgl20
      tgl21
      tgl22
      tgl23
      tgl24
      tgl25
      tgl26
      tgl27
      tgl28
      tgl29
      tgl3
      tgl30
      tgl31
      tgl4
      tgl5
      tgl6
      tgl7
      tgl8
      tgl9
    }
  }
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
  idUlp: 0,
  idUid: 0,
  idUp3: 0
})
const filters = ref();

const filterData = (params: any) => {
  const dateValue = params.periode.split(' s/d ')
  const { idUlp, uid, up3 } = params
  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),
    idUlp: idUlp ? idUlp.id : 0,
    idUid: uid ? uid.id : 0,
    idUp3: up3 ? up3.id : 0
  })

  onResult((queryResult) => {
    if (queryResult.data != undefined) {
      data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia

    }
    console.log(queryResult.data)
    console.log(queryResult.loading)
    console.log(queryResult.networkStatus)
  })
  onError((error) => {
    console.log(error)
  })
}
</script>
