<template>
    <div :id="echartsRef" ref="echartsPie"></div>
</template>

<script>
export default {
    name: 'echartsPie', //折线图组件
    props: {
        intersectionName: {
            type: Array,
            default() {
                return [];
            }
        },
        chatShowType: {
            type: String
        },
        echartsRef: {
            type: String
        },
        dataList: {
            type: Array,
            default() {
                return [];
            }
        },
        timeMode: {
            type: String
        }
    },
    data() {
        return {
            chart: null
        };
    },
    created() {},

    methods: {
        renameField(obj, oldFieldName, newFieldName) {
            if (Array.isArray(obj)) {
                obj.forEach((item) => {
                    this.renameField(item, oldFieldName, newFieldName);
                });
            } else if (typeof obj === 'object') {
                for (let key in obj) {
                    if (typeof obj[key] === 'object') {
                        this.renameField(obj[key], oldFieldName, newFieldName);
                    } else if (key === oldFieldName) {
                        obj[newFieldName] = obj[key];
                        delete obj[key];
                    }
                }
            }
        },
        //初始化页面
        initEcharts() {
            let seriesData = null;
            let myChart = this.chart;
            if (this.timeMode == '实时触发') {
                seriesData = null;
                if (this.dataList.length > 0 && this.dataList[0].type_data) {
                    this.renameField(this.dataList[0].type_data, 'quantity', 'value');
                    seriesData = this.dataList[0].type_data;
                }
            } else if (this.timeMode == '固定时刻') {
                seriesData = null;
                // for (let i = 0; i < this.dataList.length; i++) {
                // this.renameField(this.dataList[0].type_data,'quantity','value')
                // seriesData = this.dataList[0].type_data
                // }
                if (this.dataList.length > 0) {
                    if (this.dataList[0].type_data && this.dataList[0].type_data[0].quantity == undefined) {
                        this.renameField(this.dataList[0].type_data, null, null);
                        seriesData = this.dataList[0].type_data;
                    } else {
                        this.renameField(this.dataList[0].type_data, 'quantity', 'value');
                        seriesData = this.dataList[0].type_data;
                    }
                }
            } else if (this.timeMode == '固定间隔') {
                seriesData = null;
                // for (let i = 0; i < this.dataList.length; i++) {
                // this.renameField(this.dataList[0].type_data, "quantity", "value");
                // seriesData = this.dataList[0].type_data;
                // }
                if (this.dataList.length > 0) {
                    if (this.dataList[0].type_data && this.dataList[0].type_data[0].quantity == undefined) {
                        this.renameField(this.dataList[0].type_data, null, null);
                        seriesData = this.dataList[0].type_data;
                    } else {
                        this.renameField(this.dataList[0].type_data, 'quantity', 'value');
                        seriesData = this.dataList[0].type_data;
                    }
                }
            }

            var color = [
                '#0CD2E6',
                '#3751E6',
                '#FFC722',
                '#00FF80',
                '#FFEA00',
                '#FF7300',
                '#9500B3',
                '#3377FF',
                '#5087EC',
                '#68BBC4',
                '#58A55C',
                '#F2BD42',
                '#EE752F',
                '#D95040',
                '#14CAFB'
            ];
            let option = {
                // title: {
                //     show: true,
                //     text: this.componentName + '-' + this.chartName + '-' + '饼状图',
                //     textStyle: {
                //         lineHeight: '30'
                //     }
                // },
                color: color,
                animation: false,
                legend: {
                    top: 20,
                    right: 'center',
                    textStyle: {},
                    type: 'scroll',
                    width: '80%'
                    //  data: [
                    //     {
                    //         name: '流量_1-zone2-饼状图-实时触发',
                    //         icon: 'circle'
                    //     }
                    // ]
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(1, 13, 19, 0.5)',
                    borderWidth: 1,
                    axisPointer: {
                        type: 'shadow'
                        // label: {
                        //   show: true,
                        // },
                    },

                    textStyle: {
                        color: 'rgba(212, 232, 254, 1)'
                        // fontSize: fontChart(0.24),
                    },
                    extraCssText: 'z-index:2'
                },
                series: [
                    {
                        name: '流量_1-zone2-饼状图-实时触发',
                        type: 'pie',
                        center: ['50%', '55%'],
                        radius: '70%',
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        labelLine: {
                            show: false,
                            length: 0,
                            length2: 0
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                formatter: '{value|{c}}',
                                rich: {
                                    value: {
                                        fontSize: 20,
                                        color: '#ffffff'
                                    }
                                }
                            }
                        },
                        data: seriesData
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener('resize', () => {
                myChart.resize();
            });
            this.$nextTick(() => {
                myChart.resize();
            });
        }
    },
    mounted() {
        let that = this;
        const $dom = document.getElementById(this.echartsRef);
        $dom.style.width = '440px';
        $dom.style.height = '260px';
        setTimeout(() => {
            that.$nextTick(() => {
                this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
                if (this.chart == null) {
                    this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
                }
                that.initEcharts();
            });
        }, 300);
    },
    watch: {
        intersectionName: {
            handler: function (oldValues, newValues) {
                this.$nextTick(() => {
                    this.initEcharts();
                });
            }
        },
        chatShowType: {
            handler: function (oldValues, newValues) {}
        },
        echartsRef: {
            handler: function (oldValues, newValues) {
                console.log('old', oldValues);
                console.log('newV', newValues);
                let that = this;
                setTimeout(() => {
                    that.$nextTick(() => {
                        this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
                        if (this.chart == null) {
                            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
                        }
                        that.initEcharts();
                    });
                }, 300);
            }
        },
        dataList: {
            handler: function (oldValues, newValues) {
                this.$nextTick(() => {
                    this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
                    if (this.chart == null) {
                        this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
                    }
                    this.initEcharts();
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
#echartsPie {
    width: 100%;
    height: 100%;
}
</style>
