/* 普通容器 */
import Dom from '../../libs/dom'
import Widget from '../widget'
import util from '../../libs/util'

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

  setPaint() {
    let newPaint = this._mergePaint()
    this._container.innerHTML = ''
    let borderDom = Dom.createElement(
      // 创建一个dom用于设置边框
      'div',
      'container-border',
      this._container
    )
    Dom.css(borderDom, {
      // 设置边框颜色和类型
      borderColor: newPaint.border.color,
      borderWidth: newPaint.border.width + 'px',
      borderStyle: newPaint.border.type,
      borderRadius: `${newPaint.border.radius[0]}px ${newPaint.border.radius[1]}px ${newPaint.border.radius[2]}px ${newPaint.border.radius[3]}px`
    })
    Dom.css(this._container, {
      // 外面容器框的边框半径与之同步
      boxShadow: newPaint.boxShadow,
      borderRadius: `${newPaint.border.radius[0]}px ${newPaint.border.radius[1]}px ${newPaint.border.radius[2]}px ${newPaint.border.radius[3]}px`
    })
    if (newPaint.border.image) {
      // 如果设置了边框图片，则忽略边框半径，强制设为0
      Dom.css(borderDom, {
        borderImage: `url("${newPaint.border.image}") ${newPaint.border.width} fill / 1 / 0 stretch`,
        borderRadius: 0
      })
      Dom.css(this._container, {
        borderRadius: 0
      })
    }
    if (newPaint.background.image) {
      // 设置了背景图片
      Dom.css(this._container, {
        backgroundImage: `url("${newPaint.background.image}")`
      })
      let repeat = newPaint.background.repeat
      if (repeat === 'norepeat_full') {
        Dom.css(this._container, {
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat'
        })
      } else if (repeat === 'norepeat_center') {
        Dom.css(this._container, {
          backgroundSize: 'contain',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center'
        })
      } else if (repeat === 'repeat') {
        Dom.css(this._container, {
          backgroundSize: 'auto',
          backgroundRepeat: 'repeat'
        })
      } else if (repeat === 'repeat_x') {
        Dom.css(this._container, {
          backgroundSize: 'auto 100%',
          backgroundRepeat: 'repeat-x'
        })
      } else if (repeat === 'repeat_y') {
        Dom.css(this._container, {
          backgroundSize: '100%',
          backgroundRepeat: 'repeat-y'
        })
      }
    } else {
      // 只有背景颜色
      if (Array.isArray(newPaint.background.color)) {
        newPaint.background.color = util.gradient(
          'css',
          newPaint.background.gradientDirection,
          ...newPaint.background.color
        )
      }
      Dom.css(this._container, {
        background: newPaint.background.color
      })
    }
    let subLayers = this.layer.paint.components
    subLayers.forEach(lyr => {
      let com = this._screen.painter.draw(lyr)
      this._container.appendChild(com.el)
      this.components[com.id] = com
      this._screen._components[com.id] = com
    })
  }
}

export default Container
