import Dom from '../../libs/dom'
import Widget from '../widget'

class ScrollList extends Widget {
  constructor(layer, screen) {
    super(layer, screen)
    this._container = Dom.createElement(
      'div',
      'scroollist-container comp',
      this.el
    )
  }

  setPaint() {
    this.setListener()
    clearInterval(this.timer)
    this._container.innerHTML = ''
    let newPaint = this._mergePaint()
    let field = newPaint.textField
    Dom.css(this._container, {
      fontSize: newPaint.fontSize + 'px',
      fontWeight: newPaint.bold ? 'bold' : 'normal',
      fontStyle: newPaint.italic ? 'italic' : 'normal',
      color: newPaint.fontColor,
      fontFamily: newPaint.fontFamily,
      overflow: 'hidden'
    })
    var con1 = Dom.createElement('ul', 'con1', this._container)
    if (this.originalData && this.originalData.length !== 0 && field) {
      this.originalData.forEach(d => {
        let li = Dom.createElement('li', '', con1)
        li.textContent = d[field] || ''
      })
    }
    var con2 = Dom.createElement('ul', 'con2', this._container)
    con2.innerHTML = con1.innerHTML
    let scrollUp = () => {
      if (this._container.scrollTop >= con1.offsetHeight) {
        this._container.scrollTop = 0
      } else {
        this._container.scrollTop++
      }
    }
    var time = 10 * (11 - newPaint.speed)
    time = time < 10 ? 10 : time
    //scrollUp()
    this.timer = setInterval(scrollUp, time)
    this._container.onmouseover = () => {
      clearInterval(this.timer)
    }
    this._container.onmouseout = () => {
      this.timer = setInterval(scrollUp, time)
    }
    if (this._container.offsetHeight >= con1.offsetHeight) {
      console.warn('容器高度大于内容高度，滚动可能失效！')
    }
  }

  remove() {
    clearInterval(this.timer)
    this.timer = null
    super.remove()
  }
}

export default ScrollList
