<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref, Ref, onMounted, watch } from 'vue';

  import { useECharts } from '/@/hooks/web/useECharts';

  export default defineComponent({
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '350px',
      },
      dailyStats:{
        default:{
          dates:[],
          values:[]
        }
    },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);

      const updateChart = () => {
        setOptions({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              label: {
                show: true,
                backgroundColor: '#333',
              },
            },
          },
          
          xAxis: {
            data: props.dailyStats.dates,
            axisLine: {
              lineStyle: {
                color: '#ccc',
              },
            },
          },
          yAxis: {
            splitLine: { show: true },
            axisLine: {
              lineStyle: {
                color: '#ccc',
              },
            },
          },
          series: [
            {
              name: '',
              type: 'line',
              smooth: false,
              symbol: 'circle',
              showAllSymbol: 'auto',
              symbolSize: 6,
              lineStyle: {
                color: '#53A2D3',
              },
              itemStyle: {
                color: '#53A2D3',
              },
              data: props.dailyStats.values,
            },
          ],
        });
      };

      watch(
        () => props.dailyStats,
        () => {
          updateChart();
        },
        { deep: true }
      );

      onMounted(() => {
        updateChart();
      });

      return { chartRef };
    },
  });
</script>
