<template>
  <div class="d-flex justify-content-between">
    <Card :bordered="false" title="温度" class="chart_item">
      <div style="height: 400px;">
        <div ref="temperatureRef" :style="{ height, width }"></div>
      </div>
    </Card>
    <Card :bordered="false" title="电量" class="chart_item">
      <div style="height: 400px;">
        <div ref="chartRef" :style="{ height, width }"></div>
      </div>
    </Card>
  </div>
</template>
<script lang="ts" setup name="SwitcherDetail">
  import { onMounted, ref, Ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { Card } from 'ant-design-vue';
  import moment from 'moment';
  import { useECharts } from '/@/hooks/web/useECharts';
  import * as LabDeviceApi from '/@/api/device/labDeviceApi';

  const route = useRoute();
  const id = ref(route.params?.id);
  const width = ref('100%');
  const height = ref('100%');
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const temperatureRef = ref<HTMLDivElement | null>(null);
  const { setOptions: setTemperatureOptions } = useECharts(temperatureRef as Ref<HTMLDivElement>);
  const getDetail = () => {
    const params = {
      agg: 'MAX',
      endTime: 1657179809785,
      // interval: 1,
      limit: 100,
      sortOrder: 'ASC',
      startTime: 1657179509785,
      useStrictDataTypes: true,
    }
    LabDeviceApi.getTimeseriesValue(id.value, { ...params, keys: 'temperature', }).then((res: any) => {
      let xAxisData: any = [];
      let seriesData: any = [];
      res.forEach(item => {
        xAxisData.push(moment(item.ts).format('HH:mm:ss'));
        seriesData.push(item.value);
      })
      setTemperatureOptions({
        grid: [{ left: '5%', top: '7%', }],
        tooltip: {
          trigger: 'axis',
          formatter: '{b} ({c})',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: seriesData,
            type: 'line'
          },
        ],
      });
    });
    LabDeviceApi.getTimeseriesValue(id.value, { ...params, keys: 'power', }).then((res: any) => {
      let xAxisData: any = [];
      let seriesData: any = [];
      res.forEach(item => {
        xAxisData.push(moment(item.ts).format('HH:mm:ss'));
        seriesData.push(item.value);
      })
      setOptions({
        tooltip: {
          trigger: 'axis',
          formatter: '{b} ({c})',
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: seriesData,
          },
        ],
      });
    });
  };

  onMounted(() => {
    getDetail();
  });
</script>

<style scoped>
.chart_item {
  width: 49%;
  display: inline-block;
}
</style>
