import utils from 'utils/index.js';
import * as echarts from 'echarts';
// import * as echarts from 'echarts/core';

import styleConfig from './config/styleConfig';
import dataConfig from './config/dataConfig';

export default class CustomChartBar{
    constructor(dom, opts){
        console.log('dom', dom)
        console.log('opts', opts)
        opts = opts || {};
        if(opts.getConfig === true){
            return;
        }

        this.chart = null;
        this._dom = dom;

        this.init(opts);
    }

    init(opts){
        this.chart = echarts.init(this._dom);
        this.setOption(opts);
    }

    setOption(opts, data){
        // this.chart.setOption(this.mergeOption(opts, data), {notMerge:true});
        this.chart.setOption(opts, {notMerge:true});
    }


    // mergeOption(style, dataConfig){
    //     style = utils.deepCopy(style);
    //     style.xAxis.data = dataConfig.defaultData[dataConfig.configList[0].defaultKey];
    //     style.color = style.color.color;
    //     style.yAxis = {
    //         type:'value'
    //     }

    //     style.series = [];
    //     let series = dataConfig.configList[1].defaultKey;
    //     if(Array.isArray(series) === true){
    //         series.forEach( item => {
    //             style.series.push({
    //                 data:dataConfig.defaultData[item],
    //                 type:'bar'
    //             })
    //         })
    //     }else{
    //         style.series = [
    //             {
    //               data: dataConfig.defaultData[series],
    //               type: 'bar'
    //             }
    //           ]
    //     }
        
    //     return style;
    // }

    getConfig(){
        return{
            styleConfig:utils.deepCopy(styleConfig),
            dataConfig:utils.deepCopy(dataConfig),
            fun:{
                getColName: this.getColName,
                themeMerge: this.themeMerge,
            }
        }
    }
    themeMerge(style, dataConfig){
        style = utils.deepCopy(style);
        style.xAxis.data = dataConfig.xAxis[0].data;
        style.color = style.color.color;
        style.yAxis = {
            type:'value'
        }

        style.series = [];
        let series = dataConfig.series;
        if(Array.isArray(series) === true){
            series.forEach( item => {
                style.series.push({
                    data:item.data,
                    type:'bar'
                })
            })
        }
        
        return style;
    }

    getColName(dataConfig){
        let column = {};
        dataConfig = JSON.parse(JSON.stringify(dataConfig));
        let dataConfigKey = dataConfig.configList;
        column.xAxis = [dataConfigKey[0].defaultKey];
        column.series = dataConfigKey[1].defaultKey;
        return column;
    }

    resize(){
        // this.chart && this.chart.setOption && this.chart.setOption(this.opts)
        this.chart.resize();
    }

    dispose(){
        this.chart.dispose();
    }
}