<template>
    <div ref="chartDom" style="width: 100%;height: 100%;" v-if="chartShow" />
    <Empty :bottom="true" v-else></Empty>
</template>

<script setup>
import * as echarts from 'echarts'
import Empty from '@/components/Empty'
import { ref, onMounted, watch, nextTick } from 'vue'
const props = defineProps({
    lineData: {
        type: Object,
        default: {}
    }
})
const chartShow = ref(false)
const chartDom = ref(null);
let chartInstance = null;
// 初始化图表
const initChart = () => {
    if (chartDom.value) {
        chartInstance = echarts.init(chartDom.value);
        chartInstance.setOption({
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    color: '#fafafa',
                },
                borderColor: 'transparent',
                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                extraCssText: 'backdrop-filter: blur(6px);',
            },
            grid: {
                left: '4%',
                right: '4%',
                bottom: '10%',
                top: '16%',
                containLabel: true,
            },
            xAxis: {
                data: Object.keys(props.lineData),
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    symbol: 'none',
                    lineStyle: {
                        color: '#50637A',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    color: '#ffffff',
                    fontSize: 12,
                    padding: [10, 0, 0, 0],
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#ffffff',
                    fontSize: 12,
                    padding: [0, 10, 0, 0],
                },
                splitLine: {
                    show: false,
                },
            },
            series: [
                {
                    name: '增加值',
                    data: Object.entries(props.lineData),
                    type: 'line',
                    color: 'rgb(49, 143, 247)',
                    lineStyle: {
                        width: 2,
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: 'rgba(49, 143, 247, .6)',
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(49, 143, 247, .2)',
                            },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10,
                    },
                    symbol: 'circle',
                    symbolSize: 6,
                },
            ],
        });
    }
};

watch(() => props.lineData, (newVal) => {
    if (newVal && chartInstance == null) {
        if (newVal && Object.keys(newVal).length === 0) {
            chartShow.value = false;
            return;
        } else {
            chartShow.value = true;
            nextTick(() => {
                initChart();
            });
        }
    }
    if (chartInstance) {
        chartInstance.setOption({
            xAxis: {
                data: Object.keys(props.lineData),
            },
            series: [{
                data: Object.entries(props.lineData),
            }],
        })
    }
}, { deep: true, immediate: true } // 开启深度监听
)
// 生命周期
onMounted(() => {
    nextTick(() => {
        initChart();
    });
});
// 窗口自适应
window.addEventListener('resize', () => {
    chartInstance?.resize();
});
</script>

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