/* 柱图组件对象 */

var H5ComponentPolyline = function(name, cfg) {

var component = new H5ComponentBase(name, cfg);

//component.text(cfg.text);

//绘制网格线

var w = cfg.width;

var h = cfg.height;

//绘制画布

var canvas=function(w,h,cfg){

var cns=document.createElement('canvas');

var ctx = cns.getContext('2d');

cns.width = ctx.width = w;

cns.height = ctx.height = h;

//水平网格线 100份 -->10份

var stepY = 10;

ctx.beginPath(); //开始画

ctx.lineWidth = 1; //画笔宽度

ctx.strokeStyle = "#AAA" //画笔颜色

//水平网格线

for (var i = 0; i < stepY + 1; i++) {

var y = (h / stepY) * i;

//console.log(y);

ctx.moveTo(0, y);

ctx.lineTo(w, y);

}

//垂直网格线(根据项目的个数)

var stepX = cfg.data.length + 1; //6

var text_w = w / stepX >> 0; //画布垂直网格的宽度

//console.log(text_w); //88

for (var i = 0; i < stepX + 1; i++) {

var x = (w / stepX) * i;

//console.log(x); //画布垂直网格X的坐标

ctx.moveTo(x, 0);

ctx.lineTo(x, h);

if (cfg.data[i]) {

//console.log(cfg.data[i]);

var text = $('<div class="text">');

text.text(cfg.data[i][0]);

var textLeft=x/2- text_w/4 +text_w / 2;

text.css('width', text_w / 2).css('left',textLeft);

//console.log((x / 2 - text_w / 4) + text_w / 2);

component.append(text)

}

}

ctx.stroke();

return cns;

}

//加入一个画布，做网格背景的

/*var cns = document.createElement('canvas');

var ctx = cns.getContext('2d');

cns.width = ctx.width = w;

cns.height = ctx.height = h;*/

component.append(canvas(w,h,cfg));

/*

//水平网格线 100份 -->10份

var step = 10;

ctx.beginPath(); //开始画

ctx.lineWidth = 1; //画笔宽度

ctx.strokeStyle = "#AAA" //画笔颜色

window.ctx = ctx;

//水平网格线

for (var i = 0; i < step + 1; i++) {

var y = (h / step) * i;

ctx.moveTo(0, y);

ctx.lineTo(w, y);

}*/

/*//垂直网格线(根据项目的个数)

var step = cfg.data.length + 1;

var text_w = w / step >> 0;

for (var i = 0; i < step + 1; i++) {

var x = (w / step) * i;

ctx.moveTo(x, 0);

ctx.lineTo(x, h);

if (cfg.data[i]) {

var text = $('<div class="text">');

text.text(cfg.data[i][0]);

text.css('width', text_w / 2).css('left', (x / 2 - text_w / 4) + text_w / 2);

component.append(text)

}

}

ctx.stroke();

         */

//绘制折线数据，重新创建画布

var cns = document.createElement('canvas');

var ctx = cns.getContext('2d');

cns.width = ctx.width = w;

cns.height = ctx.height = h;

component.append(cns);

    /**

     * 绘制折现以及对应的数据和阴影

     * @param {floot} per 0到1之间的数据,会根据这个值绘制最终数据对应的中间状态

     * 

     */

var draw = function(per) {

//清空画布

        ctx.clearRect(0,0,w,h);

ctx.beginPath(); //开始画

ctx.lineWidth = 3; //画笔宽度

ctx.strokeStyle = "#ff8878" //画笔颜色

var x = 0;

var y = 0;

/* ctx.moveTo(10,10);

ctx.arc(10,10,5,0,2*Math.PI);*/

//step=cfg.data.length+1; //6

var row_w = (w / (cfg.data.length + 1));

//画点

for (i in cfg.data) { //for in 是枚举对象的方法

var item = cfg.data[i];

x = row_w * i + row_w;

//console.log(x);

y = h-(item[1]*h*per);

ctx.moveTo(x, y);

ctx.arc(x, y, 5, 0, 2 * Math.PI);

}

//连线

//移动画笔到第一个数据的点位置

ctx.moveTo(row_w, h - (cfg.data[0][1]*h*per));

for (i in cfg.data) { //for in 是枚举对象的方法

var item = cfg.data[i];

x = row_w * i + row_w;

y = h-(item[1]*h*per);

ctx.lineTo(x, y);

}

ctx.stroke();

ctx.lineWidth = 1; //画笔宽度

ctx.strokeStyle = 'rgba(255, 136, 120, 0)';

//绘制阴影

ctx.lineTo(x, h);

ctx.lineTo(row_w, h);

ctx.fillStyle = 'rgba(255, 136, 120, 0.2)';

ctx.fill();

//写文字数据

for (i in cfg.data) { //for in 是枚举对象的方法

var item = cfg.data[i];

x = row_w * i + row_w;

y = h-(item[1]*h*per);

ctx.fillStyle = item[2] ? item[2] : '#595959';

ctx.fillText((item[1] * 100 + '%'), x - 10, y - 10);

}

ctx.stroke();

}

//折线图生长动画

component.on('onLoad', function() {

        var s=0;

        for(var i=0;i<100;i++){

        setTimeout(function(){

           s+=0.01;

           draw(s);

        },i*10);

        }

});

component.on('onLeave', function() {

//折线图退长动画

var s=1;

         for(var i=0;i<100;i++){

        setTimeout(function(){

           s-=0.01;

           draw(s);

          },i*10+500);

}

});

return component;

}