<template>
  <div style="width: 100%;height: 100%;">
    <Chart ref="chart"></Chart>
  </div>
</template>
<script setup>
import Chart from '@/components/chart';
import { queryGlobalCfg } from '@/api/configure/configuration/globalCfg.js';

const props = defineProps({
  defaultData: Object
});

const { defaultData } = toRefs(props);
const chartData = ref({});
const pieData = ref([]);
const requestData = ref(null);
const $getFinalData = inject('$getFinalData');
const $clearNull = inject('$clearNull');
const $detectingNullValues = inject('$detectingNullValues');
const chart = ref();


onMounted(async () => {
  $detectingNullValues(defaultData.value, ['configForm', 'data']);
  $detectingNullValues(defaultData.value, ['configForm', 'pieName']);
  $detectingNullValues(defaultData.value, ['configForm', 'pieData']);
  await getData();
  setInterval(async () => {
    await getData();
  }, 10000);
});
const getData = async () => {
  chartData.value = JSON.parse(JSON.stringify(defaultData.value.chartData));
  let data = await $getFinalData(defaultData.value.requests);
  if (Object.keys(data).length > 0) {
    pieData.value = data[defaultData.value.configForm.data];

    if (defaultData.value.configForm['pieName'] && defaultData.value.configForm['pieData']) {
      let data1 = pieData.value.map(e => {
        return [e[defaultData.value.configForm['pieName']], e[defaultData.value.configForm['pieData']]];
      });
      $detectingNullValues(chartData.value, ['dataset', 'source', 0]);
      let data = [chartData.value.dataset.source[0], ...data1];

      chartData.value.dataset['source'] = data;

    }
  }
  chart.value?.setData($clearNull(chartData.value, requestData.value) || {});
};
</script>
<style>

</style>
