// 部分代码来自ZIBILL主题作者
// canvas生成海报
const poster = (function() {

    const DEBUG = false
  
    const WIDTH = 700
    const HEIGHT = 1160
  
    function init(config) {
      const $container = document.querySelector(config.selector)
      $container.style.border = '1px solid #f0f0f0'
      const $wrapper = createDom('div', 'id', 'wrapper')
      const $canvas = createDom('canvas', 'id', 'canvas', 'block')
      const $day = createDom('canvas', 'id', 'day')
      const $date = createDom('canvas', 'id', 'date')
      const $title = createDom('canvas', 'id', 'title')
      const $content = createDom('canvas', 'id', 'content')
      const $logo = createDom('canvas', 'id', 'logo')
      const $description = createDom('canvas', 'id', 'description')
  
      appendChilds($wrapper, $canvas, $day, $date, $title, $content, $logo, $description)
      $container.appendChild($wrapper)
  
      const date = new Date()
  
      // day
      const dayStyle = {
        font: 'bold 80px Helvetica',
        color: 'rgba(255, 255, 255, 1)',
        position: 'right'
      }
      drawOneline($day, dayStyle, date.getDate());
  
      // date
      const dateStyle = {
        font: '23px Helvetica',
        color: 'rgba(255, 255, 255, 1)',
        position: 'right'
      }
      drawOneline($date, dateStyle, date.getFullYear() + '/' + (date.getMonth() + 1))
  
      // title canvas
      const titleStyle = {
        font: '30px Helvetica',
        lineHeight: 1.5,
        color: 'rgba(255, 255, 255, 1)',
        length: 2,
        position: 'left'
      }
      titleStyle.font = (config.titleStyle && config.titleStyle.font) || titleStyle.font
      titleStyle.color = (config.titleStyle && config.titleStyle.color) || titleStyle.color
      titleStyle.position = (config.titleStyle && config.titleStyle.position) || titleStyle.position
      drawMoreLines($title, titleStyle, config.title)
  
      // content canvas
      const contentStyle = {
        font: '22px Helvetica',
        lineHeight: 1.5,
        position: 'left',
        color: 'rgba(236, 241, 255, 1)'
      }
      contentStyle.font = (config.contentStyle && config.contentStyle.font) || contentStyle.font
      contentStyle.color = (config.contentStyle && config.contentStyle.color) || contentStyle.color
      contentStyle.lineHeight = (config.contentStyle && config.contentStyle.lineHeight) || contentStyle.lineHeight
      contentStyle.position = (config.contentStyle && config.contentStyle.position) || contentStyle.position
      drawMoreLines($content, contentStyle, config.content);
  
      // description
      const descriptionStyle = {
        font: '24px Helvetica',
        color: 'rgba(180, 180, 180, 1)',
        lineHeight: 1.2,
        position: 'left'
      }
      drawMoreLines($description, descriptionStyle, config.description)
  
  
      // background image
      const image = new Image();
      image.crossOrigin = "Anonymous";
  
      //logo
      const logo = new Image();
      logo.crossOrigin = "Anonymous";
      logo.src = config.logo;
  
      //qrcode
      const qrcode = new Image();
      qrcode.src = config.qrcode;
  
  
      const onload = function() {
        $canvas.width = WIDTH;
        $canvas.height = HEIGHT;
        image.src = config.banner;
        image.onload = function() {
          const ctx = $canvas.getContext('2d')
          ctx.fillStyle = 'rgba(255, 255, 255, 1)';
          ctx.fillRect(0, 0, $canvas.width, $canvas.height);
          
          // banner
          imgRect = coverImg($canvas.width - 40, $canvas.height / 1.2 - 40, image.width, image.height);
          ctx.drawImage(image, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 20, 20, $canvas.width - 40, $canvas.height / 1.2 - 40);
  
          //覆盖层
          ctx.fillStyle="rgba(0, 0, 0, 0.3)";
          ctx.fillRect(20,20,$canvas.width - 40,$canvas.height / 1.2 - 40);        
  
          // 时间
          ctx.drawImage($day, -20, 50)
          ctx.drawImage($date, -21, 125)
  
          //logo
          var logowidth = logo.width;
          var logoheight = logo.height;
          var scale = logowidth / logoheight;
          var logoh = 60;
          var cwidth = logoh * scale;
          ctx.drawImage(logo, 60, $canvas.height / 1.2 + 30, cwidth, logoh);
  
          ctx.drawImage(qrcode, $canvas.width - 160, $canvas.height / 1.2 + 20, 120, 120);
  
          //标题文字
          ctx.drawImage($title, 20, $canvas.height / 2 + 20)
          ctx.drawImage($content, 20, $canvas.height / 2 + 120)
          ctx.drawImage($description, 20, $canvas.height / 1.2 + 110)
          ctx.strokeStyle = 'rgba(122, 122, 122, 0.5)';
  
          const img = new Image();
          img.crossOrigin = "Anonymous";
          img.src = $canvas.toDataURL('image/png')
          const radio = config.radio || 0.7
          img.width = WIDTH * radio
          img.height = HEIGHT * radio
          img.className = 'poster_load';
          ctx.clearRect(0, 0, $canvas.width, $canvas.height)
          $canvas.style.display = 'none'
  
          if ($container.querySelector('.poster_load')) {
            $container.querySelector('.poster_load').src = img.src;
          } else {
              $container.appendChild(img);
          }
  
          $container.appendChild(img);
          $container.removeChild($wrapper)
          if (config.callback) {
            config.callback($container)
          }
        }
      }
  
      onload()
    }
  
      //裁切
      function containImg(sx, sy, box_w, box_h, source_w, source_h) {
        var dx = sx,
            dy = sy,
            dWidth = box_w,
            dHeight = box_h;
        if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
            dHeight = source_h * dWidth / source_w;
            dy = sy + (box_h - dHeight) / 2;
  
        } else if (source_w < source_h || (source_w == source_h && box_w > box_h)) {
            dWidth = source_w * dHeight / source_h;
            dx = sx + (box_w - dWidth) / 2;
        }
        return {
            dx,
            dy,
            dWidth,
            dHeight
        }
    }
  
  function coverImg(box_w, box_h, source_w, source_h) {
      var sx = 0,
          sy = 0,
          sWidth = source_w,
          sHeight = source_h;
      if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
          sWidth = box_w * sHeight / box_h;
          sx = (source_w - sWidth) / 2;
      } else if (source_w < source_h || (source_w == source_h && box_w > box_h)) {
          sHeight = box_h * sWidth / box_w;
          sy = (source_h - sHeight) / 2;
      }
      return {
          sx,
          sy,
          sWidth,
          sHeight
      }
  }
  
    function createDom(name, key, value, display = 'none') {
      const $dom = document.createElement(name)
      $dom.setAttribute(key, value)
      $dom.style.display = display
      $dom.width = WIDTH
      return $dom
    }
  
    function appendChilds(parent, ...doms) {
      doms.forEach(dom => {
        parent.appendChild(dom)
      })
    }
  
    function drawOneline(canvas, style, content) {
      const ctx = canvas.getContext('2d')
      canvas.height = parseInt(style.font.match(/\d+/), 10) + 20
      ctx.font = style.font
      ctx.fillStyle = style.color
      ctx.textBaseline = 'top'
  
      let lineWidth = 0
      let idx = 0
      let truncated = false
      for (let i = 0; i < content.length; i++) {
        lineWidth += ctx.measureText(content[i]).width;
        if (lineWidth > canvas.width - 60) {
          truncated = true
          idx = i
          break
        }
      }
  
      let padding = 30
  
      if (truncated) {
        content = content.substring(0, idx)
        padding = canvas.width / 2 - lineWidth / 2
      }
  
      if (DEBUG) {
        ctx.strokeStyle = "#6fda92";
        ctx.strokeRect(0, 0, canvas.width, canvas.height);
      }
  
      if (style.position === 'center') {
        ctx.textAlign = 'center';
        ctx.fillText(content, canvas.width / 2, 0)
      } else if (style.position === 'left') {
        ctx.fillText(content, padding, 0)
      } else {
        ctx.textAlign = 'right'
        ctx.fillText(content, canvas.width - padding, 0)
      }
    }
  
    function drawMoreLines(canvas, style, content) {
      const ctx = canvas.getContext('2d')
      const fontHeight = parseInt(style.font.match(/\d+/), 10)
  
      if (DEBUG) {
        ctx.strokeStyle = "#6fda92";
        ctx.strokeRect(0, 0, canvas.width, canvas.height);
      }
  
      ctx.font = style.font
      ctx.fillStyle = style.color
      ctx.textBaseline = 'top'
      ctx.textAlign = 'center'
  
      let alignX = 0
  
      if (style.position === 'center') {
        alignX = canvas.width / 2;
      } else if (style.position === 'left') {
        ctx.textAlign = 'left'
        alignX = 40
      } else {
        ctx.textAlign = 'right'
        alignX = canvas.width - 40
      }
  
      let lineWidth = 0
      let lastSubStrIndex = 0
      let offsetY = 0
      for (let i = 0; i < content.length; i++) {
        lineWidth += ctx.measureText(content[i]).width;
        if (lineWidth > canvas.width - 120) {
          ctx.fillText(content.substring(lastSubStrIndex, i), alignX, offsetY);
          offsetY += fontHeight * style.lineHeight
          lineWidth = 0
          lastSubStrIndex = i
        }
        if (i === content.length - 1) {
          ctx.fillText(content.substring(lastSubStrIndex, i + 1), alignX, offsetY);
        }
      }
    }
  
  
    return {
      init
    }
  })()
  
  
  
  
  //ajax生成文章海报
