<template>
    <v-chart autoresize :option="line_option" theme="dark" style="width: 100%;height: 100%;" />
</template>

<script setup>
const prop = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                xAxis: [],
                series: []
            };
        }
    }
});

let line_option = computed(() => {
    return {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderColor: '#00c6ff',
            borderWidth: 2,
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            formatter: function (params) {
                let tooltipText = '';
                let xAxisValue = params[0].name;
                params.forEach((item) => {
                    tooltipText += `<div style="padding: 2px 0;"><strong>${item.seriesName}:</strong> ${item.value}</div>`;
                });
                return `${xAxisValue}<br>${tooltipText}`;
            },
            padding: 10,
            extraCssText: 'border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);'
        },
        backgroundColor: 'transparent',
        // legend: {
        //     data: ['上月', '本月'],
        //     right: 'left',
        //     textStyle: {
        //         color: '#ffff'
        //     }
        // },
        grid: {
            left: '10%',
            bottom:'15%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: prop.data.xAxis,
            axisLabel: {
                color: "#ffffff",
            },
        },
        yAxis: {
            type: 'value',
            name: '产量',
            minInterval: 1,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#3c3a4a85',
                }
            },
            axisLabel: {
                color: "#ffffff",
                formatter: function (value) {
                    return `${value}`;
                }
            },
        },
        series: [{
            name: '耗电量',
            data: prop.data.series,
            type: 'line',
            smooth: true,
            itemStyle: {
                color: 'rgb(150 ,162 ,116)',
            },
            lineStyle: {
                width: 2,
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgb(150 ,162 ,116 ,0.6)'
                    }, {
                        offset: 1,
                        color: 'rgb(150 ,162 ,116 ,0.2)'
                    }]
                }
            }
        }]
    }
})
</script>

<style lang="scss" scoped>

</style>
