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

class Flop extends Widget {
  constructor(layer, screen) {
    super(layer, screen)
    this._container = Dom.createElement('div', 'flop-container comp', this.el)
    this.lastResult = []
  }

  setPaint() {
    this.setListener()
    this._container.innerHTML = ''
    let newPaint = this._mergePaint()
    let value = 0
    if (Number.isNaN(+newPaint.number.value)) {
      if (this.originalData && this.originalData.length) {
        value = Number(this.originalData[0][newPaint.number.value]) || 0
      }
    } else {
      value = Number(newPaint.number.value) || 0
    }
    Dom.css(this._container, {
      textAlign: newPaint.common.textAlign
    })
    let prefix = Dom.createElement('div', 'prefix', this._container)
    prefix.innerText = newPaint.prefix.content
    Dom.css(prefix, {
      color: newPaint.prefix.fontColor,
      fontSize: newPaint.prefix.fontSize + 'px',
      fontWeight: newPaint.prefix.bold ? 'bold' : 'normal'
    })
    let decimalDigits = newPaint.number.decimalDigits
    value = value.toFixed(decimalDigits) // 处理小数点位数
    let result = []
    let integer = value.split('.')[0] // 取整数部分
    let decimal = value.split('.')[1] || [] // 取小数部分
    if (decimal.length > 0) {
      for (let i = decimal.length - 1; i >= 0; i--) {
        result.push(decimal[i])
      }
      result.push('.')
    }
    for (let i = integer.length - 1; i >= 0; i--) {
      if (integer.length - 1 - i > 0 && (integer.length - 1 - i)%3 === 0 && newPaint.number.commaSeparator) {
        result.push(',')
      }
      result.push(integer[i])
    }
    let numberBox = Dom.createElement('div', 'number-box', this._container)
    Dom.css(numberBox, {
      fontFamily: newPaint.number.fontFamily,
      fontWeight: newPaint.number.bold ? 'bold' : 'normal',
      fontSize: newPaint.number.fontSize + 'px',
      color: newPaint.number.fontColor,
      height: newPaint.number.fontSize + 'px'
    })
    if (this.lastResult.length !== result.length) {
      this.lastResult = new Array(result.length).fill(0)
    }
    for (let j = this.lastResult.length - 1; j >= 0; j--) {
      let number = Dom.createElement('div', 'number', numberBox)
      Dom.css(number, {
        lineHeight: newPaint.number.fontSize + 'px'
      })
      let lastValueIsNumber = !Number.isNaN(Number(this.lastResult[j]))
      let newValueIsNumber = !Number.isNaN(Number(result[j]))
      // 先把旧的值画出来
      if(!newValueIsNumber) {
        number.innerHTML = `<div class=\"num\">${result[j]}</div>`
      } else {
        var margin = newPaint.number.fontSize * parseInt(this.lastResult[j]) || 0
        var numDiv = 
          "<div class=\"num\">0</div>" +
          "<div class=\"num\">1</div>" +
          "<div class=\"num\">2</div>" +
          "<div class=\"num\">3</div>" +
          "<div class=\"num\">4</div>" +
          "<div class=\"num\">5</div>" +
          "<div class=\"num\">6</div>" +
          "<div class=\"num\">7</div>" +
          "<div class=\"num\">8</div>" +
          "<div class=\"num\">9</div>";
        number.innerHTML = numDiv
        Dom.css(number, {
          marginTop: `-${margin}px`
        })
        setTimeout(() => {
          let newMargin = newPaint.number.fontSize * parseInt(result[j])
          Dom.css(number, {
            marginTop: `-${newMargin}px`
          })
        }, 0)
      }
    }
    this.lastResult = result
    let suffix = Dom.createElement('div', 'suffix', this._container)
    suffix.innerText = newPaint.suffix.content
    Dom.css(suffix, {
      color: newPaint.suffix.fontColor,
      fontSize: newPaint.suffix.fontSize + 'px',
      fontWeight: newPaint.suffix.bold ? 'bold' : 'normal',
      marginLeft: newPaint.number.interval + 'px'
    })
    if (newPaint.common.orient === 'horizontal') {
      Dom.css(prefix, {
        display: 'inline-block',
        marginRight: newPaint.common.interval + 'px'
      })
      Dom.css(numberBox, {
        display: 'inline-block'
      })
      Dom.css(suffix, {
        display: 'inline-block',
        marginLeft: newPaint.common.interval + 'px'
      })
    } else {
      Dom.css(prefix, {
        marginBottom: newPaint.common.interval + 'px'
      })
      Dom.css(suffix, {
        marginTop: newPaint.common.interval + 'px'
      })
    }
  }
}

export default Flop
