<script lang="ts" setup>
  import { EChartsOption, ECharts, init } from 'echarts';
  import { unref, ref, onMounted, nextTick } from 'vue';
  import { useMultipleDataFetch } from '../../../hook/useSocket';
  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
  import { option } from './config';
  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  import { useComponentScale } from '../../../hook/useComponentScale';
  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  import { dateFormat } from '/@/utils/common/compUtils';

  const props = defineProps<{
    config: ComponentPropsConfigType<typeof option>;
  }>();

  const chartRefEl = ref<Nullable<HTMLDivElement>>(null);

  const chartInstance = ref<Nullable<ECharts>>(null);

  const time = ref<Nullable<number>>(null);

  function randomData() {
    now.value = now.value + oneDay;
    const newTime = dateFormat(unref(now), 'MM-dd hh:mm:ss');
    value = value + Math.random() * 21 - 10;
    return {
      name: newTime,
      value: [newTime, Math.round(value)],
    };
  }
  const data = ref<any>([]);
  const now = ref<number>(1688026367000);
  let oneDay = 5000; //间隔秒数
  let value = Math.random() * 1000;
  for (let i = 0; i < 10; i++) {
    data.value.push(randomData());
  }
  setInterval(function () {
    for (let i = 0; i < 1; i++) {
      data.value.shift();
      data.value.push(randomData());
    }
    unref(chartInstance)?.setOption(options());
  }, 1000);

  // const getDesign = computed(() => {
  //   const { persetOption, option } = props.config;
  //   const { dataSource = [] } = option || {};
  //   const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
  //   return {
  //     dataSource: dataSource?.map((item) => {
  //       const { unit, fontColor } = item.componentInfo || {};
  //       const { attribute, attributeRename } = item;
  //       return {
  //         unit: unit ?? presetUnit,
  //         fontColor: fontColor ?? presetFontColor,
  //         attribute,
  //         attributeRename,
  //       };
  //     }),
  //   };
  // });

  const options = (): EChartsOption => {
    // getStageColor(gradientInfo);
    return {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          width: 1,
          color: '#019680',
        },
      },
      legend: {
        top: '10%',
        left: 'center',
        data: ['温度', '湿度'],
      },
      grid: {
        top: '45%',
        left: '20%',
        bottom: '14%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            type: 'solid',
            color: 'rgba(226,226,226,0.5)',
          },
        },
        data: unref(data).map((item) => item.name),
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '50%'],
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          type: 'line',
          name: '温度',
          stack: 'Total',
          data: unref(data).map((item) => item.value),
        },
        {
          type: 'line',
          name: '湿度',
          stack: 'Total',
          data: unref(data).map((item) => {
            return Number(item.value[1]) * 0.99;
          }),
        },
      ],
    };
  };

  const initial = () => {
    chartInstance.value = init(unref(chartRefEl)! as HTMLElement);
    chartInstance.value.setOption(options());
  };

  // const updateChart = (data: SeriesOption['data'], yAxisData) => {
  //   unref(chartInstance)?.setOption({
  //     series: [{ data }],
  //     yAxis: { data: yAxisData },
  //   } as EChartsOption);
  // };

  const updateFn: MultipleDataFetchUpdateFn = () => {
    // console.log(message, 'message');
    return {};
  };

  useMultipleDataFetch(props, updateFn);

  onMounted(() => {
    initial();
    // !props.config.option.uuid && randomFn();
    !props.config.option.uuid;
  });

  const resize = async () => {
    await nextTick();

    // 修改echarts大小
    unref(chartInstance)?.setOption({
      legend: {
        textStyle: {
          fontSize: 14 * unref(getRatio),
        },
      },
    } as EChartsOption);
    unref(chartInstance)?.resize();
  };

  const { getRatio } = useComponentScale(props, resize);
</script>

<template>
  <main class="w-full h-full flex flex-col justify-center items-center">
    <DeviceName :config="config" />
    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
    <UpdateTime :time="time" />
  </main>
</template>