/*==========仓库类型为圆筒仓==========*/
//定义数据
var listPoints = [
    {'z': 0, 'x': 0, 'y': 0, 'temp': 0.0},
    {'z': 1, 'x': 0, 'y': 0, 'temp': 0.0},
    {'z': 2, 'x': 0, 'y': 0, 'temp': 0.0},
    {'z': 3, 'x': 0, 'y': 0, 'temp': 0.0},
    {'z': 4, 'x': 0, 'y': 0, 'temp': 0.0},
    {'z': 5, 'x': 0, 'y': 0, 'temp': 0.0},
    {'z': 6, 'x': 0, 'y': 0, 'temp': 0.0},
    {'z': 7, 'x': 0, 'y': 0, 'temp': 0.0},
    {'z': 8, 'x': 0, 'y': 0, 'temp': 0.0},
    {'z': 9, 'x': 0, 'y': 0, 'temp': 0.0}];
var listLays = [{z: 1, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {
    z: 2,
    tempMin: 0.0,
    tempMax: 0.0,
    tempAve: 0.0
}, {z: 3, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {z: 4, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {
    z: 5,
    tempMin: 0.0,
    tempMax: 0.0,
    tempAve: 0.0
}, {z: 6, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {z: 7, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {
    z: 8,
    tempMin: 0.0,
    tempMax: 0.0,
    tempAve: 0.0
}, {z: 9, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {z: 10, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}];

var distrList = [1];
var bottomList = [10];
//定义数据显示容器
var layPoints = [];
var colPoints = [];
var cirNum = distrList.length; //圈数
var layNum = getLayNum(); //层数
var longAxis = 100; //第一内圈半长轴
var shortAxis = 10; //第一内圈半短轴
var spaceCir = 35; //两圈间距
var intervalTop = 20; //距离顶端距离
var spaceLay = 55; //层间距
var maxSpace = cirNum * spaceCir; //内外圈最大差值
var curVal = 1; //层数控制变量
var curCol = 0;//当前根，大于0表示按照根执行
var initAngle = 0; //角度控制
var clockwise = true; //时针控制
var displayMode = 'all'; //内外显示
var textSize = 16;//文本框大小

var center_x;//仓心X坐标
var center_y;//仓心y坐标

var arr = [];//定义绑定事件数组

//色块颜色常量
var color = null;
var R = 0;
var G = 0;
var B = 0;
var ctx;
var timer;
var t = -2;
var caseHeight, sum_long;

var isSleep = true;

// 初始化参数
function initCanvasParam() {
    isSleep = true;
    cirNum = distrList.length; // 圈数
    layNum = getLayNum(); // 层数
    maxSpace = cirNum * spaceCir; // 内外圈最大差值
    curVal = 1; // 层数控制变量
    curCol = 0;
    displayMode = 'all'; // 内外显示
    arr = [];// 定义绑定事件数组
};
//获取层配置中的最高层值
function getLayNum() {
    var i = 1;
    bottomList.forEach(function (value, index, array) {
        if (value > i) i = value;
    });
    return i;
};


//绘制主程序
function draw() {
    var canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    center_x = canvas.width / 3; //仓心X坐标
    center_y = shortAxis / 3 + maxSpace + intervalTop; //仓心y坐标
    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;
    autoAdjust();
    make_ellipse(ctx);
    gainData(ctx);
    entityBlock(ctx);
    make_top_ellipse(ctx);
    title(ctx);
    showIndex(canvas, ctx);
}

//绘制顶部椭圆
function make_top_ellipse() {
    //绘制顶部椭圆
    ctx.beginPath();
    ctx.strokeStyle = "rgba(0,0,0,0.5)";
    ctx.ellipse(center_x, center_y, longAxis + maxSpace, shortAxis + maxSpace, 0, 0, Math.PI * 2);
    ctx.stroke();
    ctx.closePath();
}

//高度自调整
function autoAdjust() {
    //设置仓高
    caseHeight = spaceLay * (layNum - 1);
    //计算仓库占画布总高
    sum_long = caseHeight + 2 * (maxSpace + shortAxis + intervalTop);
    //总高越界进行调整层间距
    if (eval(canvas.height) < eval(sum_long)) {
        //仓管设置为最高
        caseHeight = canvas.height - 2 * (maxSpace + shortAxis + intervalTop);
        //调整层间距
        spaceLay = caseHeight / layNum;
    }
};

//绘制仓体
function make_ellipse(ctx) {

    //绘制仓左右边界
    ctx.beginPath();
    ctx.moveTo(center_x + (longAxis + maxSpace), center_y);
    ctx.lineTo(center_x + (longAxis + maxSpace), center_y + caseHeight)
    ctx.moveTo(center_x - (longAxis + maxSpace), center_y);
    ctx.lineTo(center_x - (longAxis + maxSpace), center_y + caseHeight)
    ctx.stroke();
    ctx.closePath();

    //填充背部
    var grd = ctx.createRadialGradient(center_x, center_y + caseHeight - longAxis, shortAxis, center_x, center_y + caseHeight - 2 * longAxis, 5 * longAxis);
    //grd.addColorStop(0, "white");
    // grd.addColorStop(1, "rgba(115,200,231,1)");
    grd.addColorStop(0, "rgba(245,222,179)");
    grd.addColorStop(1, "rgba(240 255 255)");

    ctx.beginPath();
    ctx.fillStyle = grd;
    ctx.moveTo(center_x + (longAxis + maxSpace), center_y + caseHeight);
    ctx.lineTo(center_x + (longAxis + maxSpace), center_y);
    ctx.ellipse(center_x, center_y, longAxis + maxSpace, shortAxis + maxSpace, 0, 0, Math.PI, true);
    ctx.lineTo(center_x - (longAxis + maxSpace), center_y + caseHeight);

    ctx.fill();
    ctx.closePath();

    //绘制底部椭圆
    var grd = ctx.createRadialGradient(center_x, center_y + caseHeight - longAxis, shortAxis, center_x, center_y + caseHeight - 2 * longAxis, 5 * longAxis);
    // grd.addColorStop(0, "white");
    // grd.addColorStop(1, "rgba(115,200,231,1)");
    grd.addColorStop(0, "rgba(245,222,179)");
    grd.addColorStop(1, "rgba(240 255 255)");

    ctx.beginPath();
    ctx.fillStyle = grd;
    ctx.ellipse(center_x, center_y + caseHeight, longAxis + maxSpace, shortAxis + maxSpace, 0, 0, Math.PI * 2);
    ctx.stroke();
    ctx.fill();
    ctx.closePath();
}

//过滤数据
function gainData() {
    for (i = 0; i < listPoints.length; i++) {
        if (listPoints[i]['z'] + 1 === curVal) {
            layPoints.push(listPoints[i])
        }
    }
}

//过滤数据
function gainData2() {
    for (i = 0; i < listPoints.length; i++) {
        if ((listPoints[i]['y'] + 1) == curCol) {
            colPoints.push(listPoints[i])
        }
    }
}

//进行排线，绘制色块
function entityBlock(ctx) {
    var z_peak = [1, cirNum];
    var color_list = ["e9e9e9", "bbe5cc", "f8dabc", "f4c8d5", "958a9b", "9f9aa0"];

    var turns = cirNum;
    for (i = 0; i < bottomList.length; i++) {
        if(curVal > bottomList[i]){
            turns = turns - 1;
        }
    }

    var showMax = turns;
    //循环生成每圈
    for (i = turns; i >= 1; i--) {

        //内外显示逻辑判断
        if ((displayMode === 'outside') && !(i === cirNum)) {
            continue;
        } else if ((displayMode === 'inner') && i === cirNum) {
            showMax -= 1;
            continue;
        }

        var splNum = distrList[i - 1];
        //只有一列数据时候控制中心位置
        if(splNum === 1){
            point = null;
            //循环找到对应点值
            for(z = 0;z < layPoints.length; z++){
                if((layPoints[z]['x'] +1 === i )&&(layPoints[z]['y'] === 0)){
                    point = layPoints[z];
                    break;
                }
            }
            point_x = center_x ;
            point_y = center_y  + curVal * spaceLay ;
            textBox(ctx,point,point_x,point_y);
            continue;
        }


        ctx.beginPath();

        ctx.strokeStyle = 'rgba(0,0,0,1)';
        ctx.ellipse(center_x, center_y + (curVal) * spaceLay, longAxis + i * spaceCir, shortAxis + i * spaceCir, 0, 0, Math.PI * 2);

        if (i === 1) {
            var grd = ctx.createRadialGradient(center_x, center_y + caseHeight - longAxis, shortAxis, center_x, center_y + caseHeight - 2 * longAxis, 5 * longAxis);
            grd.addColorStop(0, "rgba(245,222,179)");
            grd.addColorStop(1, "rgba(240 255 255)");

            ctx.fillStyle = grd;
            ctx.fill();

        } else {
            var grd = ctx.createRadialGradient(center_x, center_y + caseHeight - longAxis, shortAxis, center_x, center_y + caseHeight - 2 * longAxis, 2 * longAxis);
            grd.addColorStop(0, "white");
            grd.addColorStop(1, "#" + color_list[i]);
            ctx.fillStyle = grd;
            ctx.fill();
        }

        ctx.stroke();
        ctx.closePath();

        //设置点值为null;
        var point = null;

        //每圈的起始与截止根,splNum为所在圈的根数
        var startGen = 0, endGen = 0;
        for(t = 0; t < distrList.length; t++){
            if(t <= i - 1){
                endGen += distrList[t];
            }
        }
        startGen = endGen - splNum;
        //循环生成圈内点
        for (j = startGen; j < endGen; j++) {
            //循环找到对应点值
            for (z = 0; z < layPoints.length; z++) {
                if ((layPoints[z]['x'] === (i - 1)) && (layPoints[z]['y'] === j)) {
                    point = layPoints[z];
                    break;
                }
            }

            var angle;
            //判断显示时针
            if (clockwise) {
                angle = (2 * Math.PI / splNum) * j + initAngle;
            } else {
                angle = (2 * Math.PI / splNum) * (splNum - j) + initAngle;
            }

            point_x = center_x + (longAxis + i * spaceCir) * Math.cos(angle);
            point_y = center_y + curVal * spaceLay + (shortAxis + i * spaceCir) * Math.sin(angle);
            if(point){
                textBox(ctx, point, point_x, point_y)
            }
        }
    }
}


//进行排线，绘制色块
function entityBlock2(ctx) {
    //设置点值为null;
    var point = null;
    //循环生成圈内点
    for (j = 0; j < colPoints.length; j++) {
        point = colPoints[j];
        point_x = center_x;
        point_y = center_y + (j + 1) * spaceLay;
        textBox(ctx, point, point_x, point_y)
    }
}

//绘制一个圆形文本框
function textBox(ctx, point, x, y) {
    val = point.temp;

    if ((t % 2 === 1)) {
        if (val == listLays[curVal - 1]['tempMax']) {   //此点为最高温
            ctx.fillStyle = "rgba(229,29,29,1)";
        } else if (val == listLays[curVal - 1]['tempMin']) {  //此点为最低温
            ctx.fillStyle = "rgba(0,255,28,1)";
        } else {
            ctx.fillStyle = getColor(val);
        }
    } else {
        ctx.fillStyle = getColor(val);
    }

    //如果是补点，不做点位渲染
    if (val == -102) {
        return;
    }
    if ("备用" != val) {
        val = val.toFixed(1);
    }

    if(val <= -100){
        val = "备用";
    }

    ctx.beginPath();
    ctx.lineWidth = 0.75;

    ctx.arc(x, y, textSize, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.textAlign = 'center';


    ctx.font = "600 14px Arial";
    ctx.fillText(val, x, y + 3);
    ctx.closePath();

    arr.push({
        'x': x - 0.6 * textSize,
        'y': y - 0.7 * textSize,
        'width': 2.1 * textSize,
        'height': 2.2 * textSize,
        'type': 'val',
        'lay': point['z'],
        'val': point['temp'],
        'cir': point['x'],
        'rows': point['y']
    })
}

//根据温度获取RGB
function getColor(val) {
    if (val >= 50) {
        color = "rgba(255,0,0,1)";
        return color;
    } else if (val >= 20) {
        G = Math.round(255 - 255 * ((val - 20) / 30));
        color = "rgba(255," + G + ",0,1)";
        return color;
    } else if (val >= 0) {
        R = Math.round(100 + (155 / 20) * val);
        B = Math.round(30 - 1.5 * val);
        color = "rgba(" + R + ",255," + B + ",1)";
        return color;
    } else if (val >= -10) {
        R = Math.round(100 - 6.6 * (val * (-1)));
        G = Math.round(255 - 2.2 * (val * (-1)));
        B = Math.round(30 + 1.2 * (val * (-1)));
        color = "rgba(" + R + "," + G + "," + B + ",1)";
        return color;
    } else {
        color = "rgba(34,233,42,1)";
        return color;
    }
}

//睡眠
function sleep() {
    if(isSleep){
        t++;
        if (t >= 0) {
            flash();
        }
        timer = setTimeout("sleep()", 400);
    }
}

//闪烁程序
function flash() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    canvas.height = canvas.height;
    layPoints = [];
    arr = [];
    make_ellipse(ctx);
    gainData(ctx);
    entityBlock(ctx);
    make_top_ellipse(ctx);
    title(ctx)
}

//闪烁程序
function flash2() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    canvas.height = canvas.height;
    colPoints = [];
    arr = [];

    make_ellipse(ctx);

    gainData2(ctx);

    entityBlock2(ctx);

    make_top_ellipse(ctx);
    title(ctx)
}

//标题栏
function title(ctx) {

    for (i = 1; i <= layNum; i++) {

        start_x = center_x + (longAxis + maxSpace) + 20;
        start_y = center_y + spaceLay * (i - 1);

        if (curVal === i) {
            var grad = ctx.createLinearGradient(start_x, start_y, start_x + 2 * spaceLay, start_y);
            grad.addColorStop(0, "#2f2fff");
            grad.addColorStop(0.7, "#b3b3ff");
            grad.addColorStop(1, "#ffffff");
            //设置为未选择时的渐变填充
        } else {
            var grad = ctx.createLinearGradient(start_x, start_y, start_x + 2 * spaceLay, start_y);
            // grad.addColorStop(0, "#a2baef");
            // grad.addColorStop(0.8, "#ffffff");
            grad.addColorStop(0, "rgba(245,222,179)");
            grad.addColorStop(1, "rgba(240 255 255)");
        }

        ctx.fillStyle = grad;
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'rgba(214,223,232,1)';
        ctx.beginPath();
        ctx.moveTo(start_x, start_y + 1); //原点
        ctx.lineTo(start_x + 1.8 * spaceLay, start_y + 1); //右移
        ctx.lineTo(start_x + 1.8 * spaceLay, start_y + spaceLay - 1); //下移
        ctx.lineTo(start_x, start_y + spaceLay - 1); //左移
        ctx.lineTo(start_x, start_y + 1); //上移
        ctx.stroke();
        ctx.fill();
        ctx.closePath();
        //设置为选择时的字体填充
        if (curVal === i) {
            ctx.fillStyle = 'rgba(255,14,0,1)';
            ctx.font = "600 14px Arial";
        } else {
            ctx.fillStyle = 'rgba(30,30,30,1)';
            ctx.font = "14px Arial";
        }
        val = "第" + i + "层";
        ctx.textAlign = 'center';
        ctx.fillText(val, start_x + 0.9 * spaceLay, start_y + 0.7 * spaceLay);
        arr.push({
            'x': start_x,
            'y': start_y + 1,
            'width': 1.8 * spaceLay,
            'height': spaceLay,
            'num': i,
            'type': 'title'
        })
    }
}

//绑定触发的事件
function draws(x, y, canvas, ctx) {
    //创建点击事件的画布（画布2）
    ctx.rect(0, 0, canvas.width, canvas.height);
    arr.forEach(function (v, i) {
        ctx.beginPath();
        //绘制每一个对象的区域
        ctx.rect(v.x, v.y, v.width, v.height);
        ctx.closePath();

        console.log(v);

        //判断点是否在区域内
        var showData;
        if (ctx.isPointInPath(x, y)) {
            //点的类型为值
            if (v.type === 'val') {
                //类型为val，则弹出点信息
                showData = "当前层：" + (v.lay + 1) + "\n 当前电缆：第" + (v.rows + 1) + "根";
                alert(showData);
            } else { //其他类型则切换显示色块
                curVal = v['num'];
                flash();
            }
        }
    })
}

//绑定事件
function showIndex(canvas, ctx) {
    //整个画布对象添加点击事件
    canvas.addEventListener('click', function location(e) {
        x = e.clientX;
        y = e.clientY;
        draws(x, y, canvas, ctx);
    }, false);
}

// --------------- 按钮点击事件---------------------
//上一行
function last() {
    if (curVal === 1) {
        curVal = Number(layNum);
    } else {
        curVal -= 1;
    }
    flash();
    renderGrainByLay(curVal);
}

//下一行
function next() {
    if (curVal === Number(layNum)) {
        curVal = 1;
    } else {
        curVal += 1;
    }
    flash();

    renderGrainByLay(curVal);
}

//根查看
function showCol() {
    isSleep = false;

    curCol =  $("#value_col").val();
    listPoints = grainData.listPoints;
    listLays = grainData.listLays;
    distrList = grainData.cable.split("-").map(Number);
    bottomList = grainData.cableCir.split("-").map(Number);

    flash2();

    $("#switch_all").prop("checked", false);
    form.render();
}

//角度旋转
function rotate() {
    initAngle += (document.getElementById("rotate").value) * 2 * Math.PI / 360;
    flash();
}

//全部显示点击事件
function display_all() {
    isSleep = true;
    displayMode = 'all';
    flash();
}

//外部显示点击事件
function display_outside() {
    isSleep = true;
    displayMode = 'outside';
    flash();
}

//内部显示点击事件
function display_inside() {
    isSleep = true;
    displayMode = 'inner';
    flash();
}

// 初始化三维粮情
function initGrainChar3d() {
    isSleep = true;
    draw();
};

function clearGrainChart3d() {
    initCanvasParam();
    draw();
};

//重新渲染
function resetGrainChart3d() {
    listPoints = grainData.listPoints;
    listLays = grainData.listLays;
    distrList = grainData.cable.split("-").map(Number);
    bottomList = grainData.cableCir.split("-").map(Number);

    initCanvasParam();
    draw();
    sleep();//开始闪烁
    curType = "z";
    curVal = 1;
    renderGrainByLay(curVal);
}

// 根据用户选择的层，渲染数据，从1开始
function renderGrainByLay(num) {
    var lay;
    $.each(listLays, function (index, data) {
        if (num == data.z) {
            lay = data;
            // 更新层信息
            $("#dynamicAve").text(lay.tempAve);
            $("#dynamicMax").text(lay.tempMax);
            $("#dynamicMin").text(lay.tempMin);
            $("#dynamicAveName").text("层均温");
            $("#dynamicMaxName").text("层高温");
            $("#dynamicMinName").text("层低温");
            return;
        }
    });
};