$('body').on('click', '.cr_poster', function () {
  var post_id = $(this).attr('poster-data');
  var banner = $(this).attr('banner');
  var single_content = $('.single-content')
  var t_content = $('#post-'+post_id+' .t_content')
  var content =  single_content.length>0 ? single_content[0].innerText : t_content[0].innerText
  var content_length = content.length
  var permalink = t_content.length>0 ? window.location.origin + '/moments/'+post_id : window.location.origin + window.location.pathname;
  var title = t_content.length>0 ? Theme.site_title+'-瞬间' : document.title;
  new QRious({ element: document.getElementById("twoCode"), value: permalink, size: 260, });
  $('.poster_box').remove();
  $('#share_modal_' + post_id + ' .poster_box_ap').append('<div class="poster_box"></div>');

  if (content_length > 120) {
    content = content.substring(0, 80) + '...'
  }

  function Posterdown(e) {
    if (e == null) {
      return;
    }

    var modal = '#share_modal_' + post_id;

    var url = $('' + modal + ' .poster_box img').attr('src');
    $('' + modal + ' .post_share_box').removeClass('hide');
    $('' + modal + ' .poster_download').attr('href', url).attr('download', 'poster_' + post_id + '.png');
  }

  $('#share_modal_' + post_id + ' .poster_box').append('<div class="loading_box"><div uk-spinner></div></div>');
  $('.loading_box').remove();
  poster.init({
    banner: banner,
    selector: '.poster_box',
    title: title,
    content: content,
    logo: Theme.site_logo,
    qrcode: $('#twoCode').attr('src'),
    description: Theme.admin_des,
    callback: Posterdown
  });


});


