<template>
    <div class="htex-render-home">
        <!-- <Loading v-if="isLoading"></Loading> -->
        <div id="container"></div>
    </div>
</template>
<script>
//普通渲染组
//import res from './data/HtexJson/testdemo.json'
//import images from './data/HtexJson/testimage.jpeg'
//多文字+图片组
//import res from './data/HtexJson/complextest.json'
//import images from './data/HtexJson/compleximag.png'
//Group测试组
// import res from './data/HtexJson/Group.json'
//Echart组
//import res from './data/HtexJson/echart.json'
//import images from './data/HtexJson/background.png'
//复杂图形组
// import res from './data/HtexJson/Complexgraphics.json'
//公式渲染
//import res from './data/HtexJson/Math.json'
import { drawRect, drawArc, drawEllipse, drawImage, drawPath, drawLine, drawTable, drawEchart, drawMath } from "../../utils/PublicRenderer.js"
export default {
    name: 'HtexRender',
    props: {
        renderJson: {
            type: Object,
            default: null,
        }
    },
    data() {
        return {
            stage: '',
            layersinfo: '',
            renderData: {
                "page": 0,
                "jsonUrl": {},
                "blobinfo": {
                    "url": '',
                    "sas": ''
                }
            },
            isLoading: false,
        }
    },
    methods: {
        initCanvas(jsonUrl, page, spacename, initStatus, urlHost, sasInfo) {
            var res = jsonUrl
            console.log(res, '值！！！！！！！！！！！！！！')
            var scalingXinfo = 810 / 1280
            var scalingYinfo = 450 / 720
            var pagenow = ''
            page === 0 ? pagenow = page : pagenow = page - 1
            var callUrl = ''
            //var scaling = (window.innerHeight / res.height).toFixed(2) && res.height !== '' ? (window.innerHeight / res.height).toFixed(2) : 0;
            //  var stageX = (window.innerWidth - res.width * scaling) / 2 && res.width !== '' ? (window.innerWidth - res.width * scaling) / 2 : 0;
            if (jsonUrl.fill.type != -1) {
                callUrl = urlHost + res.fill.blipFill.url + sasInfo;
            }
            var stage = new Konva.Stage({
                container: 'container',
                width: res.width,
                height: res.height,
                x: scalingXinfo,
                //scaleX: scalingXinfo,
                //scaleY: scalingYinfo,
                y: 0,
            });
            var layer = new Konva.Layer();
            this.layersinfo = layer
            this.stage = stage
            layer.listening(false)
            var trx = new Konva.Transformer();
            trx.nodes([])
            var that = this;
            let promiseArr = []
            if (res.fill) {
                var imageObj = new Image();
                var backgroundGroup = {
                    width: res.width,
                    height: res.height,
                    draggable: false,
                    rotation: 0,
                };
                var backgroup = new Konva.Group(backgroundGroup);
                if (res.fill.type === 3) {
                    var imgSrcinfo = callUrl
                    console.log(imgSrcinfo, '背景图片3333')
                    imageObj.onload = function () {
                        //处理超过尺寸背景图
                        var offsetxValue = 0
                        var offsetyValue = 0
                        if (res.fill.blipFill && res.fill.blipFill.fillRect) {
                            //if (res.fill.blipFill.fillRect.b !== 0 || res.fill.blipFill.fillRect.t !== 0) {
                            //  offsetyValue = (res.height * scaling * (Math.abs(res.fill.blipFill.fillRect.b) / 100)).toFixed(2)
                            //}
                            //if (res.fill.blipFill.fillRect.l !== 0 || res.fill.blipFill.fillRect.r !== 0) {
                            //  offsetxValue = (res.width * scaling * (Math.abs(res.fill.blipFill.fillRect.l) / 100)).toFixed(2)
                            //}
                        }
                        //let screenshotW = res.width * scaling + offsetxValue
                        //let screenshotH = res.height * scaling + offsetyValue
                        //if (imageObj.width > screenshotW || imageObj.height > screenshotH) {
                        //   var img = new Image()
                        //  img.setAttribute('crossOrigin', 'anonymous');
                        //  img.src = imgSrcinfo
                        //  img.onload = () => {
                        //    let renderWidth = img.width > screenshotW ? screenshotW : img.width
                        //    let renderHeight = img.height > screenshotH ? screenshotH : img.height
                        //    var canvas = document.createElement("canvas")
                        //    canvas.width = renderWidth
                        //    canvas.height = renderHeight
                        //    var context = canvas.getContext("2d")
                        //    context.drawImage(img, 0, 0, renderWidth, renderHeight)
                        //    var newImage = canvas.toDataURL()
                        //    that.newBackgroundima = newImage
                        //    var img2 = new Image()
                        //    img2.setAttribute('crossOrigin', 'anonymous');
                        //    img2.src = newImage
                        //    img2.onload = () => {
                        //      var bgImage = new Konva.Image({
                        //        fillPatternImage: img2,
                        //        width: img2.width,
                        //        height: img2.height,
                        //        offsetX: offsetxValue,
                        //        offsetY: offsetyValue,
                        //      });
                        //      backgroup.add(bgImage);
                        //      layer.add(backgroup);
                        //      backgroup.zIndex(0);
                        //      layer.batchDraw();
                        //    }
                        //   that.doRender(stage, layer, trx, res.item);
                        //    //处理超过尺寸背景图END
                        //  }
                        //} else if (initStatus !== 'additional'){
                        imageObj.setAttribute('crossOrigin', 'anonymous');
                        var bgImage = new Konva.Image({
                            fillPatternImage: imageObj,
                            height: res.height,
                            width: res.width,
                        });
                        backgroup.add(bgImage);
                        layer.add(backgroup);
                        backgroup.zIndex(0);
                        layer.batchDraw();
                        that.doRender(stage, layer, trx, res.item, urlHost, sasInfo);
                        //}
                    }
                    imageObj.crossOrigin = 'Anonymous';
                    imageObj.src = imgSrcinfo
                } else if (res.fill.type === 4) {
                    imageObj.onload = function () {
                        var bgImage = new Konva.Image({
                            fillPatternImage: imageObj,
                            height: res.height,
                            width: res.width,
                        });
                        backgroup.add(bgImage);
                        layer.add(backgroup);
                        backgroup.zIndex(0);
                        layer.batchDraw();
                        that.doRender(stage, layer, trx, res.item, urlHost, sasInfo);
                    };
                    imageObj.crossOrigin = 'Anonymous';
                    imageObj.src = res.fill.pattFill.base64
                } else if (res.fill.type === 1) {
                    var backgrounds = new Konva.Rect({
                        width: res.width,
                        height: res.height,
                        fill: res.fill.solidFill,
                    })
                    backgroup.add(backgrounds);
                    layer.add(backgroup);
                    backgroup.zIndex(0)
                    layer.batchDraw();
                    that.doRender(stage, layer, trx, res.item, urlHost, sasInfo);
                } else if (res.fill.type === 2) {
                    var color0 = ''
                    var color5 = ''
                    var color1 = ''
                    if (res.fill.gradientFill.colors) {
                        color0 = res.fill.gradientFill.colors[0].color
                        color5 = res.fill.gradientFill.colors[1].color
                        color1 = res.fill.gradientFill.colors[2].color
                    }
                    var backgrounds = new Konva.Rect({
                        width: res.width,
                        height: res.height,
                        fill: res.fill.solidFill,
                        fillLinearGradientStartPoint: res.fill !== null && res.fill.gradientFill == null ? { x: 0, y: 0 } : { x: 0, y: 0 },
                        fillLinearGradientEndPoint: res.fill !== null && res.fill.gradientFill == null ? { x: 0, y: 0 } : { x: 500, y: 500 },
                        fillLinearGradientColorStops: res.fill !== null && res.fill.gradientFill == null ? null : [0, color0, 0.5, color5, 1, color1],
                    })
                    backgroup.add(backgrounds);
                    layer.add(backgroup);
                    backgroup.zIndex(0)
                    layer.batchDraw();
                    that.doRender(stage, layer, trx, res.item, urlHost, sasInfo);
                } else {
                    that.doRender(stage, layer, trx, res.item, urlHost, sasInfo);
                }
            }
            stage.add(layer);
            that.isLoading = false
        },
        doRender(stage, layer, tr, items, callUrl, sasInfo) {
            console.log(callUrl, sasInfo, '传输进来的')
            let that = this
            let f = function () {
                let promiseArr = []
                for (let k = 0; k < items.length; k++) {
                    let promise = new Promise(async (r, j) => {
                        let i = items[k]
                        if (i.shapeType === "Media" || i.mediaType === 'image') {
                            switch (i.mediaType) {
                                case "image":
                                    let result = await drawImage(stage, layer, i, tr, callUrl, sasInfo, k + 1);
                                    r(200)
                                    break;
                                default:
                                    break;
                            }
                        } else if (i.type === "Group") {
                            //drawRect(stage, layer, i, tr);
                            //Group处理逻辑按照单个控件来处理
                            if (i.shapes) {
                                that.doRender(stage, layer, tr, i.shapesm);
                            } else {
                                if (i.svg.d) {
                                    let renderPathGroup = await drawPath(stage, layer, i, tr, callUrl, k + 1);
                                } else {
                                    let renderRect = await drawRect(stage, layer, i, tr, callUrl, k + 1);
                                }
                            }
                        } else if (i.type === "CxnSp" && i.svg) {
                            if (i.svg.type === "polyline") {
                                let renderPath = await drawPath(stage, layer, i, tr, callUrl, k + 1);
                            } else if (i.svg.type === "polygon" && i.svg.points) {
                                let renderPathinfo = await drawPath(stage, layer, i, tr, callUrl, k + 1);
                            } else {
                                let renderPaths = await drawPath(stage, layer, i, tr, callUrl, k + 1);
                            }
                        } else if (i.type === "Sp" && i.svg) {
                            if (i.svg.type === "polyline") {
                                let renderPathz = await drawPath(stage, layer, i, tr, callUrl, k + 1);
                            } else if (i.svg.type === "polygon" && i.svg.points) {
                                let renderPathinfos = await drawPath(stage, layer, i, tr, callUrl, k + 1);
                            } else if (i.svg.type === "path") {
                                let renderPatharray = await drawPath(stage, layer, i, tr, callUrl, k + 1);
                            } else if (i.svg.d) {
                                let renderPathdata = await drawPath(stage, layer, i, tr, callUrl, k + 1);
                            } else if (i.shapeType === "ellipse") {
                                let renderEllipse = await drawEllipse(stage, layer, i);
                            } else if (i.shapeType === "rect" || i.shapeType === "roundRect") {
                                let renderRect = await drawRect(stage, layer, i, tr, callUrl, k + 1);
                            } else {
                                let renderDraw = await drawPath(stage, layer, i, tr, callUrl, k + 1);
                            }
                        } else if (i.type === "Math" && i.formula) {
                            let renderMath = await drawMath(stage, layer, tr, i, callUrl, k + 1)
                        } else if (i.charts && i.charts !== null) {
                            let renderEchart = await drawEchart(stage, layer, tr, i, k + 1)
                        } else if (i.type === "Table") {
                            let renderTable = await drawTable(stage, layer, tr, i, k + 1)
                        } else if (i.shapeType === "Diagram") {
                            let renderRectinfo = await drawRect(stage, layer, i, tr, callUrl, k + 1);
                            this.doRender(stage, layer, tr, i.shapes, callUrl, k + 1);
                        } else if (i.shapeType !== "audio") {
                            if (i.shapeType) {
                                switch (i.shapeType) {
                                    case "arc":
                                        let renderArc = await drawArc(stage, layer, i, callUrl, k + 1);
                                        break;
                                    case "rect":
                                        let renderRectinfo = await drawRect(stage, layer, i, tr, callUrl, k + 1);
                                        break;
                                    case "ellipse":
                                        let renderEllipseinfo = await drawEllipse(stage, layer, i, k + 1);
                                        break;
                                    case "roundRect":
                                        let renderRound = await drawRect(stage, layer, i, tr, callUrl, k + 1);
                                        break;
                                    default:
                                        break;
                                }
                            }
                        }
                    })
                }
            }
            f()
        },
    },
    mounted() {

        console.log(this.renderData, '查看')
    },
    watch: {
        renderJson: {
            handler(val) {
                this.renderData = this.renderJson
                if (val.jsonUrl) {
                    console.log(val, '传过来的值')
                    console.log(val.sas, '222222222222222222222222')
                    this.initCanvas(val.jsonUrl, val.page, 'container', 'init', val.url, val.sas)
                    this.isLoading = true
                }
            },
            deep: true
        }
    },
}
</script>
<style lang="less">
.htex-render-home {
    .konvajs-content {
        height: 100% !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0);
        top: 0;
        left: 0;
    }
    .konvajs-content canvas {
        position: static !important;
    }
}
</style>
