<template>
    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
    import mixins from '@/mixins';

    export default {
        mixins: [mixins],
        props: {
            chartTitle: {
                type: String,
            },
        },
        data() {
            return {
                chart: null,
            };
        },
        mounted() {
            this.eveSet();
        },
        watch: {
            data: function (val, oldVal) {
                if (this.chart) this.chart.clear();
                this.updateChart();
            },
        },
        methods: {
            // 对画布绑定事件
            eveSet() {
                let that = this;
                this.chart.on('mouseup', (params) => {
                    let event = params.event.event;
                    event.stopPropagation();
                    if (event.button == 2) {
                        this.$emit('mouseup', params);
                    }
                });
                document.addEventListener('click', function (event) {
                    if (event.button == 0) {
                        that.$emit('without');
                        event.stopPropagation();
                    }
                });
                document.oncontextmenu = function () {
                    return false;
                };
            },
            updateChart() {
                const { legendColor } = this.themeColor;
                this.chart.setOption({
                    title: {
                        text: this.chartTitle,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}',
                    },
                    calculable: false,
                    toolbox: this.setting.toolbox,
                    series: [
                        {
                            type: 'tree',
                            orient: 'horizontal', // vertical horizontal
                            top: '1%',
                            left: '10%',
                            bottom: '1%',
                            right: '20%',
                            symbolSize: 22,
                            label: {
                                normal: {
                                    position: 'right',
                                    verticalAlign: 'top',
                                    align: 'left',
                                    fontSize: 9,
                                },
                            },

                            leaves: {
                                label: {
                                    normal: {
                                        position: 'right',
                                        verticalAlign: 'middle',
                                        align: 'left',
                                    },
                                },
                            },
                            initialTreeDepth: -1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            color: legendColor || '#000000',
                                            fontSize: 12,
                                            fontWeight: 'bolder',
                                        },
                                    },
                                    lineStyle: {
                                        color: legendColor || '#000000',
                                        width: 0.5,
                                        type: 'solid', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                                        curveness: 0,
                                    },
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                    },
                                },
                            },
                            expandAndCollapse: true,
                            animationDuration: 550,
                            animationDurationUpdate: 750,
                            data: [this.data],
                            ...this.setting.series
                        },
                    ],
                }, true);
            },
        },
    };
</script>
