// 行政区划选择
import Dom from '../../libs/dom'
import util from '../../libs/util'
import adminData from '../../constants/admin'
import Widget from '../widget'

class Admin extends Widget {
  constructor(layer, screen) {
    super(layer, screen)
    this.events = ['adminCode', 'adminName'] // 事件
    this.showDropDown = false
    this._contanier = Dom.createElement('div', 'admin-container comp', this.el)
  }

  setPaint() {
    this.setListener()
    let newPaint = this._mergePaint()
    this._contanier.innerHTML = ''
    this.selectBox = Dom.createElement('div', 'select', this._contanier)
    this.selectBox.onclick = this._clickSelect.bind(this)
    let events = this.layer.events
    if (events && events.adminName && events.adminName.default) {
      this.selectBox.textContent = events.adminName.default
    } else {
      this.selectBox.textContent = '北京市'
    }
    if (Array.isArray(newPaint.backgroundColor)) {
      newPaint.backgroundColor = util.gradient(
        'css',
        newPaint.gradientDirection,
        ...newPaint.backgroundColor
      )
    }
    Dom.css(this.selectBox, {
      color: newPaint.fontColor,
      fontSize: newPaint.fontSize + 'px',
      background: newPaint.backgroundColor,
      borderColor: newPaint.borderColor,
      borderRadius: newPaint.borderRadius + 'px'
    })
    this.dropdownBox = Dom.createElement('div', 'dropdown', this._contanier)
    this.dropdownBox.appendChild(this._createOptionItems(adminData))
    Dom.css(this.dropdownBox, {
      color: newPaint.fontColor,
      fontSize: newPaint.fontSize + 'px',
      backgroundColor: newPaint.optionColor,
      display: this.showDropDown ? 'block' : 'none'
    })
    document.addEventListener(
      'click',
      e => {
        if (e.target === this.el || this.el.contains(e.target)) {
          return
        }
        this.showDropDown = false
        Dom.removeClass(this.selectBox, 'open')
        Dom.css(this.dropdownBox, {
          display: 'none'
        })
      },
      false
    )
    this.fire('render', this)
  }

  _clickSelect(e) {
    // 点击下拉框，显示选项列表
    this.showDropDown = !this.showDropDown
    if (this.showDropDown) {
      Dom.addClass(this.selectBox, 'open')
    } else {
      Dom.removeClass(this.selectBox, 'open')
    }
    Dom.css(this.dropdownBox, {
      display: this.showDropDown ? 'block' : 'none'
    })
  }

  _createOptionItems(data) {
    // 生成树状菜单
    let box = document.createElement('div')
    for (let code in data) {
      let optionBox = Dom.createElement('div', 'option', box)
      let optionItem = Dom.createElement('div', 'item', optionBox)
      if (data[code].children) {
        let prefix = Dom.createElement('div', 'prefix', optionItem)
        prefix.textContent = '>'
        prefix.onclick = this._clickExpand.bind(this)
        let text = Dom.createElement('div', 'label', optionItem)
        text.value = code
        text.textContent = data[code].name
        text.onclick = this._clickLabel.bind(this)
        let subBox = this._createOptionItems(data[code].children)
        Dom.addClass(subBox, 'sub-dropdown')
        optionBox.appendChild(subBox)
      } else {
        let text = Dom.createElement('div', 'label', optionItem)
        text.value = code
        text.textContent = data[code].name
        text.onclick = this._clickLabel.bind(this)
      }
    }
    return box
  }

  _clickExpand(e) {
    // 点击展开子项
    let optionDom = Dom.parent(e.target, 'option')
    if (optionDom.className.indexOf('expand') !== -1) {
      Dom.removeClass(optionDom, 'expand')
    } else {
      Dom.addClass(optionDom, 'expand')
    }
  }

  _clickLabel(e) {
    let code = e.target.value
    let name = e.target.textContent
    this.selectBox.textContent = name
    this._screen.store.patchState('adminCode', code)
    this._screen.store.patchState('adminName', name)
    this.showDropDown = false
    Dom.removeClass(this.selectBox, 'open')
    Dom.css(this.dropdownBox, {
      display: 'none'
    })
  }
}

export default Admin
