//json获取的数据

var urls;

//从页面获取的日期
function get_Data_from_HTML() {
    urls = "https://www.5y6qi.com/ssms/api/getmessage?method=wlList&date=" + send_date;
    // console.log(urls);
}

//参数设置
//圆盘的中心位置 测算的年份
var center_x = 300,
    center_y = 300,
    Year,
    Month,
    Day,
    date_list;
//节气
var solar_terms = ["大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至", "小寒"];
//色卡
var color_atla = {
    "s": ["#90e0ef", "#00b4d8", "#0077b6"], //蓝色 水
    "m": ["#74c69d", "#40916c", "#1b4332"], //绿色 木
    "j": ["#ffe347", "#ffc857", "#ffba08"], //黄色 金
    "t": ["#cd9777", "#b07d62", "#8a5a44"], //褐色 土
    "h": ["#f4acb7", "#f28482", "#ff6b6b"] //红色 火
};
//画色块参数
//角度
var angle_list_6 = [2 / 6, 3 / 6, 4 / 6, 5 / 6, 1, 1 / 6, 2 / 6],
    angle_list_5 = [1 / 3, 8 / 15, 11 / 15, 14 / 15, 2 / 15, 1 / 3],
    angle_list_24 = [0.0, 0.041666666666666664, 0.08333333333333333, 0.125, 0.16666666666666666, 0.20833333333333334, 0.25, 0.2916666666666667, 0.3333333333333333, 0.375, 0.4166666666666667, 0.4583333333333333, 0.5, 0.5416666666666666, 0.5833333333333334, 0.625, 0.6666666666666666, 0.7083333333333334, 0.75, 0.7916666666666666, 0.8333333333333334, 0.875, 0.9166666666666666, 0.9583333333333334, 1.0];
//圆的半径
var radius_color_list = [290, 270, 230, 190, 150, 110, 70, 30];

//填涂文字参数
//角度(不包括24节气)    因为文字具有大小，所以与色块的角度不同
var angle_list_text = {
    "0": [29 / 72, 36.4 / 72],
    "1": [43.4 / 72, 51.8 / 72],
    "2": [0.8027777777777777, 0.9194444444444445],
    "3": [1.0027777777777778, 0.11944444444444444],
    "4": [0.20277777777777778, 0.3194444444444444],
    "5": [29 / 72, 36.4 / 72],
    "6": [43.4 / 72, 51.8 / 72],
    "7": [0.8027777777777777, 0.9194444444444445],
    "8": [1.0027777777777778, 0.11944444444444444],
    "9": [0.20277777777777778, 0.3194444444444444],
    "10": [0.38888888888888884, 0.4444444444444444],
    "11": [0.5555555555555556, 0.611111111111111],
    "12": [0.7222222222222222, 0.7777777777777778],
    "13": [0.888888888888889, 0.9444444444444444],
    "14": [1.0555555555555556, 0.1111111111111111],
    "15": [0.2222222222222222, 0.2777777777777778],
    "16": [0.38888888888888884, 0.4444444444444444],
    "17": [0.5555555555555556, 0.611111111111111],
    "18": [0.7222222222222222, 0.7777777777777778],
    "19": [0.888888888888889, 0.9444444444444444],
    "20": [1.0555555555555556, 0.1111111111111111],
    "21": [0.2222222222222222, 0.2777777777777778],
    //司天 在泉
    "22": [0.38888888888888884, 0.4444444444444444],
    "23": [0.5555555555555556, 0.611111111111111],
    "24": [0.7416666666666667, 0.7555555555555555],
    "25": [0.888888888888889, 0.9444444444444444],
    "26": [1.0555555555555556, 0.1111111111111111],
    "27": [0.24166666666666667, 0.25555555555555554]
};
//角度(24节气的角度)
var angle_list_text_solar = [0.3555555555555555, 0.39722222222222225, 0.4388888888888889, 0.4805555555555555, 0.5222222222222223, 0.5638888888888889, 0.6055555555555555, 0.6472222222222221, 0.6888888888888889, 0.7305555555555555, 0.7722222222222221, 0.8138888888888889, 0.8555555555555555, 0.8972222222222221, 0.9388888888888889, 0.9805555555555555, 1.0222222222222221, 1.0638888888888889, 1.1055555555555556, 0.14722222222222223, 0.1888888888888889, 0.23055555555555557, 0.2722222222222222, 0.3138888888888889, 0.10555555555555556];
//文字的半径 后两个是节气 24个的
var radius_list = [50, 90, 170, 210, 140, 280, 30, 250];

