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

class Button extends Widget {
  constructor(layer, screen) {
    super(layer, screen)
    this.events = ['clickEvent'] // 事件
    let contanier = Dom.createElement('div', 'button-container comp', this.el)
    this.button = Dom.createElement('button', '', contanier)
  }

  setPaint() {
    this.setListener()
    // let paint = this.processPlaceholder(this.layer.paint)
    let newPaint = this._mergePaint()
    this.button.innerText = newPaint.text
    Dom.css(this.button, {
      fontSize: newPaint.fontSize + 'px',
      backgroundColor: newPaint.backgroundColor,
      color: newPaint.fontColor,
      width: newPaint.width + 'px',
      height: newPaint.height + 'px',
      cursor: 'pointer',
      border: '1px solid transparent'
    })
    this.button.onclick = e => {
      let currentValue = e.target.innerText
      let events = this.layer.events // 绑定的事件
      this.events.forEach(eventName => {
        let alias =
          events && events[eventName] ? events[eventName].alias : eventName
        this._screen.store.patchState(alias, currentValue)
      })
    }
    this.fire('render', this)
  }
}

export default Button
