const F2 = require('@antv/f2');
import deepAssign from './deepAssign'
// F2封装
function FGraph(el, type) {
    this.id = el.getAttribute("id");
    this.minMax = {
        min: 0,
        max: 0
    };
    this.colors = {
        min: 'red',
        max: 'green',
        normal: 'blue'
    };
    this.chart = "";
    this.txtShapes = {
        show: true,
        list: []
    };
    if(this.id) {
        this._init(this.id, type);
    }else {
        this._init(null, type);
    }
}

// 初始化
FGraph.prototype._init = function(id, type) {
    // 创建 Chart 对象
    this.chart = new F2.Chart({
        id: id,
        pixelRatio: window.devicePixelRatio, // 指定分辨率
        syncY: true,
        animate: false
    });

    // 设置x轴线
    this.chart.axis("x", {
        line: {
            lineWidth: 1,
            stroke: '#bbb',
            top: true, // 展示在最上层
        },
    });
    // 设置y轴线
    this.chart.axis("y", {
        line: {
            lineWidth: 1,
            stroke: '#bbb',
            top: true, // 展示在最上层
        },
        grid: {
            lineWidth: 1,
            stroke: '#bbb',
        }
    });
    
    // 设置提示框
    this.chart.tooltip({
        alwaysShow: false,
    });

    // 载入数据源
    this.chart.source([]);

    // 设置最大值和最小值
    this.setMinMax([]);
    
    // 设置图表类型
    this._setType(type);

    // 不显示legend
    this.chart.legend(false);
    
    // 渲染图表
    this.chart.render();
};
// 设置图表类型
FGraph.prototype._setType = function(type) {
    var self = this;
    // 根据类型设置图表
    switch(type) {
        case 'line':
            this.chart.line().position('x*y');
            // 不显示文本
            this.txtShapes.show = false;
        break;
        default:
            // 设置颜色
            this.chart.interval().position('x*y').color('x*y', function(x, y) {
                var minMax = self.minMax;
                var colors = self.colors;
                var color = colors.normal;
                if(y == minMax.min) {
                    color = colors.min;
                }else if(y == minMax.max) {
                    color = colors.max;
                }
                return color;
            });
        break;    
    }
};
// 更新数据
FGraph.prototype.changeData = function(data) {
    // 设置最大值和最小值
    this.setMinMax(data);
    // 更改数据
    this.chart.changeData(data);
};

// 设置文本
FGraph.prototype._addTxtShape = function(data) {
    //  判断是否显示文本
    if(!this.txtShapes.show) {
        return;
    }
    var self = this;
    var chart = this.chart;
    // 移除文本
    this._txtShapesDestory();
    // 绘制柱状图文本
    const offset = -5;
    const canvas = chart.get('canvas');
    const group = canvas.addGroup();
    data.forEach(function(obj) {
        const point = chart.getPosition(obj);
        const text = group.addShape('text', {
            attrs: {
                x: point.x,
                y: point.y + offset,
                text: obj.y,
                textAlign: 'center',
                textBaseline: 'bottom',
                fill: '#808080'
            }
        });
        self.txtShapes.list.push(text);
    });
}
// 修改大小
FGraph.prototype.changeSize = function(width, height) {
    width = width?width:null;
    height = height?height:null;
    this.chart.changeSize(width, height);
}

// 根据data的值获取最大值和最小值
FGraph.prototype.setMinMax = function(data) {
    var rs = {
        min: 0,
        max: 0
    };
    // 设置data第一个值到rs中
    if(data.length != 0) {
        rs.min = data[0].y;
        rs.max = data[0].y;
    }
    // 遍历data的值
    for(var i=1; i<data.length; i++) {
        var _data = data[i];
        // 设置最大值和最小值
        rs.min = rs.min>_data.y?_data.y:rs.min;
        rs.max = rs.max<_data.y?_data.y:rs.max;
    }
    this.minMax = rs;
}
// 销毁txtShapes
FGraph.prototype._txtShapesDestory = function() {
    var txtShapes = this.txtShapes.list;
    // 遍历txtShapes
    for(var i=0; i<txtShapes.length; i++) {
        var txtShape = txtShapes[i];
        // 销毁
        txtShape.destroy();
    }
    // 重置数组
    this.txtShapes.list = [];
};
// 设置最值的颜色
FGraph.prototype.setColors = function(colors) {
    this.colors = deepAssign({}, this.colors, colors);
};
// 销毁图表
FGraph.prototype.destroy = function() {
    this.chart.destroy();
};

export default FGraph;