<template>
    <div ref="chartRef" class="w-full h-[400px]"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer
]);

const chartRef = useTemplateRef("chartRef")
let chart: echarts.ECharts | null = null;

const props = defineProps({
    chartData:{
        type:Array,
        default: () => []
    }
})

watch(() => props.chartData,() => {
    if (chart) {

        const options = {
            xAxis: {
                data: props.chartData.map((item:any) => item.date)
            },
            series: [{
                data: props.chartData.map((item:any) => item.total)
            }]
        };
        chart.setOption(options);
    }
    
}, { deep: true })

const initChart = () => {
    if(!chartRef.value) return;
    chart = echarts.init(chartRef.value)
    const options = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top:"3%",
            left: '3%', 
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.chartData.map((item:any) => item.date),
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        series: [
            {
                name: '获客数',
                type: 'line',
                smooth: true,
                data: props.chartData.map((item:any) => item.total),
                lineStyle: {
                    color: 'rgba(41, 241, 250, 1)',
                    width: 2
                },
                itemStyle: {
                    color: 'rgba(41, 241, 250, 1)',
                },
                symbol:"none",
                areaStyle: {
                    opacity: 0.3,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(9, 86, 128)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(6, 37, 99)'
                        }
                    ])
                }
            },
        ]
    };
    
    chart.setOption(options);
}

onMounted(() => {
    if(!chart){
        initChart();
    }
    window.addEventListener('resize', () => {
        chart?.resize();
    });
});

onUnmounted(() => {
    chart?.dispose();
    window.removeEventListener('resize', () => {
        chart?.resize();
    });
});
</script>

<style scoped>
</style>