import html2canvas from 'html2canvas';
import echarts from 'echarts'
/**
 * 声明Y轴比例
 */
var scalingX = 810/1280
var scalingY = 450/720
console.log(scalingY, '缩放的Y轴')
/**
 * 绘制矩形
 * @param layer 图层
 * @param item 绘制对象
 */
function drawRect(stage, layer, item, tr, jointUrl, hierarchy) {
    /** 先声明组合 然后画图形 有文字则画文字 最后填充layer */
    return new Promise(async (r, j) => {
        console.log(item, jointUrl, '调用本次方法用的值')
        var rotaWidth = 0
        var rotaHeight=0
        if (item.style.position.rot <= 90 && item.style.position.rot !== 0) { console.log('进入90度的处理'); rotaWidth = item.style.position.cx; rotaHeight = -(item.style.position.cy / 3) } else if (item.style.position.rot <= 150 && item.style.position.rot !== 0) { console.log('进入150度的处理'); rotaWidth = item.style.position.cx; rotaHeight = item.style.position.cy / 3 }
        else if (item.style.position.rot <= 190 && item.style.position.rot !== 0) { console.log('进入190度的处理'); rotaWidth = item.style.position.cx; rotaHeight = item.style.position.cy } else if (item.style.position.rot <= 280 && item.style.position.rot !== 0) { console.log('进入280度的处理'); rotaWidth = -(item.style.position.cy / 2); rotaHeight = item.style.position.cy / 2 }
        var originalAttrs = {
            x: item.style.position.x + rotaWidth,
            y: item.style.position.y + rotaHeight ,
            scaleX: 1,
            scaleY: 1,
            draggable: true,
            rotation: 0
        };
        console.log('调用了矩形渲染方法')
        var group = new Konva.Group(originalAttrs);
        //console.log(item.style.fill.gradientFill[0].colors.Color, '渐变的颜色')
        var color0 = ''
        var color5 = ''
        var color1 = ''
        var rotateNum = item.style.position.rot !== 0.0 || item.style.position.rot !== 0 ? item.style.position.rot:0
        console.log(item, '当前传进来的元素')
        if (item.style.fill && item.style.fill.gradientFill !== null) {
            console.log(item.style.fill.gradientFill.colors[0].Color, '颜色测试 ，是否取值正确')
            color0 = item.style.fill.gradientFill.colors[0].Color
            color5 = item.style.fill.gradientFill.colors[1].Color
            color1 = item.style.fill.gradientFill.colors[2].Color
        }
        var rect = new Konva.Rect({
            stroke: item.style.border !== null && item.style.border.color && item.style.border.color.solidFill ? item.style.border.color.solidFill : '',
            strokeWidth: item.style.border !== null && item.style.border.outline && item.style.border.outline.Width ? item.style.border.outline.Width : 1,
            fill: item.style.fill !== null && item.style.fill.solidFill !== null ? item.style.fill.solidFill : 'transparent',
            //fill:  'red',
            width: item.style.position.cx,
            height: item.style.position.cy,
            shadowColor: "black",
            draggable: true,
            fillLinearGradientStartPoint: item.style.fill !== null && item.style.fill.gradientFill == null ? { x: 0, y: 0 } : { x: -100, y: -100 },
            fillLinearGradientEndPoint: item.style.fill !== null && item.style.fill.gradientFill == null ? { x: 0, y: 0 } : { x: 100, y: 100 },
            fillLinearGradientColorStops: item.style.fill !== null && item.style.fill.gradientFill == null ? null : [0, color0, 0.5, color5, 1, color1],
            rotation: rotateNum,
            //scaleX: scalingX,
            //scaleY: scalingY,
            onFinish: function () {
                // remove all references from Konva
                rect.destroy();
            }
        });
        var scale = 1;
        scale *= -1;
        if (item.style.position.flipH === 1) { Rect.scale({ x: scale, y: 1 }) }
        if (item.style.position.flipV === 1) { Rect.scale({ x: 1, y: scale }); rotaHeight = item.style.position.cy}
        group.add(rect);
        if (item.style.fill && item.style.fill.blipFill) {
            console.log('准备加载图片')
            var imageObj = new Image();
            imageObj.onload = function () {
                rect.fillPatternImage(imageObj);
                rect.fillPatternRepeat('no-repeat')
                rect.fillPatternScale()
                group.add(rect)
                group.zIndex(hierarchy)
                layer.add(group);
                console.log(item.index, '是图片的层级！')
                layer.draw();
            };
            imageObj.crossOrigin = 'Anonymous';
            imageObj.src = joinUrl + item.style.fill.blipFill.url
        }
        if (item.textBody !== null && item.textBody.paragraphs[0].texts.length !== 0) { var renderText = await drawText(stage, layer, item, group, jointUrl) }
        r(200)
    })
};