//获得今年的节气具体日期
var sTermInfo = new Array(21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758, 0);






function MingPan_Date() {
    $(document).ready(function () {
        get_Data_from_HTML();
        // console.log(send_date);
        $.ajax({
            type: "GET",
            url: urls,
            dataType: "json",
            async: true,
        }).done(function (data) {
            // console.log(data);
            var date = getYearMonthDay();
            draw_color(data);
            draw_text(data);
            draw_center(data);
            var urls_yunqi = "https://www.5y6qi.com/ssms/api/getmessage?method=wskList&date=" + date;
            yunqi_event(urls_yunqi);
            drawarrow(data);
        }).fail(function () {
            Document.write('服务器超时，请重试！');
        });
    });
}




//获取日期
function getYearMonthDay() {
    var var_date_string = send_date.split("-");
    //年份
    Year = var_date_string[0];
    Month = var_date_string[1];
    Day = var_date_string[2];
    date_list = getDateList(Year);
    return Year + "-" + Month + "-" + Day;
}

//画色块
function draw_color(di) {
    //开始画图
    //色块
    var cas = document.getElementById("fate_canvas");
    var cas_con = cas.getContext("2d");

    //画色块 从外往里 从大圆向小圆
    for (var j = 0; j < 8; j++) {
        if (j == 0 || j == 4) { //24节气的色块
            for (var i = 0, len = 24; i < len; i++)
                paintColorCircle(cas_con, j, i, angle_list_24, "white");
        } else if (j == 1) { //最大的那个圆
            var pre_year_color_level = di["sitian"][1]; //前半年
            var pre_color = pre_year_color_level.substr(0, 1); //颜色
            var pre_level = parseInt(pre_year_color_level.substr(-1)); //颜色程度

            var last_year_color_level = di["zaiquan"][1]; //后半年
            var last_color = last_year_color_level.substr(0, 1);
            var last_level = parseInt(last_year_color_level.substr(-1));

            for (var i = 0, len = 6; i < len; i++) {
                if (i <= 2)
                    paintColorCircle(cas_con, j, i, angle_list_6, color_atla[pre_color][pre_level]);
                else
                    paintColorCircle(cas_con, j, i, angle_list_6, color_atla[last_color][last_level]);
            }
        } else if (j >= 2 && j <= 3) { //第2和3的圆
            var var_flag;
            if (j == 2)
                var_flag = ["16", "17", "18", "19", "20", "21"];
            else if (j == 3)
                var_flag = ["10", "11", "12", "13", "14", "15"];
            for (i = 0, len = 6; i < len; i++) {
                var color = di[var_flag[i]][1].substr(0, 1);
                var level = di[var_flag[i]][1].substr(-1);
                paintColorCircle(cas_con, j, i, angle_list_6, color_atla[color][level]);
            }
        } else if (j >= 5 && j <= 6) { //第5和6的圆
            if (j == 5)
                var_flag = ["5", "6", "7", "8", "9"];
            else if (j == 6)
                var_flag = ["0", "1", "2", "3", "4"];
            for (var i = 0, len = 5; i < len; i++) {
                color = di[var_flag[i]][1].substr(0, 1);
                level = di[var_flag[i]][1].substr(-1);
                paintColorCircle(cas_con, j, i, angle_list_5, color_atla[color][level]);
            }
        } else if (j == 7) { //第7个圆 最中心
            var radius = radius_color_list[j];
            color = di["centre2"][1].substr(0, 1);
            level = di["centre2"][1].substr(-1);
            cas_con.fillStyle = color_atla[color][level];
            cas_con.beginPath();
            cas_con.moveTo(center_x, center_y);
            cas_con.arc(center_x, center_y, radius, 0, 2 * Math.PI, false);
            cas_con.closePath();
            cas_con.fill();
        }
    }
}

