<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';


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

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

onMounted(async () => {
  // 获取全局配置
  await queryGlobalCfg().then(e => {
    globalList.value = e;
  });
  await getData();
  setInterval(async () => {
    await getData();
  }, 10000);
});
const getChartData = (data) => {
  $detectingNullValues(chartData.value, ['textStyle', 'color']);
  $detectingNullValues(chartData.value, ['xAxis', 'data']);
  if (defaultData.value.configForm['textColor']?.[0] === 'system') {
    chartData.value.textStyle['color'] = globalList.value.find(e => e.globalCfgId === defaultData.value.configForm.textColor?.[1])?.globalCfgDate || '';
  }
  if (defaultData.value.configForm['textColor']?.[0] === 'styleData') {
    chartData.value.textStyle['color'] = styleData.value.colors[defaultData.value.configForm['textColor'][1]];
  }
  chartData.value.xAxis['data'] = data[defaultData.value.configForm.Xdata];

  defaultData.value.configForm['datas'].forEach((i, k) => {
    $detectingNullValues(chartData.value, ['series', k, 'data']);
    $detectingNullValues(chartData.value, ['series', k, 'itemStyle', 'normal', 'color']);
    $detectingNullValues(chartData.value, ['series', k, 'name']);
    chartData.value.series[k]['data'] = data[defaultData.value.configForm['datas'][k].data];
    chartData.value.series[k]['name'] = defaultData.value.configForm['datas'][k].name;

    if (defaultData.value.configForm['datas'][k]['barColor'][0] === 'system') {
      chartData.value.series[k].itemStyle.normal['color'] = globalList.value.find(e => e.globalCfgId === defaultData.value.configForm['datas'][k].barColor?.[1])?.globalCfgDate || '';

    }
    if (defaultData.value.configForm['datas'][k]['barColor'][0] === 'styleData') {
      chartData.value.series[k].itemStyle.normal['color'] = styleData.value.colors[this.defaultData.configForm['datas'][k]['barColor'][1]];
    }
  });
};
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) {
    getChartData(data);
  }
  chart.value?.setData($clearNull(chartData.value, requestData.value) || {});
};
</script>
<style>

</style>