function convertImgToBase64(url, callback) {
  var canvas = document.createElement('canvas');
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
    var dataURL = canvas.toDataURL('image/' + ext);
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}


function handleShare(e, pic, title,pathname) {
  var permalink = window.location.origin + pathname;
  switch (e) {
    case 'wb':
      var url = `https://service.weibo.com/share/share.php?url=${permalink}&type=button&language=zh_cn&pic=${pic}&title=${title}`
      window.open(url);
      break
    case 'qzone':
      var url = `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${permalink}&title=${title}&pics=${pic}`
      window.open(url);
      break
    case "qq":
      var url = `http://connect.qq.com/widget/shareqq/index.html?url=${permalink}&title=${title}&pics=${pic}`
      window.open(url);
      break;
    case "copy":
      if (navigator.clipboard) {
        navigator.clipboard.writeText(permalink).then(function() {
          cocoMessage.success("链接已复制到剪贴板！");
        }, function(err) {
          cocoMessage.error("复制失败，请手动复制链接");
        });
      } else {
        // 兼容旧浏览器
        var tempInput = document.createElement('input');
        tempInput.value = permalink;
        document.body.appendChild(tempInput);
        tempInput.select();
        try {
          document.execCommand('copy');
          cocoMessage.success("链接已复制到剪贴板！");
        } catch (err) {
          cocoMessage.error("复制失败，请手动复制链接");
        }
        document.body.removeChild(tempInput);
      }
      break;
    default:
      break
  }

}