//填涂文字
function draw_text(di) {
    //开始填涂
    //文字
    var canvas = document.getElementById('fate_canvas');
    var ctx = canvas.getContext('2d');

    var title, //文本
        var_index; //索引变量

    //文字填涂到色块上
    for (var i = 0; i < 22; i++) {
        if (i >= 0 && i <= 4)
            var ra = radius_list[0];
        else if (i >= 5 && i <= 9)
            ra = radius_list[1];
        else if (i >= 10 && i <= 15)
            ra = radius_list[2];
        else if (i >= 16 && i <= 21)
            ra = radius_list[3];

        var circle = { //每一个圈的信息
            x: center_x,
            y: center_y, //x,y 指圆的中心
            radius: ra //圆的半径
        }

        var_index = i.toString()
        title = di[var_index]; //获取文本内容

        drawCircularText(ctx, circle, title, angle_list_text[var_index]);
    }

    //24节气文字的填涂
    for (var j = 0; j <= 1; j++) {
        var circle = { //每一个圈的信息
            x: center_x,
            y: center_y, //x,y 指圆的中心
            radius: radius_list[4 + j] //文字的半径
        }
        for (i = 0; i < 24; i++) {
            if (j == 0) //节气
                drawCircularText_solar(ctx, j, circle, solar_terms[i], angle_list_text_solar[i]);
            else if (j == 1) //时间
                drawCircularText_solar(ctx, j, circle, date_list[i], angle_list_text_solar[i])
        }
    }

    circle = { //每一个圈的信息
        x: center_x,
        y: center_y, //x,y 指圆的中心
        radius: radius_list[7] //文字的半径
    }

    //司天 在泉
    var var_sitian_zaiquan = {
        "22": ["在泉左肩"],
        "23": ["司天右间"],
        "24": ["司天"],
        "25": ["司天左间"],
        "26": ["在泉右肩"],
        "27": ["在泉"]
    };
    for (i = 22; i <= 27; i++) {
        var_index = i.toString()
        title = var_sitian_zaiquan[var_index]; //获取文本内容
        drawCircularText(ctx, circle, title, angle_list_text[var_index]);
    }

}

//画中心文字
function draw_center(di) {
    var canvas = document.getElementById('fate_canvas');
    var ctx = canvas.getContext('2d');


    var title1 = di["centre1"][0],
        title2 = di["centre2"][0],
        color = di["centre2"][1],
        radius = radius_list[6];
    drawCircularCentre(ctx, title1, title2, radius);
}


