<template>
    <div id="chart">
        <div ref="echartRef" class="chart" :style="{ height: `${height}px` }"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: "ZrLineChart",
    data() {
        return {
            chart: null, 
            options: {
                title: {
                    text: '',
                    padding:[15,0,0,15]
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    padding:[15,0,0,0],
                    data: []
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            },
            height: 300,
        };
    },
    props: {
        // 图表数据
        series: {
            type: Array,
            default: () => [],
            require: true
        },
        // 图表数据配置项
        chartOptions: {
            type: Object,
            default: () => {},
            require: true
        },
        // 暗黑模式
        dark: {
            type: Boolean,
            default: false,
        }
    },
    mounted() {
        if(this.chartOptions.dark) {
            this.chart = echarts.init(this.$refs.echartRef, 'dark');
        }else {
            this.chart = echarts.init(this.$refs.echartRef);
        }
        this.chart.setOption(this.options);
    },
    watch: {  
        chartOptions: {
            handler: function(newChartOptions) {
                if(newChartOptions.title.text) this.options.title.text = newChartOptions.title.text
                if(newChartOptions.title.subtext) this.options.title.subtext = newChartOptions.title.subtext
                if(newChartOptions.height) this.height = newChartOptions.height
                if(newChartOptions.xAxisData) this.options.xAxis.data = [...newChartOptions.xAxisData]
            },
            immediate: true,
            deep: true
        },
        "chartOptions.dark": {
            handler: function(newTheme) {
                this.chart.dispose(); //销毁
                if(newTheme){
                    this.chart = echarts.init(this.$refs.echartRef, 'dark')
                }else {
                    this.chart = echarts.init(this.$refs.echartRef)    
                }
            },
        },
        series: {
            handler: function (newSeries) {  
                if(this.chartOptions.props) {
                    let name = this.chartOptions.props.name
                    let data = this.chartOptions.props.data
                    this.options.series = newSeries.map((item,index) => {
                        const obj = {
                            type: 'line',
                            stack: 'Total',
                            name: '',
                            emphasis: {
                                focus: 'series'
                            },
                            data: []
                        }
                        // 是否堆叠图
                        if(this.chartOptions.isAreaStyle) obj.areaStyle = {}
                        obj.name = item[name]
                        obj.data = [...item[data]]
                        return obj
                    });
                    let legend = newSeries.map((item, index) => {
                        return item[name]
                    })

                    this.options.legend.data = [...legend]
                }      
            },
            immediate: true,
            deep: true,
        },
        options: {
            handler: function (newOption) {
                this.chart.setOption(newOption);
            },
            deep: true,
        },
    },
    methods: {

    },
};
</script>

<style lang="less" scoped>
.chart {
    width: 100%;
}
</style>