import * as echarts from 'echarts';
import { addResizeListener, removeResizeListener } from '../utils/resize-event';

export default {
    props: {
        graphic: null,
        grid: {
            type: [Array, Object],
            default () {
                return null;
            }
        },
        axisPointer: {
            type: Object,
            default () {
                return {};
            }
        },
        color: {
            type: Array,
            default () {
                return [];
            }
        },
        title: {
            type: Object,
            default () {
                return {
                    text: null,
                    subtext: null,
                    x: 'center'
                };
            }
        },
        tooltip: {
            type: Object,
            default () {
                return {
                };
            }
        },
        legend: {
            type: Object,
            default () {
                return {
                    type: 'scroll',
                    pageIconColor: 'rgba(255,255,255,0.9)',
                    pageIconInactiveColor: 'rgba(255,255,255,0.4)',
                };
            }
        },
        options: {
            type: Object,
            default () {
                return {
                };
            }
        },
        devicePixelRatio: {
            type: Number,
            default: 1
        },
        theme: {
            type: String,
            default: 'shine'
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        title () {
            this.chart.setOption(this.getBaseOptions());
        },
        graphic: {
            handler () {
                this.chart.setOption(this.getBaseOptions());
            },
            deep: true
        }
    },
    data () {
        const self = this;
        return {
            resizeHandle: self.handleResize,
            autoInitialize: true
        };
    },
    mounted () {
        this.autoInitialize && this.initializeChart();
    },
    methods: {
        initializeChart () {
            this.chart = echarts.init(this.$el, this.theme);
            this.chart.setOption(this.getBaseOptions());
            addResizeListener(this.$el, this.resizeHandle.bind(this));
            this.bindEvent();
        },
        handleResize () {
            this.chart.resize();
        },
        bindEvent () {

        },
        getExtensionOptions () {
            return {
            };
        },
        getBaseOptions () {
            return {
                graphic: this.graphic,
                backgroundColor: 'transparent',
                title: this.title,
                color: this.color,
                tooltip: this.tooltip,
                grid: this.grid,
                axisPointer: this.axisPointer,
                clickable: true,
                legend: this.getLegend(),
                ...this.options,
                ...this.getExtensionOptions()
            };
        },
        getLegend () {
        }
    },
    beforeDestroy () {
        removeResizeListener(this.$el, this.resizeHandle);
    }
};