//计算节气
function getDate(y, n) {
    return new Date((31556925974.7 * (y - 1900) + sTermInfo[n] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
}

function getDateList(y) {
    var TermDate = new Array();
    for (var i = 0; i < solar_terms.length; i++) {
        var sterm = getDate(y, i);
        var stdateStr = (sterm.getMonth() + 1) + "-" + sterm.getUTCDate();
        TermDate.push(stdateStr);
    }
    return TermDate;
}


//画色块
//j 从外向里画 第j个大圆
//i 当前圆的第i个块
//var_angle_list 临时变量，第i块的角度
//color 第i块的颜色
function paintColorCircle(cas_con, j, i, var_angle_list, color) {
    var startAngle = var_angle_list[i] * 2 * Math.PI;
    var endAngle = var_angle_list[i + 1] * 2 * Math.PI;
    var radius = radius_color_list[j];

    cas_con.fillStyle = color;
    cas_con.beginPath();
    cas_con.moveTo(center_x, center_y);
    cas_con.arc(center_x, center_y, radius, startAngle, endAngle, false);
    cas_con.closePath();
    cas_con.fill();
}


//转换弧度
function rads(x) {
    return 2 * Math.PI * x;
}

//填涂文字
//circle 文字所在的圆的信息
//title 文章内容
//Angle 文字开始的角度和结束的角度
function drawCircularText(ctx, circle, title, Angle) {
    var radius = circle.radius, //文字所在圈的半径
        startAngle = rads(Angle[0]), //文字开始的角度
        endAngle = rads(Angle[1]), //文字结束的角度
        text_name = title[0]; //文字内容
    // color_level=title[1];       //文字代表的颜色和程度

    var angle = parseFloat(startAngle),
        index = 0, //遍历的索引
        character, //文字的每一个字符
        angleDecrement; //文字之间相差的角度

    if (endAngle < startAngle) //小于 说明跨过一整个圈 超过了2PI
        angleDecrement = (endAngle + 2 * Math.PI - startAngle) / (text_name.length - 1);
    else
        angleDecrement = (endAngle - startAngle) / (text_name.length - 1);

    ctx.save();
    ctx.fillStyle = 'black';
    ctx.font = '12px 微软雅黑';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';

    //对于文字中的每一个字符
    while (index < text_name.length) {
        character = text_name.charAt(index);
        ctx.save();
        ctx.beginPath();
        ctx.translate(circle.x + Math.cos(angle) * radius, circle.y + Math.sin(angle) * radius);
        ctx.rotate(Math.PI / 2 + angle);
        ctx.fillText(character, 0, 0);
        angle += angleDecrement;

        index++;
        ctx.restore();
    }
    ctx.restore();
}

//填涂文字节气
function drawCircularText_solar(ctx, j, circle, title, Angle) {
    var radius = circle.radius, //文字所在圈的半径
        startAngle = rads(Angle), //文字开始的角度
        text_name = title, //文字内容
        angle = parseFloat(startAngle);

    ctx.save();
    ctx.fillStyle = 'black';
    ctx.font = '11px 微软雅黑';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';

    ctx.save();
    ctx.beginPath();
    ctx.translate(circle.x + Math.cos(angle) * radius, circle.y + Math.sin(angle) * radius);
    if (j == 0)
        ctx.rotate(angle); //节气
    else if (j == 1)
        ctx.rotate(angle + Math.PI / 2); //日期
    ctx.fillText(text_name, 0, 0);
    ctx.restore();

    ctx.restore();
}

//填涂中心文字
function drawCircularCentre(ctx, title1, title2) {


    ctx.save();
    ctx.fillStyle = 'black';
    ctx.font = '13px 微软雅黑';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';

    ctx.fillText(title1, center_x + 7, center_y - 7);
    ctx.fillText(title2, center_x + 30, center_y + 8);

    ctx.restore();
}



function drawarrow(di) //画箭头
{
    var canvas = document.getElementById("fate_canvas");
    var context = canvas.getContext("2d");

    var theta = parseFloat(di["rate"][0]);

    var end_locate = calculate_location(center_x, center_y, theta, 280); //获取终点坐标。起点x、y坐标，角度，长度
    // console.log(theta);

    function Line(x1, y1, x2, y2) {
        this.x1 = x1;
        this.y1 = y1;
        this.x2 = x2;
        this.y2 = y2;
        // console.log(x1, x2, y1, y2);
    }

    Line.prototype.drawWithArrowheads = function (ctx) {
        // arbitrary styling

        var gradient = ctx.createLinearGradient(0, 0, 600, 0); //透明渐变效果
        gradient.addColorStop(0, "rgba(099,000,000,0.2)");
        // gradient.addColorStop(1, "rgba(255,204,000,0.9)");
        gradient.addColorStop(1, "rgba(96,92,177,0.9)");
        ctx.shadowOffsetX = 15; // 阴影Y轴偏移
        ctx.shadowOffsetY = 15; // 阴影X轴偏移
        ctx.shadowBlur = 11; // 模糊尺寸
        ctx.shadowColor = 'rgba(0, 0, 0, 0.1)'; // 颜色


        ctx.strokeStyle = gradient;
        ctx.fillStyle = gradient;
        // ctx.strokeStyle = "#50b7c1"; 
        // ctx.fillStyle = "#50b7c1"; 
        // ctx.globalAlpha=0.7;
        ctx.lineWidth = 1;

        // draw the line
        ctx.beginPath();
        ctx.moveTo(this.x1, this.y1);
        ctx.lineTo(this.x2, this.y2);
        ctx.lineWidth = 6;
        ctx.stroke();

        // draw the starting arrowhead
        var startRadians = Math.atan((this.y2 - this.y1) / (this.x2 - this.x1));
        startRadians += ((this.x2 > this.x1) ? -90 : 90) * Math.PI / 180;
        // this.drawArrowhead(ctx,this.x1,this.y1,startRadians);    //起始点箭头 双向箭头

        // draw the ending arrowhead
        var endRadians = Math.atan((this.y2 - this.y1) / (this.x2 - this.x1));
        endRadians += ((this.x2 > this.x1) ? 90 : -90) * Math.PI / 180;

        var list_xy = calculate_location(this.x2, this.y2, theta, 5); //箭头的三角形 向前一点
        this.drawArrowhead(ctx, list_xy.x, list_xy.y, endRadians);
    }

    Line.prototype.drawArrowhead = function (ctx, x, y, radians) {
        ctx.save();
        ctx.beginPath();
        ctx.translate(x, y);
        ctx.rotate(radians);
        ctx.moveTo(0, 0);
        ctx.lineTo(10, 25); //调节三角形大小
        ctx.lineTo(-10, 25);
        ctx.closePath();
        ctx.restore();
        ctx.fill();
    }

    // create a new line object
    var line = new Line(center_x, center_y, end_locate.x, end_locate.y);
    // draw the line
    line.drawWithArrowheads(context);
}


function calculate_location(center_x, center_y, theta, line_length) { //计算箭头终点坐标
    // var line_length=265;

    // var var_x = center_x - Math.sin((theta + 120 / 360) * 2 * Math.PI - Math.PI / 2) * line_length; //theta 从后台返回的数值 120/360 从我画的图的起始轴 到 大寒的第一天的角度
    // var var_y = center_y + Math.cos((theta + 120 / 360) * 2 * Math.PI - Math.PI / 2) * line_length;
    // var end_locate = {
    //     x: var_x,
    //     y: var_y
    // };
    // return end_locate;

    var alpha = 1 / 12;  //大寒起始日与y轴正轴的夹角，始终为30°
    var gama;  //用于计算最终（x,y）坐标的角度
    var pi = Math.PI;  //就是派
    var l = line_length;  //圆的半径，即箭杆长度
    var x0 = center_x, y0 = center_y; //圆心坐标(x0, y0)
    var var_x,var_y; //终点坐标
    if (0 < (theta + alpha) < 0.25){  //第三象限
        gama = pi/2 - 2*pi*(theta + alpha);
        var_x = x0 - l*Math.cos(gama);
        var_y = y0 + l*Math.sin(gama);
    }
    if(0.25 < (theta + alpha) <= 0.5){//第四象限
        gama = pi - 2*pi*(theta + alpha);
        var_x = x0 - l*Math.sin(gama);
        var_y = y0 - l*Math.sin(gama);
    }
    if(0.5 < (theta + alpha) <= 0.75){//第一象限
        gama = 3*pi/2 - 2*pi*(theta+alpha);
        var_x = x0 + l*Math.cos(gama);
        var_y = y0 - l*Math.sin(gama);
    }
    if(0.75 < (theta + alpha) <= 1){//第一象限
        gama = -3*pi/2 + 2*pi*(theta+alpha);
        var_x = x0 + l*Math.cos(gama);
        var_y = y0 + l*Math.sin(gama);
    }
    var end_locate = {
        x: var_x,
        y: var_y
    };
    // console.log(alpha, theta ,gama, l, center_x, center_y, var_x, var_y);
    return end_locate;
}



//  处理  第二个圆盘的 解释内容！
function yunqi_event(urls) {
    $.ajax({
        type: "GET",
        url: urls,
        dataType: "json",
        async: true,
    }).done(function (data) {
        // get_context(data); // 请求完毕，执行
        // console.log('yunqi_event, 528')
    }).fail(function () {
        Document.write('服务器超时，请重试！()');
    });
}


//   日历，改动 运势里面的 内容
// function luck_html_change(send_date) {
//     var urls = "https://www.5y6qi.com/ssms/api/getmessage?method=wskList&date=" + send_date;
//     // var p1_jin = document.getElementById("p_jin");
//     // var p1_mu = document.getElementById("p_mu");
//     // var p1_shui = document.getElementById("p_shui");
//     // var p1_huo = document.getElementById("p_huo");
//     // var p1_tu = document.getElementById("p_tu");

//     // var p2_jin = document.getElementById("2p_jin");
//     // var p2_mu = document.getElementById("2p_mu");
//     // var p2_shui = document.getElementById("2p_shui");
//     // var p2_huo = document.getElementById("2p_huo");
//     // var p2_tu = document.getElementById("2p_tu");


//     // $.ajax({
//     //     type: "GET",
//     //     url: urls,
//     //     dataType: "json",
//     //     async: true,
//     // }).done(function (data) {
//     //     //  装填数据
//     //         p1_jin.innerHTML = data["jin"][1],
//     //         p1_mu.innerHTML = data["mu"][1],
//     //         p1_shui.innerHTML = data["shui"][1],
//     //         p1_huo.innerHTML = data["huo"][1],
//     //         p1_tu.innerHTML = data["tu"][1];

//     //         p2_jin.innerHTML = data["jin"][1],
//     //         p2_mu.innerHTML = data["mu"][1],
//     //         p2_shui.innerHTML = data["shui"][1],
//     //         p2_huo.innerHTML = data["huo"][1],
//     //         p2_tu.innerHTML = data["tu"][1];

//     //         // var tempx = data['zhongyun'][1];
//     //         // console.log(tempx)

//     // }).fail(function () {
//     //     document.write('服务器超时，请重试！');
//     // });
// }