import zrender from 'zrender'
import moment from 'moment'

//线段
export const createLine = (x1, y1, x2, y2, style) => {
  return new zrender.Line({
    shape: {
      x1: x1,
      y1: y1,
      x2: x2,
      y2: y2
    },
    style: style
  })
}
// cx 横坐标 cy纵坐标 r半径 空心圆
export const createCircle = (cx, cy, r, style) => {
  return new zrender.Circle({
    shape: {
      cx: cx,
      cy: cy,
      r: r
    },
    style: style,
    zlevel: 4
  })
}
//添加horver事件 el 元素对象 config 一些配置项 x x轴坐标 y y轴坐标 shapeOn鼠标移入一些属性配置 shapeOn鼠标移出一些属性配置 shape配置项看官网
export const addHover = (el, config, x, y, shapeOn, shapeOut) => {
  const domTips = document.getElementsByClassName('tips')
  el.on('mouseover', function() {
    domTips[0].innerHTML = config.tips

    let textWidth = config.tips.length * 15
    domTips[0].setAttribute('style', `position:absolute;top:${y - 30}px;left:${x - textWidth / 2}px;display:block;font-size:10px;background-color:rgba(0,0,0,.7);padding:3px 2px;border-radius:2px;color:#fff;width:${textWidth}px;text-align:center`)
    el.animateTo({
      shape: shapeOn
    }, 100, 0)
  }).on('mouseout', function() {
    domTips[0].setAttribute('style', `display:none`)
    el.animateTo({
      shape: shapeOut
    }, 100, 0)
  })
}
//多边形
export const createPolygon = (points, style) => {
  return new zrender.Polyline({
    shape: {
      points: points
    },
    style: style
  })
}

export const hoverLine = (el, line, y2) => {
  window.onmousemove = function(e) {
    line.animateTo({
      shape: {
        x1: e.offsetX,
        y1: 0,
        x2: e.offsetX,
        y2: y2
      }
    }, 50, 0)
  }
}
//时间格式化
export const getFullTime = (i) => {
  return moment(i).format('YYYY-MM-DD HH:mm:ss')
}
//贝塞尔曲线
export const BezierCurve = (x1, y1, x2, y2, cpx1, cpy1, style) => {
  return new zrender.BezierCurve({
    shape: {
      x1: x1,
      y1: y1,
      x2: x2,
      y2: y2,
      cpx1: cpx1,
      cpy1: cpy1
    },
    style: style
  })
}