/** 绘制弧形 */
function drawArc(stage, layer, item, hierarchy) {
    /** 先声明组合 然后画图形 有文字则画文字 最后填充layer */
    return new Promise(async (r, j) => {
        var originalAttrs = {
            x: item.style.position.x,
            y: item.style.position.y,
            //scaleX: scalingX,
            //scaleY: scalingY,
            draggable: true,
            rotation: 0
        };
        var group = new Konva.Group(originalAttrs);
        var arc = new Konva.Path({
            data: item.svg.d,
            stroke: "#" + item.style.border.color.solidFill,
            strokeWidth: item.style.border.outline.Width,
            draggable: true,
            onFinish: function () {
                // remove all references from Konva
                drawArc.destroy();
            }
        });
        group.add(arc);
        if (item.paragraph && item.paragraph[0].texts.length) drawTextInfo(stage, layer, item.paragraph, group, item.paragraph[0].style.position)
        layer.add(group);
        group.zIndex(hierarchy)
        layer.batchDraw();
        r(200)
    })
};

/** 绘制弧形 */
function drawEllipse(stage, layer, item, hierarchy) {
    return new Promise(async (r, j) => {
        console.log('调用了圆形绘图')
        /** 先声明组合 然后画图形 有文字则画文字 最后填充layer */
        var originalAttrs = {
            x: (item.style.position.x + item.style.position.cx / 2) * scalingY,
            y: (item.style.position.y + item.style.position.cy / 2) * scalingY,
            //scaleX: scalingX,
            //scaleY: scalingY,
            draggable: true,
            rotation: 0
        };
        var group = new Konva.Group(originalAttrs);
        var arc = new Konva.Ellipse({
            width: item.paragraph[0].style.position.cx,
            height: item.paragraph[0].style.position.cy,
            radiusX: item.svg.rx,
            radiusY: item.svg.ry,
            stroke: item.style.border.color.solidFill,
            fill: item.style.fill.solidFill ? item.style.fill.solidFill : '',
            strokeWidth: item.style.border.width ? item.style.border.width : 1,
            onFinish: function () {
                // remove all references from Konva
                drawEllipse.destroy();
            }
        });

        //绘制背景图+填充
        if (item.fill) {
            var imageObj = new Image();
            imageObj.onload = function () {
                arc.fillPatternImage(imageObj);
                group.add(arc);
                if (item.textBody && item.textBody.paragraphs[0].texts.length !== 0) drawText(stage, layer, item, group)
            };
            imageObj.src = item.fill.image
        }
        group.add(arc);
        layer.add(group);
        group.zIndex(hierarchy)
        layer.batchDraw();
        r(200)
    })
};


/** 绘制多边形Line */
function drawLine(stage, layer, item, hierarchy) {
    /** 先声明组合 然后画图形 有文字则画文字 最后填充layer */
    return new Promise(async (r, j) => {
        console.log('进入线条')
        var rotateNum = 0
        var rotaWidth = 0
        var rotaHeight = 0
        if (item.style.position.flipH === 1) { rotateNum = 180 } else if (item.style.position.flipV === 1) { rotateNum = 90 }
        if (item.style.position.rot != 0 || item.style.position.rot != 0.0) { rotateNum += item.style.position.rot }
        if (rotateNum !== 0) { rotaWidth = item.style.position.cx; rotaHeight = item.style.position.cy }
        var originalAttrs = {
            x: item.style.position.x + rotaWidth,
            y: item.style.position.y + rotaHeight,
            //scaleX: scalingX,
            //scaleY: scalingY,
            draggable: true,
            //rotation: 0
        };
        var group = new Konva.Group(originalAttrs);
        let svgShape = item.svg
        var poly = new Konva.Line({
            x: item.style.position.x,
            y: item.style.position.y,
            points: svgShape.type === 'polygon' || svgShape.type === 'polyline' ? svgShape.points : svgShape.points.replace(/\s+/g, ",").split(',').map(i => +i),
            //points: svgShape,
            fill: item.style.fill.solidFill ? item.style.fill.solidFill : '',
            stroke: '#' + item.style.border.color.solidFill,
            strokeWidth: item.style.border.outline.Width,
            //closed: svgShape.type !== 'polyline',
            rotation: rotateNum,
            //scaleX: scalingX,
            //scaleY: scalingY,
        });
        console.log(rotateNum,'旋转角度')
        group.add(poly);
        if (item.textBody && item.textBody.paragraphs[0].texts.length !== 0) drawText(stage, layer, item, group)
        layer.add(group);
        group.zIndex(hierarchy)
        layer.batchDraw();
        r(200)
    })
};

