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

class Slider extends Widget {
  constructor(layer, screen) {
    super(layer, screen)
    this.container = Dom.createElement('div', 'slider-container comp', this.el)
    this.container.innerHTML = `
      <div class="slider">
        <div class="slider-main">
        </div>
      </div>
      <div class="slider_ctrl">
      </div>
    `
    this.currentIndex = 0
    this.timer = null
  }

  setPaint() {
    this.setListener()
    this.sliderMain = this.container.querySelector('.slider-main')
    this.sliderCtrl = this.container.querySelector('.slider_ctrl')
    this.sliderMain.innerHTML = ''
    this.sliderCtrl.innerHTML = ''
    let newPaint = this._mergePaint()
    if (newPaint.pages && newPaint.pages.length) {
      newPaint.pages.forEach((url, index) => {
        let sliderMainImg = Dom.createElement(
          'div',
          'slider-main-img',
          this.sliderMain
        )
        Dom.css(sliderMainImg, {
          backgroundImage: `url(${url})`
        })
        let sliderCtrlCon = Dom.createElement(
          'span',
          'slider-ctrl-con',
          this.sliderCtrl
        )
        if (index === 0) {
          sliderCtrlCon.className += ' current'
        }
        sliderCtrlCon.innerHTML = index
        sliderCtrlCon.onclick = this._ctrlClick.bind(this)
      })
    }
    clearInterval(this.timer)
    if (newPaint.autoplay) {
      this.timer = setInterval(this._play.bind(this), newPaint.interval * 1000)
    }
  }

  _ctrlClick(e) {
    let imgs = this.sliderMain.children
    if (imgs.length === 0) {
      return
    }
    let scrollWidth = this.sliderMain.clientWidth
    console.log(scrollWidth)
    let clickIndex = +e.target.innerHTML
    if (clickIndex > this.currentIndex) {
      this._animate(imgs[this.currentIndex], { left: -scrollWidth })
      imgs[clickIndex].style.left = scrollWidth + 'px'
    } else if (clickIndex < this.currentIndex) {
      this._animate(imgs[this.currentIndex], { left: scrollWidth })
      imgs[clickIndex].style.left = -scrollWidth + 'px'
    }
    this.currentIndex = clickIndex
    this._animate(imgs[this.currentIndex], { left: 0 })
    this._setSquare()
  }

  _setSquare() {
    var spans = this.sliderCtrl.querySelectorAll('span')
    for (var i = 0; i < spans.length; i++) {
      spans[i].className = 'slider-ctrl-con'
    }
    spans[this.currentIndex].className = 'slider-ctrl-con current'
  }

  _animate(obj, json, fn) {
    if (!obj) {
      return
    }
    clearInterval(obj.timer) // 清除定时器，这一步是有影响的！
    obj.timer = setInterval(() => {
      var flag = true // 用来判断定时器什么时候停止！
      for (var attr in json) {
        var current = 0
        if (attr == 'opacity') {
          current = parseInt(this._getStyle(obj, attr) * 100)
        } else {
          current = parseInt(this._getStyle(obj, attr))
        }
        var step = (json[attr] - current) / 5
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        if (attr == 'opacity') {
          if ('opacity' in obj.style) {
            obj.style.opacity = (current + step) / 100
          } else {
            obj.style.filter = 'alpha(opacity = ' + (current + step) + ')'
          }
        } else if (attr == 'zIndex') {
          obj.style.zIndex = json[attr]
        } else {
          obj.style[attr] = current + step + 'px'
        }
        if (current != json[attr]) {
          flag = false
        }
      }
      if (flag) {
        clearInterval(obj.timer)
        if (fn) {
          fn()
        }
      }
    }, 5)
  }

  _getStyle(obj, attr) {
    if (obj.currentStyle) {
      return obj.currentStyle[attr]
    } else {
      return window.getComputedStyle(obj, null)[attr]
    }
  }

  _play() {
    let imgs = this.sliderMain.children
    if (imgs.length === 0) {
      return
    }
    let scrollWidth = this.sliderMain.clientWidth
    this._animate(imgs[this.currentIndex], { left: -scrollWidth })
    this.currentIndex++
    if (this.currentIndex > imgs.length - 1) {
      this.currentIndex = 0
    }
    imgs[this.currentIndex].style.left = scrollWidth + 'px'
    this._animate(imgs[this.currentIndex], { left: 0 })
    this._setSquare()
  }
}

export default Slider
