<template>
  <div ref="chartEle"></div>
</template>

<script setup>
// @ is an alias to /src
import { epgDetail } from '@/api/index';
//   import { defaultAjax } from '@/api/index';
import { defineProps, ref, onMounted } from 'vue';
// import config from '../../../config/index';
import * as echarts from 'echarts/core';
import { LineChart, BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  ToolboxComponent,
  VisualMapComponent,
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  BarChart,
  CanvasRenderer,
  ToolboxComponent,
  VisualMapComponent,
  LabelLayout,
  UniversalTransition,
]);

const props = defineProps({
  item: Object,
});
const chartEle = ref(null);

console.log(props);
onMounted(() => {
  epgDetail({
    epgId: props.item.epg_id,
    target: '.loadare' + props.item.epg_id,
  }).then(res => {
    console.log(res);
    const keys = [],
      value = [];
    const li = res || [];
    for (let i = 0; i < li.length; i++) {
      const v = li[i];
      keys.push(v.metric);
      value.push(v.watchrate);
    }
    const chart = echarts.init(chartEle.value);
    const height = (chartEle.value.offsetWidth * 6) / 16;
    chart.resize({
      height,
      width: chartEle.value.offsetWidth,
    });
    let option = {
      tooltip: {
        confine: true,
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
        formatter: function (data) {
          return data[0].value;
        },
      },
      grid: {
        top: '5%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: keys,
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: watchrate => {
            return watchrate;
          },
        },
        axisPointer: {
          snap: true,
        },
      },
      series: [
        {
          type: 'line',
          smooth: true,
          data: value,
          itemStyle: {
            opacity: 0,
          },
          lineStyle: {
            width: 1,
          },
        },
      ],
    };
    option && chart.setOption(option);
  });
});
</script>

<style lang="scss"></style>
