<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: "ZrPieChart",
    data() {
        return {
            chart: null, 
            options: {
                title: {
                    text: '',
                    subtext: '',
                    left: 'center',
                    padding: [5, 0, 0, 15]
                },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    data: [],
                    top: '6%'
                },
                series: [
                    {
                        name: '',
                        type: 'funnel',
                        top: '70',
                        right: '30',
                        bottom: 60,
                        width: '78%',
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            show: true,
                            formatter: `{b}-{c}%`,
                        },
                        roseType: '',
                        data: [],
                        itemStyle: {},
                        emphasis: {}
                    }
                ]
            },
            height: 300,
        };
    },
    props: {
        // 图表数据
        seriesData: {
            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
                    this.options.series[0].name = newChartOptions.title.text
                }
                if(newChartOptions.title.subtext) this.options.title.subtext = newChartOptions.title.subtext
                if(newChartOptions.height) this.height = newChartOptions.height
            },
            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)    
                }
                this.chart.setOption(this.options);
            },
        },
        seriesData: {
            handler: function (newSeries) {  
                if(this.chartOptions.props) {
                    let name = this.chartOptions.props.name
                    let value = this.chartOptions.props.value
                    this.options.series[0].data = newSeries.map((item,index) => {
                        let obj = {
                            name: '',
                            value: 0
                        }
                        if(item[name]) {
                            obj.name = item[name]
                        }
                        obj.value = item[value]
                        let legend = newSeries.map((item, index) => {
                            return item[name]
                        })

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

    },
};
</script>

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