/** 绘制路径 */
function drawPath(stage, layer, item, tr, joinUrl, hierarchy) {
    return new Promise(async (r, j) => {
        console.log(item, hierarchy, joinUrl, '调用的item值')
        console.log(item.formula, '查看公式')
    /** 先声明组合 然后画图形 有文字则画文字 最后填充layer */
        //var rotateNum = 0
        var rotaWidth=0
        var rotaHeight=0
        if (item.style.position.rot <= 45 && item.style.position.rot !== 0) { rotaWidth = 0; rotaHeight = -(item.style.position.cy / 3) } else if (item.style.position.rot <= 90 && item.style.position.rot !== 0) { console.log('进入90度的处理'); rotaWidth = item.style.position.cx; rotaHeight = -(item.style.position.cy / 3) } else if (item.style.position.rot <= 150 && item.style.position.rot !== 0) { console.log('进入150度的处理'); rotaWidth = item.style.position.cx; rotaHeight = item.style.position.cy / 3 }
        else if (item.style.position.rot <= 190 && item.style.position.rot !== 0) { console.log('进入190度的处理'); rotaWidth = item.style.position.cx; rotaHeight = item.style.position.cy } else if (item.style.position.rot <= 280 && item.style.position.rot !== 0) { console.log('进入280度的处理');rotaWidth = -(item.style.position.cy/2); rotaHeight = item.style.position.cy/2 }
        if (item.style.position.flipH !== 0) { rotaWidth = item.style.position.cx }
        if (item.style.position.flipV !== 0) { rotaHeight = item.style.position.cy}
        console.log(rotaWidth, rotaHeight, '宽高')
        console.log(item.style.position.x, rotaWidth, item.style.position.x + rotaWidth,'X点')
        var originalAttrs = {
            x: item.style.position.x + rotaWidth,
            y: item.style.position.y + rotaHeight,
            width: item.style.position.cx,
            height: item.style.position.cy,
            //scaleX: scalingX,
            //scaleY: scalingY,
            draggable: true,
            //rotation: rotateNum
        };
        let svgShape = item.svg;
        var group = new Konva.Group(originalAttrs);
        var arc = new Konva.Path({
            data: svgShape.d,
            width: item.style.position.cx,
            height: item.style.position.cy,
            fill: item.style.fill && svgShape.d && svgShape.close ? item.style.fill.solidFill : '',
            stroke: item.style.border !== null && item.style.border.color && item.style.border.color.solidFill !== null ? item.style.border.color.solidFill : '',
            strokeWidth: item.style.border !== null && item.style.border.outline && item.style.border.outline.width ? item.style.border.outline.width : '0',
            rotation: item.style.position.rot ? item.style.position.rot:0,
            draggable: true,
            //scaleX: scalingX,
            //scaleY: scalingY,
        });
        var scale = 1;
        scale *= -1;
        if (item.style.position.flipH === 1) { arc.scale({ x: scale, y: 1 })}
        if (item.style.position.flipV === 1) { arc.scale({ x: 1, y: scale }); rotaHeight = item.style.position.cy }
        group.add(arc);
        if (item.style.fill && item.style.fill.blipFill) {
            if (item.style.fill.type === 3 || item.style.fill.type === 4) {
                var imageObj = new Image();
                imageObj.onload = function () {
                    arc.fillPatternImage(imageObj);
                    arc.fillPatternRepeat('no-repeat')
                    arc.fillPatternScale()
                    group.add(arc)
                    group.zIndex(hierarchy)
                    layer.add(group);
                    layer.draw();
                };
                imageObj.crossOrigin = 'Anonymous';
                imageObj.src = joinUrl + item.style.fill.blipFill.url;
            }
        }
        if (item.textBody && item.textBody.paragraphs.length !==0) drawText(stage, layer, item, group, joinUrl, hierarchy)
        layer.add(group);
        group.zIndex(hierarchy)
        layer.batchDraw();
        r(200)
    })
};


