// 绘制黑白相间比例尺
export function drawScaleTwo(value, currentScaleUnit) {
    value = value * 3;
    var canvas = document.querySelector("#scaleBar");
    var ctx = canvas.getContext("2d");
    canvas.height = 23;
    // canvas.style.border = "1px solid #000"
    // 把当前的上下文的状态保存起来
    ctx.transform(1, 0, 0, 1, 15, 0);
    ctx.save();
    //设置比例尺文字样式
    const fontSize = "12";
    ctx.font = "normal bold " + fontSize + "px Arial";
    ctx.fillStyle = "white";
    ctx.textBaseline = "hanging";
    //比例尺最小格宽度、高度
    const width = 35;
    //绘制文字
    ctx.transform(1, 0, 0, 1, -10, 0);
    for (let i = 0; i < 6; i++) {
        // if (i < 1) {
        //   ctx.fillText(0, width * i, 0);
        // } else {
        ctx.fillText(parseFloat(((i / 5) * value).toFixed(1)), width * i, 0);
        // }
    }
    ctx.transform(1, 0, 0, 1, 8, 0);
    ctx.fillText(currentScaleUnit, width * 5 + 10, 10);
    // 把上一次保存的ctx状态，还原。
    ctx.restore();
    for (let i = 0; i < 5; i++) {
        //开一个新路径，开启新状态的绘图
        ctx.beginPath();
        ctx.rect(width * i, fontSize, width, 8);
        // i === 3 || i == 0 ? (i === 3 ? ctx.rect(28 * 4, fontSize, 28 * 2, 8) : ctx.rect(28 * i, fontSize, 28, 8)) : ctx
        //   .rect(28 * i, fontSize, 28 * i, 8)
        //描边的意思
        ctx.stroke();
        //设置填充的样式
        i % 2 === 0 ? (ctx.fillStyle = "black") : (ctx.fillStyle = "white");
        //进行填充的工作
        ctx.fill();
    }
}
//绘制格网
export function drawGrid(row, col, viewDom, extent) {
    var canvas = document.querySelector("#grid");
    const thematicMapDom = getcurrentdomwidth("mapContent");
    canvas.width = thematicMapDom.w;
    canvas.height = thematicMapDom.h;
    // canvas.style.border = '1px solid black'
    var ctx = canvas.getContext("2d");
    //获取格网dom真实宽高
    const gridDom = getcurrentdomwidth("grid");
    //获取专题图dom真实宽高
    const map2dDom = getcurrentdomwidth(viewDom);
    //每一小格宽度
    const gridW = map2dDom.concentW / col;
    //每一小格高度
    const gridH = map2dDom.concentH / row;
    //每一小格高度
    // const gridH=10
    for (let i = 0; i < col; i++) {
        //绘制上下格网
        ctx.moveTo(i * gridW + thematicMapDom.paddingL + 1, thematicMapDom.paddingT); //画笔移动到100，100点
        ctx.lineTo(i * gridW + thematicMapDom.paddingL + 1, thematicMapDom.paddingT - 2); //从画笔位置，画一条直线到200，100点
        ctx.moveTo(
            i * gridW + (thematicMapDom.paddingL - gridDom.paddingL) + 1,
            thematicMapDom.concentH + thematicMapDom.paddingT
        ); //画笔移动到100，100点
        ctx.lineTo(
            i * gridW + (thematicMapDom.paddingL - gridDom.paddingL) + 1,
            thematicMapDom.concentH + thematicMapDom.paddingT + 6
        ); //从画笔位置，画一条直线到200，100点
        //设置线宽
        ctx.lineWidth = 1;
        //设置描边样式
        ctx.strokeStyle = "blue"; //rgb(),rgba(),red,#fff
        ctx.stroke(); //描边
        //绘制上下坐标文字[113, 30.2, 115, 32.2]
        const fontSize = "12";
        ctx.font = "normal bold " + fontSize + "px Arial";
        ctx.textBaseline = "bottom";
        const ftMsg = ((extent[0] - extent[2]) / col) * i + extent[2];
        const ftMsgUnit = ftMsg === 0 ? "" : ftMsg < 0 ? "W" : "E";
        ctx.fillText(
            DegreesCoverttoDuFenMiao(Math.abs(ftMsg).toString()) +
            ftMsgUnit,
            i * gridW + (thematicMapDom.paddingL - gridDom.paddingL) - 18,
            thematicMapDom.paddingT
        );
    }
    for (let i = 0; i < row; i++) {
        //绘制左右格网
        ctx.moveTo(thematicMapDom.paddingL, i * gridH + thematicMapDom.paddingT + 1);
        ctx.lineTo(thematicMapDom.paddingL - 2, i * gridH + thematicMapDom.paddingT + 1);
        ctx.moveTo(
            thematicMapDom.paddingL + thematicMapDom.concentW + 4,
            i * gridH + thematicMapDom.paddingT + 1
        );
        ctx.lineTo(
            thematicMapDom.paddingL + thematicMapDom.concentW + 6,
            i * gridH + thematicMapDom.paddingT + 1
        );
        //设置线宽
        ctx.lineWidth = 2;
        //设置描边样式
        ctx.strokeStyle = "blue"; //rgb(),rgba(),red,#fff
        ctx.stroke(); //描边
        //设置比例尺文字样式
        ctx.textAlign = "right";
        const fontSize = "12";
        ctx.font = "normal bold " + fontSize + "px Arial";
        ctx.textBaseline = "hanging";
        const ftMsg = ((extent[3] - extent[1]) / col) * i + extent[1];
        const ftMsgUnit = ftMsg === 0 ? "" : ftMsg > 0 ? "N" : "S";
        ctx.fillText(
            DegreesCoverttoDuFenMiao(Math.abs(ftMsg).toString()) +
            ftMsgUnit,
            thematicMapDom.paddingL - 2,
            i * gridH + thematicMapDom.paddingT + 1
        );
    }
}
function getcurrentdomwidth(dom) {
    const domObj = document.getElementById(dom);
    const clientWidth = domObj.clientWidth;
    const clientHeight = domObj.clientHeight;
    const offsetWidth = domObj.offsetWidth;
    const offsetHeight = domObj.offsetHeight;
    const clientLeft = parseFloat(getComputedStyle(domObj).getPropertyValue("padding-left"));
    const clientTop = parseFloat(getComputedStyle(domObj).getPropertyValue("padding-top"));
    return {
        w: clientWidth,
        h: clientHeight,
        concentW: offsetWidth,
        concentH: offsetHeight,
        paddingL: clientLeft,
        paddingT: clientTop
    };
}
function DegreesCoverttoDuFenMiao(degrees) {
    let du = degrees.split(".")[0];
    if (degrees.split(".")[1] !== undefined) {
        const fen = ("0." + degrees.split(".")[1]) * 60 + "";
        const miao = (("0." + fen.split(".")[1]) * 60).toFixed(0);
        return du + "°" + fen.split(".")[0] + "′" + miao + "″";
    } else {
        return du + "°";
    }
}
//获取当前日期函数
export function getNowFormatDate() {
    let date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        strDate = date.getDate();
    return `${year}年${month}月${strDate}日`;
}
