<template>
  123
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { ref, Ref, withDefaults, onMounted, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { getTrendData } from '/@/api/dashboard/index';

  interface Props {
    width?: string;
    height?: string;
    tenantTrendList?: Array<[number, string]>;
  }
  const props = withDefaults(defineProps<Props>(), {
    width: '100%',
    height: '280px',
    tenantTrendList: () => [],
  });

  watch(
    () => props.tenantTrendList,
    (newValue) => {
      setOptions({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'time',
        },
        yAxis: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        series: [
          {
            name: '当前趋势',
            type: 'line',
            data: newValue,
          },
        ],
      });
    }
  );

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  onMounted(async () => {
    const endTs = Date.now();
    const res = await getTrendData({
      startTs: endTs - 2592000000,
      endTs,
      interval: 86400000,
      trend: 'TENANT_TREND',
    });
    const transferResult = res.map((item) => {
      return [item.ts, item.value];
    });
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      xAxis: {
        type: 'time',
      },
      yAxis: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      series: [
        {
          name: '当前趋势',
          type: 'line',
          data: transferResult,
        },
      ],
    });
  });
</script>