/*
 * 专门负责导出流程图文件并让用户下载的扩展包方法，需要依赖:
 * ../plugin/promise.min.js
 * ../plugin/html2canvas.min.js
 * ../plugin/canvg.js (当必须在IE11及以下版本的IE浏览器上运行时)
 */
GooFlow.prototype.exportDiagram = function(fileName) {
  // 0.添加临时元素
  var width = this.$workArea.width()
  var height = this.$workArea.height()
  $('body').append(
    '<div id="demo_export" style="position:absolute;top:0;left:0;z-index:-1;width:0px;height:0px;overflow:hidden">' +
      '<div style="color:#15428B;position:absolute;left:0;right:0;width:' +
      width +
      'px;height:' +
      height +
      'px;overflow:hidden;float:none;" class="GooFlow GooFlow_work"></div>' +
      '</div>'
  )

  // 1.先COPY节点和区块的内容
  var inner = $('#demo').find('.GooFlow_work_inner')
  var divCanvas = $('#demo_export').children('div:eq(0)')
  // 复制节点的内容
  inner.children('div').each(function(i) {
    var item = $(this)
    if (item.hasClass('GooFlow_item')) {
      item
        .clone()
        .removeAttr('id')
        .css('position', 'absolute')
        .appendTo(divCanvas)
    } else if (item.hasClass('GooFlow_work_group')) {
      item
        .clone()
        .removeAttr('id')
        .css('position', 'absolute')
        .attr('xmlns', 'http://www.w3.org/1999/xhtml')
        .appendTo(divCanvas)
    }
  })
  html2canvas(divCanvas[0], {
    allowTaint: false,
    taintTest: false,
    onrendered: function(canvas) {
      // 2.在回调方法中，COPY连线内容
      // 造出临时的IMAGE
      var context = canvas.getContext('2d') // 取得画布的2d绘图上下文
      context.save()
      var strSvg =
        '<svg xmlns="http://www.w3.org/2000/svg" width="1160" height="507">' +
        '<defs><style type="text/css">text{font-size:14px;line-height:1.42857143;' +
        'font-family:"Microsoft Yahei", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, Arial, sans-serif;' +
        '}</style></defs>' +
        window
          .$('<svg>')
          .append(window.$('#draw_demo').clone())
          .html() +
        '</svg>' // COPY连线内容
      var image = null
      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
        // 当为IE11及以下版本浏览器时，使用Canvg第三方工具
        image = document.createElement('canvas')
        canvg(image, strSvg)
      } else {
        var image = new Image()
        image.src = 'data:image/svg+xml,' + encodeURIComponent(strSvg)
      }
      var tempFunc = function() {
        context.drawImage(image, 0, 0)
        // 清除不需要的临时DOM
        $('#demo_export')
          .empty()
          .remove()
        try {
          var blob = canvas.msToBlob()
          // alert("blob2");
          navigator.msSaveBlob(blob, 'prettyImage.png')
        } catch (e) {
          // 生成一个下载链接并点击
          var a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
          a.href = canvas.toDataURL('image/png') // 将画布内的信息导出为png图片数据
          a.download = fileName + '.png' // 设定下载名称
          document.body.appendChild(a)
          a.click() // 点击触发下载
          document.body.removeChild(a)
        }
      }

      if (
        image.complete ||
        (!!window.ActiveXObject || 'ActiveXObject' in window)
      ) {
        // 如果图片已经存在于浏览器缓存，直接调用回调函数
        // console.log("image.complete|| IE11");
        tempFunc()
        return // 直接返回，不用再处理onload事件
      }
      image.onload = function() {
        // console.log("image.onload");
        tempFunc()
      }
    },
    width: width,
    height: height
  })
}

GooFlow.prototype.generateDiagramBase64 = function(callbackfun) {
  // 0.添加临时元素
  var width = this.$workArea.width()
  var height = this.$workArea.height()
  $('body').append(
    '<div id="demo_export" style="position:absolute;top:0;left:0;z-index:-1;width:0px;height:0px;overflow:hidden">' +
      '<div style="color:#15428B;position:absolute;left:0;right:0;width:' +
      width +
      'px;height:' +
      height +
      'px;overflow:hidden;float:none;" class="GooFlow GooFlow_work"></div>' +
      '</div>'
  )

  // 1.先COPY节点和区块的内容
  var inner = $('#demo').find('.GooFlow_work_inner')
  var divCanvas = $('#demo_export').children('div:eq(0)')
  // 复制节点的内容
  inner.children('div').each(function(i) {
    var item = $(this)
    if (item.hasClass('GooFlow_item')) {
      item
        .clone()
        .removeAttr('id')
        .css('position', 'absolute')
        .appendTo(divCanvas)
    } else if (item.hasClass('GooFlow_work_group')) {
      item
        .clone()
        .removeAttr('id')
        .css('position', 'absolute')
        .attr('xmlns', 'http://www.w3.org/1999/xhtml')
        .appendTo(divCanvas)
    }
  })
  html2canvas(divCanvas[0], {
    allowTaint: false,
    taintTest: false,
    onrendered: function(canvas) {
      // 2.在回调方法中，COPY连线内容
      // 造出临时的IMAGE
      var context = canvas.getContext('2d') // 取得画布的2d绘图上下文
      context.save()
      var strSvg =
        '<svg xmlns="http://www.w3.org/2000/svg" width="1160" height="507">' +
        '<defs><style type="text/css">text{font-size:14px;line-height:1.42857143;' +
        'font-family:"Microsoft Yahei", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, Arial, sans-serif;' +
        '}</style></defs>' +
        window
          .$('<svg>')
          .append(window.$('#draw_demo').clone())
          .html() +
        '</svg>' // COPY连线内容
      var image = null
      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
        // 当为IE11及以下版本浏览器时，使用Canvg第三方工具
        image = document.createElement('canvas')
        canvg(image, strSvg)
      } else {
        var image = new Image()
        image.src = 'data:image/svg+xml,' + encodeURIComponent(strSvg)
      }
      var tempFunc = function() {
        context.drawImage(image, 0, 0)
        // 清除不需要的临时DOM
        $('#demo_export')
          .empty()
          .remove()

        callbackfun(canvas.toDataURL('image/png'))
      }
      image.onload = function() {
        // console.log("image.onload");
        tempFunc()
      }
    },
    width: width,
    height: height
  })
}