import zrender from 'zrender'
import _ from 'lodash'
export default function Simpleps(dom, opts = {}) {
  opts.width = dom.clientWidth
  opts.height = dom.clientHeight
  this.zr = zrender.init(dom, opts)
  // 事件列表
  this.events = {
    // load事件
    load() {}
  }

  // 加载图片
  this.loading = (mixopts) => {
    return new Promise((resolve, reject) => {
      let length = 0
      let current = 0
      for (let item of mixopts) {
        if (item.type == 'Image') {
          length++
          let img = new Image()
          // 允许跨域
          img.crossOrigin = 'anonymous'
          img.src = item.src
          // 加载完成
          img.onload = () => {
            item.img = img
            current++
            current == length ? resolve(mixopts) : ''
          }
          // 加载错误
          img.onerror = () => {
            item.img = img
            current++
            current == length ? resolve(mixopts) : ''
          }
        }
      }
    })
  }

  // 合成
  this.mixs = async (mixopts) => {
    // 加载
    await this.loading(mixopts)
    // 执行加载完成回调
    typeof this.events.load == 'function' ? this.events.load() : ''
    for (let item of mixopts) {
      // console.log(item, 'item')
      switch (item.type) {
        case 'Image':
          // 舞台比率
          var ratio = item.img.width / this.zr.getWidth()
          // 图片宽高比
          let wratio = item.style.width / item.img.width
          let hratio = item.style.height / item.img.height
          // 宽大与高
          let isWidthMax = item.img.width > item.img.height
          // 判断渲染模式
          let mode
          switch (item.style.mode || 'fill') {
            case 'contain':
              // 图片长边显示完整
              mode = {
                x: isWidthMax ? item.style.x + (item.style.width - item.img.width * wratio) * 0.5 : item.style.x + (item.style.width - item.img.width * hratio) * 0.5,
                y: isWidthMax ? item.style.y + (item.style.height - item.img.height * wratio) * 0.5 : item.style.y + (item.style.height - item.img.height * hratio) * 0.5,
                width: isWidthMax ? item.img.width * wratio : item.img.width * hratio,
                height: isWidthMax ? item.img.height * wratio : item.img.height * hratio
              }
              break
            case 'cover':
              // 保持比例裁剪填充模式
              mode = {
                x: isWidthMax ? item.style.x + (item.style.width - item.img.width * hratio) * 0.5 : item.style.x + (item.style.width - item.img.width * wratio) * 0.5,
                y: isWidthMax ? item.style.y + (item.style.height - item.img.height * hratio) * 0.5 : item.style.y + (item.style.height - item.img.height * wratio) * 0.5,
                width: isWidthMax ? item.img.width * hratio : item.img.width * wratio,
                height: isWidthMax ? item.img.height * hratio : item.img.height * wratio
              }
              break
            case 'fill':
              // 拉伸填充模式
              mode = {
                x: item.style.x,
                y: item.style.y,
                width: item.style.width || item.img.width / ratio,
                height: item.style.height || item.img.height / ratio
              }
              break
          }
          var poster = new zrender.Image({
            style: {
              image: item.img,
              ...mode
            }
          })
          // 设置遮罩
          var clipPath = new zrender.Rect({
            shape: {
              x: item.style.x,
              y: item.style.y,
              r: item.style.radius || 0,
              width: item.style.width || item.img.width / ratio,
              height: item.style.height || item.img.height / ratio
            }
          })
          poster.setClipPath(clipPath)
          //
          this.zr.add(poster)
          break
        case 'Text':
          // 设置文字
          var text = new zrender.Rect({
            shape: {
              x: item.style.x || 0,
              y: item.style.y || 0
            },
            style: {
              ...item.style
            }
          })
          this.zr.add(text)
          break
        default:
      }
    }
    return true
  }

  // 注册事件
  this.on = (event, call) => {
    this.events[event] = call
  }

  // 销毁事件
  this.dispose = () => {
    this.zr.dispose()
  }

  // 图片转化成base64
  this.toDataURL = (opt) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(dom.querySelector('canvas').toDataURL(opt.type || 'image/jpeg', opt.quality || 1))
      }, 500)
    })
  }
}