/** 绘制图片 */
function drawImage(stage, layer, item, tr, imgUrl,sasinfo,hierarchy) {
    return new Promise(async (r, j) => {
        var imageAttrs = {
            x: item.style.position.x,
            y: item.style.position.y,
            width: item.style.position.cx,
            height: item.style.position.cy,
            draggable: true,
            rotation: 0,
            //scaleX: scalingX,
            //scaleY: scalingY,
        };
        var group = new Konva.Group(imageAttrs);
        var imageUrl = item.image.url
        var totalimages = imgUrl
        var imagesURLinfo = imgUrl + item.image.url + sasinfo
        console.log(imagesURLinfo,'内部图片完整路径')
        var rotateNum = '0'
        if (item.style.position.flipH === 1) { rotateNum = '180' } else if (item.style.position.flipV === 1) { rotateNum = '90' } else if (item.style.position.rot === 0.0) { rotateNum = item.style.position.rot }
        Konva.Image.fromURL(imagesURLinfo, function (darthNode) {
            darthNode.setAttrs({
                width: item.style.position.cx,
                height: item.style.position.cy,
                draggable: true,
                rotation: rotateNum,
                //scaleX: scalingX,
                //scaleY: scalingY,
                onFinish: function () {
                    // remove all references from Konva
                    drawImage.destroy();
                }
            });
            group.add(darthNode)
            layer.add(group);
            group.zIndex(hierarchy)
            layer.draw();
        });
        r(200)
    })
}
function imageRender(item, value, group) {
    console.log(item, value, '调用方法')
    var keyinfo = value
    var groupsinfo = group
    var keys = '?sv=2019-02-02&st=2020-08-04T07%3A30%3A37Z&se=2024-08-05T07%3A30%3A00Z&sr=c&sp=rl&sig=x4PbJZ5qh8yjFdZwOy1EUca98MaLQyXKth2XGIZ%2Bt%2B4%3D'
    if (item.fill) {
        var imageObj = new Image();
        imageObj.setAttribute('crossOrigin', 'anonymous');
        imageObj.onload = function () {
            keyinfo.fillPatternImage(imageObj);
            groupsinfo.add(keyinfo);
            if (item.paragraph && item.paragraph[0].texts.length) drawTextInfo(stage, layer, item.paragraph, group, item.paragraph[0].style.position)
        };
        imageObj.src = images;
    }
}
/** 绘制文本 */
function drawText(stage, layer, paragraph, group, url, hierarchy) {
    return new Promise(async (r, j) => {
        console.log(paragraph, url, '传送进文字方法内容')
        var skewingX = 0
        var skewingY = 0
        if (paragraph.style.position.rot <= 90 && paragraph.style.position.rot !== 0) { skewingX = -paragraph.style.position.cx; skewingY = -(paragraph.style.position.cy / 3) } else if (paragraph.style.position.rot <= 150 && paragraph.style.position.rot !== 0) { skewingX = -paragraph.style.position.cx; skewingY = paragraph.style.position.cy / 3 }
        else if (paragraph.style.position.rot <= 190 && paragraph.style.position.rot !== 0) { skewingX = -paragraph.style.position.cx; skewingY = paragraph.style.position.cy } else if (paragraph.style.position.rot <= 280 && paragraph.style.position.rot !== 0) { skewingX = -(paragraph.style.position.cy / 2); skewingY = paragraph.style.position.cy / 2 }
        var itemContent = paragraph.textBody.paragraphs
        var textWidth = Math.ceil(paragraph.style.position.cx - (paragraph.textBody.left + paragraph.textBody.right))
        var textHeight = Math.ceil(paragraph.style.position.cy - (paragraph.textBody.top + paragraph.textBody.bottom))
        var textX = Math.ceil(paragraph.style.position.x + paragraph.textBody.left)
        var textY = Math.ceil(paragraph.style.position.y + paragraph.textBody.top)
        var paragraphH = ''
        var lineHeight = ''
        var fullContent = ''
        var rotateNum = '0'
        var fontSizeinfo = '0'
        var paragraphHeight = 1
        //多段段落行距高度
        var pheightValue = 0
        //if (paragraph.style.position.flipH === 1) { rotateNum = '180' } else if (paragraph.style.position.flipV === 1) { rotateNum = '90' } else if (paragraph.style.position.rot === 0.0) { rotateNum = paragraph.style.position.rot }
        for (var i = 0; i < itemContent.length; i++) {
            var textContent = itemContent[i].texts
            var textStyle = itemContent[i].style
            var itemStyleX = Math.ceil(paragraph.style.position.x + paragraph.textBody.left)
            var itemStyleY = Math.ceil(paragraph.style.position.y + paragraph.textBody.top)
            var buChar = ''
            var recurringNum=i
            lineHeight = paragraphH * i + pheightValue
            if (itemContent[i].texts.length !=0 && itemContent[i].buChar && itemContent[i].buChar.buchar) {
                let joinUrl = url + itemContent[i].buChar.buchar
                buChar = itemContent[i].buChar.buchar
            }
            for (var y = 0; y < textContent.length; y++) {
                if (textContent[y].content.indexOf(" ") == -1) {
                    fontSizeinfo = textContent[y].style.size
                }
                    fullContent += buChar + textContent[y].content
                    buChar=''
                    paragraphH = textContent[y].style.size
            }

            if (textContent.length === 0) { pheightValue = pheightValue + Number(fontSizeinfo);}
            var sentence = fullContent
            if (sentence.indexOf("") != -1) { sentence = sentence.trim(); }
            if (itemContent[i].texts.length !== 0 && sentence.length * textContent[0].style.size > textWidth) { paragraphHeight = Math.ceil(sentence.length * textContent[0].style.size / textWidth) } else { paragraphHeight = 1;}
            if (fullContent !== '' && textContent.length !==0) {
                var textName = new Konva.Text({
                x: skewingX,
                text: fullContent,
                width: textWidth,
                height: textHeight,
                align: textStyle.hori.toLowerCase(),
                verticalAlign: textStyle.vert === "Center" ? "middle" : textStyle.vert.toLowerCase(),
                fontSize: textContent.length !== 0 && fontSizeinfo != '0' ? fontSizeinfo : textContent[0].style.size,
                fontFamily: textContent.length !== 0 && textContent[0].style.family,
                fill: textContent.length !== 0 && textContent[0].style.color ? textContent[0].style.color :"#000000",
                fontStyle: textContent.length !== 0 && textContent[0].style.bold === false ? 'normal' : 'bold',
                y: lineHeight+ Math.abs(skewingY),
                rotation: rotateNum,
                draggable: true,
                //scaleX: scalingX,
                //scaleY: scalingY,
            })
            group.add(textName);
            group.zIndex(paragraph.index)
            fullContent = ''
                if (paragraphHeight !== 1) {
                    pheightValue = pheightValue + paragraphHeight * Number(fontSizeinfo)
                } else {
                    pheightValue = Number(fontSizeinfo)
                    //pheightValue=0
                }
            }
        }
        r(200)
    })
}
/*表格绘制方法*/
function drawTable(stage, layer, group, item) {
    return new Promise(async (r, j) => {
        var boxWidth = item.extstyle.columnWidth

        var tablewidth = 0
        var trHeight = ''
        boxWidth.forEach(item => {

            tablewidth = tablewidth + item
        })
        //创建Table元素
        var createdDiv = document.createElement('table')
        var addCreated = document.getElementById("container").appendChild(createdDiv);
        var tableid = item.uid
        createdDiv.id = item.uid
        createdDiv.style.width = tablewidth + 'px'
        createdDiv.style.border = 2 + 'px solid #000';
        createdDiv.style.position = 'relative'
        createdDiv.style.top = 9999 + 'px'
        var createdbody = document.createElement('tbody')
        var addbody = document.getElementById(tableid).appendChild(createdbody);
        addbody.id = 'body' + item.uid
        var tbodyid = 'body' + item.uid
        if (item.tr) {
            for (var i = 0; i < item.tr.length; i++) {
                trHeight += item.tr[i].height
                var tdData = item.tr[i].td
                var trDiv = document.createElement('tr')
                var addtr = document.getElementById(tbodyid).appendChild(trDiv);
                var trDivid = item.uid + 'trinfo' + i
                trDiv.id = item.uid + 'trinfo' + i
                for (var f = 0; f < tdData.length; f++) {
                    var TableContent = tdData[f].textBody.paragraphs
                    var tdDiv = document.createElement('td')
                    var addtd = document.getElementById(trDivid).appendChild(tdDiv);
                    //获取高度给整体高度赋值
                    createdDiv.style.height = trHeight * item.tr.length + 'px'
                    //td元素样式
                    tdDiv.id = item.uid + 'info' + i + f
                    var tdDivid = item.uid + 'info' + i + f
                    tdDiv.style.flexDirection = 'row'
                    tdDiv.style.fontSize = TableContent[0].texts[0] ? TableContent[0].texts[0].style.size + 'px' : ''
                    tdDiv.style.fontFamily = TableContent[0].texts[0] ? TableContent[0].texts[0].style.family : ''
                    tdDiv.style.color = TableContent[0].texts[0] ? TableContent[0].texts[0].style.color : ''
                    tdDiv.style.textDecoration = TableContent[0].texts[0] ? TableContent[0].texts[0].style.underline : ''
                    tdDiv.style.width = boxWidth[f]
                    tdDiv.style.height = trHeight
                    tdDiv.style.textAlign = TableContent[0].style.hori
                    tdDiv.style.display = 'table-cell'
                    tdDiv.style.verticalAlign = 'inherit'
                    tdDiv.style.border = 1 + 'px solid #000'
                    tdDiv.style.padding = 5 + 'px'
                    //获取文字内容
                    var textDetails = TableContent[0].texts[0] ? TableContent[0].texts[0].content : ''
                    //var textDetails = '这是测试test'+i+f
                    var createdText = document.createTextNode(textDetails)
                    var addText = document.getElementById(tdDivid).appendChild(createdText)
                }
            }
        }
        html2canvas(document.getElementById(tableid), {
            backgroundColor: null,
        }).then((canvas) => {
            document.getElementById(tableid).innerHTML = "";
            const img = canvas.toDataURL();
            var imageObj = new Image();
            imageObj.src = img;
            document.getElementById(tableid).remove()
            imageObj.setAttribute('crossOrigin', 'anonymous');
            imageObj.onload = function () {
                var tableInfo = new Konva.Image({
                    x: item.style.position.x * scalingY,
                    y: item.style.position.y * scalingY,
                    image: imageObj,
                    width: imageObj.width,
                    height: imageObj.height,
                    draggable: true,
                    //scaleX: scalingX,
                    //scaleY: scalingY,
                });
                tableInfo.on('dblclick', (e) => {
                    console.log('触发了dblclick!')
                    console.log(this, 'this指针内容')
                    //that.EditContent = paragraphall.paragraph[0].texts[0].content
                    //that.NowOption = exercise.option
                    //this.editorinfo = new Editors(this.$refs.editorElem)
                })
                // add the shape to the layer
                //group.add(tableInfo);
                layer.add(tableInfo);
                //group.zIndex(paragraphall.index+1)
                layer.batchDraw();
                //group.batchDraw();
            };
        });
        r(200)
    })
}
/*绘制echarts图表*/
function drawEchart(stage, layer, group, item) {
    return new Promise(async (r, j) => {
        var createdEchat = document.createElement('div')
        createdEchat.id = item.uid
        createdEchat.style.width = item.style.position.cx + 'px'
        createdEchat.style.height = item.style.position.cy + 'px'
        createdEchat.style.position = 'relative'
        createdEchat.style.top = 999 + 'px'
        var addEchatdiv = document.getElementById("container").appendChild(createdEchat);
        var Echatid = item.uid
        var htmldom = document.getElementById(Echatid)
        var titlename = []
        var LineseriesData = []
        var BarseriesData = []
        var AreaseriesData = []
        var ScatterseriesData = []
        var PieseriesData = []
        for (var i = 0; i < item.charts[0].datas.length; i++) {
            titlename.push(item.charts[0].datas[i].colName)
        }
        if (item.charts[0].chartType === "line") {  //判断折线图
            for (var l = 0; l < item.charts[0].datas.length; l++) {
                LineseriesData.push({
                    name: item.charts[0].datas[l].colName,
                    data: item.charts[0].datas[l].yAxis,
                    type: 'line',
                    itemStyle: { color: item.charts[0].datas[l].colStyle.border.color.solidFill, },
                    lineStyle: { width: item.charts[0].datas[l].colStyle.border.outline.Width }
                })
            }
            var myChart = echarts.init(document.getElementById(Echatid));
            var option = {
                legend: { data: titlename, bottom: 1 },
                animation: false,
                xAxis: {
                    type: 'category',
                    data: item.charts[0].datas[0].xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: LineseriesData
            };
        } else if (item.charts[0].chartType === "col") { //判断柱状图
            var myChart = echarts.init(document.getElementById(Echatid));
            if (item.charts[0].colType === "colChart-clustered") { //簇状柱状图 默认
                for (var l = 0; l < item.charts[0].datas.length; l++) {
                    BarseriesData.push({
                        name: item.charts[0].datas[l].colName,
                        data: item.charts[0].datas[l].yAxis,
                        type: 'bar',
                        itemStyle: { color: item.charts[0].datas[l].colStyle.fill.solidFill },
                        lineStyle: { width: item.charts[0].datas[l].colStyle.border.outline.Width ? item.charts[0].datas[l].colStyle.border.outline.Width : 3 }
                    })
                }
                var option = {
                    legend: { data: titlename, bottom: 1 },
                    animation: false,
                    xAxis: {
                        type: 'category',
                        data: item.charts[0].datas[0].xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: BarseriesData
                };
            } else if (item.charts[0].colType === "colChart-stacked") { //堆积柱状图
                for (var l = 0; l < item.charts[0].datas.length; l++) {
                    BarseriesData.push({
                        name: item.charts[0].datas[l].colName,
                        data: item.charts[0].datas[l].yAxis,
                        type: 'bar',
                        stack: '总量',
                        itemStyle: { color: item.charts[0].datas[l].colStyle.fill.solidFill },
                        lineStyle: { width: item.charts[0].datas[l].colStyle.border.outline.Width ? item.charts[0].datas[l].colStyle.border.outline.Width : 3 }
                    })
                }
                var option = {
                    legend: { data: titlename, bottom: 1 },
                    animation: false,
                    xAxis: {
                        type: 'category',
                        data: item.charts[0].datas[0].xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: BarseriesData
                };
            }
        } else if (item.charts[0].chartType === "area") {
            var myChart = echarts.init(document.getElementById(Echatid));
            if (item.charts[0].areaType === "areaChart-standard" || item.charts[0].areaType === "areaChart-percentStacked") { //面积图 默认 或  百分比堆积面积图
                for (var l = 0; l < item.charts[0].datas.length; l++) {
                    AreaseriesData.push({
                        name: item.charts[0].datas[l].colName,
                        data: item.charts[0].datas[l].yAxis,
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        itemStyle: { color: item.charts[0].datas[l].colStyle.fill.solidFill },
                        //lineStyle: { width: item.charts[0].datas[l].colStyle.border.outline.Width ? item.charts[0].datas[l].colStyle.border.outline.Width : 3 }
                    })
                }
                option = {
                    legend: { data: titlename, bottom: 1 },
                    animation: false,
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: item.charts[0].datas[0].xAxis
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: AreaseriesData
                };

            }

        } else if (item.charts[0].chartType === "scatter") {
            var myChart = echarts.init(document.getElementById(Echatid));
            for (var i = 0; i < item.charts[0].datas[0].xAxis.length; i++) {
                var Datamark = []
                Datamark.push(item.charts[0].datas[0].xAxis[i], item.charts[0].datas[0].yAxis[i])
                ScatterseriesData.push(Datamark)
            }
            if (item.charts[0].scatterType === "scatterChart-line") { //带直线和数据标记的散点图 默认
                option = {
                    animation: false,
                    xAxis: {},
                    yAxis: {},
                    series: [{
                        symbolSize: 15,
                        data: ScatterseriesData,
                        type: 'scatter'
                    }]
                };
            }

        } else if (item.charts[0].chartType === "pie") {
            var myChart = echarts.init(document.getElementById(Echatid));
            for (var y = 0; y < item.charts[0].datas[0].xAxis.length; y++) {
                PieseriesData.push({
                    value: item.charts[0].datas[0].yAxis[y],
                    name: item.charts[0].datas[0].xAxis[y],
                })
            }
            if (item.charts[0].pieType === "pieChart") { //饼图   默认
                option = {
                    title: {
                        text: item.charts[0].datas[0].colName,
                        left: 'center',
                        top: 20,
                    },
                    animation: false,
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        left: 'center',
                        top: 'bottom',
                        data: item.charts[0].datas[0].xAxis
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                    },
                    //color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
                    series: [
                        {
                            name: item.charts[0].datas[0].colName,
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: PieseriesData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
            } else if (item.charts[0].pieType === "pie3DChart") {   //三维饼图
                option = {
                    title: {
                        text: item.charts[0].datas[0].colName,
                        left: 'center',
                        top: 20,
                    },
                    animation: false,
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        left: 'center',
                        top: 'bottom',
                        data: item.charts[0].datas[0].xAxis
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                    },
                    series: [
                        {
                            name: item.charts[0].datas[0].colName,
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            label: {
                                position: 'inner'
                            },
                            labelLine: {
                                show: false
                            },
                            data: PieseriesData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
            }
        }
        myChart.setOption(option);
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        var echartsinfo = myChart.getDataURL()//图片转码
        html2canvas(document.getElementById(Echatid), {
            backgroundColor: null,
        }).then((canvas) => {
            document.getElementById(Echatid).innerHTML = "";
            const img = canvas.toDataURL();
            var imageObj = new Image();
            imageObj.src = echartsinfo;
            document.getElementById(Echatid).remove()
            imageObj.setAttribute('crossOrigin', 'anonymous');
            imageObj.onload = function () {
                var EchartsInfo = new Konva.Image({
                    x: item.style.position.x * scalingY,
                    y: item.style.position.y * scalingY,
                    image: imageObj,
                    width: imageObj.width * scalingY,
                    height: imageObj.height * scalingY,
                    draggable: true,
                    //scaleX: scalingX,
                    //scaleY: scalingY,
                });
                layer.add(EchartsInfo);
                layer.batchDraw();
            };
        });
        r(htmldom)
    })
}
/*Latex To Math公式渲染*/
function drawMath(stage, layer, group, item, url, hierarchy) {
    return new Promise(async (r, j) => {
        var mathtext = item.formula.text
        var createMath = document.createElement('div')
        var addCreated = document.getElementById("container").append(createMath);
        createMath.id = item.uid
        var createMathId = item.uid
        createMath.style.width = item.style.position.cx
        createMath.style.height = item.style.position.cy
        createMath.style.position = 'absolute'
        createMath.style.top = 999 + 'px'
        createMath.style.fontSize = item.pitchFamily + 'px'
        //createMath.style.background ='#CC00FF'
        let svg = window.MathJax.tex2svg(mathtext)
        let svgHtml = MathJax.tex2svg(mathtext, { em: 12, ex: 6 })
        var regex2 = /\<svg .*\>.*\<\/svg\>/;
        var arr2 = svgHtml.outerHTML.match(regex2);
        var mathhtml = arr2[0]
        document.getElementById(createMathId).innerHTML = mathhtml;
        console.log(mathhtml)
        html2canvas(document.getElementById(createMathId), {
            backgroundColor: null,
        }).then((canvas) => {
            document.getElementById(createMathId).innerHTML = "";
            const img = canvas.toDataURL();
            var imageObj = new Image();
            imageObj.src = img;
            document.getElementById(createMathId).remove()
            imageObj.setAttribute('crossOrigin', 'anonymous');
            imageObj.onload = function () {
                var mathInfo = new Konva.Image({
                    x: item.style.position.x,
                    y: item.style.position.y,
                    image: imageObj,
                    width: imageObj.width,
                    height: imageObj.height,
                    draggable: true,
                    //scaleX: scalingX,
                    //scaleY: scalingY,
                });
                layer.add(mathInfo);
                layer.batchDraw();
            };
        });
        r(200)
    })
}
export {
    drawRect, drawArc, drawEllipse, drawPath, drawImage, drawLine, drawTable, drawEchart,drawMath
}
