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

class Text extends Widget {
  constructor(layer, screen) {
    super(layer, screen)
    this._container = Dom.createElement('div', 'text-container comp', this.el)
    this.on('resize', () => {
      this.setPaint()
    })
  }

  setPaint() {
    this.setListener()
    let newPaint = this._mergePaint()
    this._container.innerHTML = ''
    let textContaner = Dom.createElement('div', '', this._container)
    let field = newPaint.textField
    let text = ''
    if (field && this.originalData && this.originalData.length) {
      text = this.originalData[0][field]
    }
    if (newPaint.link && !newPaint.textWrap) {
      let linkDom = Dom.createElement('a', '', textContaner)
      linkDom.href = newPaint.link
      linkDom.target = newPaint.target
      linkDom.textContent = text || newPaint.text
      Dom.css(linkDom, {
        fontWeight: 'inherit',
        fontStyle: 'inherit',
        fontFamily: 'inherit',
        fontSize: 'inherit',
        textDecoration: 'none',
        color: 'inherit'
      })
    } else {
      textContaner.textContent = text || newPaint.text
    }
    Dom.css(textContaner, {
      fontSize: newPaint.fontSize + 'px',
      fontWeight: newPaint.bold ? 'bold' : 'normal',
      fontStyle: newPaint.italic ? 'italic' : 'normal',
      color: newPaint.fontColor,
      fontFamily: newPaint.fontFamily,
      letterSpacing: newPaint.letterSpacing + 'em',
      textAlign: newPaint.textAlign,
      lineHeight: newPaint.lineHeight + 'em',
      textIndent: newPaint.textIndent + 'em',
      padding: '0 5px'
    })
    if (newPaint.showBorder) {
      Dom.css(textContaner, {
        borderColor: newPaint.borderColor,
        borderWidth: newPaint.borderWidth + 'px',
        borderStyle: newPaint.borderType,
        borderRadius: `${newPaint.borderRadius[0]}px ${newPaint.borderRadius[1]}px ${newPaint.borderRadius[2]}px ${newPaint.borderRadius[3]}px`
      })
    }
    // 单行文本
    if (!newPaint.textWrap) {
      Dom.css(textContaner, {
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        lineHeight: this.layer.layout.height + 'px', // 单行文本垂直局长
        textIndent: 0
      })
    }
  }
}

export default Text
