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

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

const options = 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'
            }
        },
        xAxis: {
            type: 'category',
            data: ['W01', 'W02', 'W03', 'W04', 'W05', 'W06', 'W07'],
            axisLabel: {
                color: "#ffffff",
            },
        },
        yAxis: {
            type: 'value',
            max: 100,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#3c3a4a85',
                }
            },
            axisLabel: {
                color: "#ffffff",
                formatter: function (value) {
                    return `${value} %`;
                }
            },
        },
        series: [{
            name: '上月',
            data: [20, 90, 60, 80, 85, 50, 70],
            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)'
                    }]
                }
            }
        }, {
            name: '本月',
            data: [50, 60, 10, 60, 50, 80, 90],
            type: 'line',
            smooth: true,
            itemStyle: {
                color: '#48858e',
            },
            lineStyle: {
                width: 2,
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgb(72 ,133 ,142 ,0.6)'
                    }, {
                        offset: 1,
                        color: 'rgb(72 ,133 ,142 ,0.2)'
                    }]
                }
            }
        }],
        grid: {
            left: '8%',
            right: '2%',
            top: '10%',
            bottom: '12%'
        }
    }
});
</script>

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