class YJColorPicker {
  constructor(options = {}) {
    let _this = this
    let pickAlphaInput
    let config = {
      el: options.el,
      size: "mini",
      isLog: false,
      disabled: options.disabled || false, //是否禁止打开颜色选择器
      alpha: false, //是否开启透明度
      sure: (color) => {
        if (pickAlphaInput) {
          let c = Cesium.Color.fromCssColorString(color).withAlpha(pickAlphaInput.value / 100)
          this.pickAlphaInputValue = pickAlphaInput.value
          color = c.toCssHexString()
        }
        if (options.sure && typeof options.sure == 'function') {
          options.sure(color)
        }
        setTimeout(() => {
          customizeStyle()
        }, this.colorPicker.config.pickerAnimationTime);
      },
      clear: () => {
        options.clear()
      },
      close: () => {
        pickAlphaInput.value = this.pickAlphaInputValue
      },
      clickDefineColor: clickDefineColor,
      hasClear: false,
      defaultColor: options.defaultColor || '#ffffff'
    }
    let CesiumColor = Cesium.Color.fromCssColorString(options.defaultColor)
    if (!CesiumColor) {
      config.defaultColor = '#ffffff'
      CesiumColor = Cesium.Color.fromCssColorString(config.defaultColor)
    }
    if (options.predefineColor) {
      config.predefineColor = ['rgba(255, 255, 255, 1)', 'rgba(255, 0, 0, 1)', 'rgba(208, 132, 209, 1)', 'rgba(100, 182, 217, 1)', 'rgba(42, 130, 228, 1)', 'rgba(214, 36, 36, 1)', 'rgba(252, 222, 111, 1)', 'rgba(67, 207, 124, 1)', 'rgba(176, 243, 143, 1)', 'rgba(121, 72, 234, 1)', 'rgba(255, 195, 0, 1)', 'rgba(0, 186, 173, 1)', 'rgba(165, 214, 63, 1)', 'rgba(0, 0, 0, 1)', 'rgba(46, 47, 51, 1)', 'rgba(172, 51, 193, 1)', 'rgba(130, 21, 21, 1)', 'rgba(255, 87, 51, 1)', 'rgba(255, 140, 0, 1)', 'rgba(125, 191, 255, 1)']
    }
    this.colorPicker = new ewColorPicker(config)
    window.colorPicker = this.colorPicker 
    console.log('this.colorPicker', this.colorPicker, this.colorPicker.$Dom.pickerInput)

    customizeStyle()

    function customizeStyle() {
      let isSubtract = false
      let box = _this.colorPicker.$Dom.box
      let picker = _this.colorPicker.$Dom.picker
      picker.style.minWidth = '300px'
      let pickerContent = picker.getElementsByClassName('ew-color-picker-content')[0]
      let pickAlphaSliderBar = picker.getElementsByClassName('ew-alpha-slider-bar')[0]
      if (pickAlphaSliderBar) {
        pickAlphaSliderBar.parentNode.style.width = '16px'
        pickAlphaSliderBar.parentNode.removeChild(pickAlphaSliderBar)
      }
      let customDivider = document.createElement('span')
      customDivider.className = 'custom-divider'
      pickerContent.parentNode.insertBefore(customDivider, pickerContent.nextSibling)
      let pickPen = document.createElement('div')
      pickPen.className = 'icon-pen-box'
      pickPen.innerHTML = '<svg class="icon-pen"><use xlink:href="#yj-icon-pen"></use></svg>'
      let pickerInput = _this.colorPicker.$Dom.pickerInput
      pickerInput.parentNode.insertBefore(pickPen, pickerInput)
      pickerInput.style.width = 'calc(77% - 24px)'

      if (options.alpha) {
        let pickAlpha = document.createElement('div')
        pickAlpha.className = 'input-number input-number-unit-1 color-alpha'
        pickAlpha.innerHTML = `
        <input class="input" type="number" title="" step="0.01" min="0" max="100">
        <span class="unit">%</span>
        <span class="arrow"></span>`
        pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling)
        pickerInput.style.width = '39%'
        pickAlpha.style.width = 'calc(32% - 12px)'
        pickAlphaInput = pickAlpha.getElementsByClassName('input')[0]
        if (_this.pickAlphaInputValue || _this.pickAlphaInputValue === 0 || _this.pickAlphaInputValue === '0') {
          pickAlphaInput.value = Number(Number(_this.pickAlphaInputValue).toFixed(2))
        }
        else {
          pickAlphaInput.value = Number((CesiumColor.alpha * 100).toFixed(2))
        }
        _this.pickAlphaInputValue = pickAlphaInput.value
        box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker._privateConfig.colorValue).withAlpha(pickAlphaInput.value / 100).toCssColorString()
      }
      else {
        CesiumColor = CesiumColor.withAlpha(1)
      }

      let defineColorContainer = picker.getElementsByClassName('ew-pre-define-color-container')[0]
      if (defineColorContainer) {
        let colorList = localStorage.getItem('custom-color')
        if (colorList) {
          colorList = JSON.parse(colorList)
        }
        else {
          colorList = {}
        }
        let customDivider2 = document.createElement('span')
        customDivider2.className = 'custom-divider'
        let customDivider3 = document.createElement('span')
        customDivider3.className = 'custom-divider'
        defineColorContainer.parentNode.insertBefore(customDivider2, defineColorContainer)
        defineColorContainer.parentNode.insertBefore(customDivider3, defineColorContainer.nextSibling)

        let collectColorContainer = document.createElement('div')
        collectColorContainer.className = 'yj-pre-collect-color-container'
        customDivider3.parentNode.insertBefore(collectColorContainer, customDivider3.nextSibling)

        let addColorBtn = document.createElement('div')
        addColorBtn.innerHTML = '<svg class="icon-add2"><use xlink:href="#yj-icon-add2"></use></svg>'
        addColorBtn.className = 'yj-pre-collect-color add'

        let subtractColorBtn = document.createElement('div')
        subtractColorBtn.innerHTML = '<svg class="icon-minus"><use xlink:href="#yj-icon-minus"></use></svg>'
        subtractColorBtn.className = 'yj-pre-collect-color subtract'
        collectColorContainer.appendChild(addColorBtn)
        collectColorContainer.appendChild(subtractColorBtn)

        let subtractElmList = []
        for (let key in colorList) {
          let colorElm = document.createElement('div')
          colorElm.className = 'yj-pre-collect-color'
          let colorItemElm = document.createElement('div')
          colorItemElm.className = 'yj-pre-define-color-item'
          colorElm.appendChild(colorItemElm)
          colorItemElm.className = 'yj-pre-define-color-item'
          let c = Cesium.Color.fromCssColorString(colorList[key])
          let colorString = c.toCssHexString()
          colorItemElm.style.backgroundColor = colorString
          colorItemElm.addEventListener('click', () => {
            _this.colorPicker.updateColor(c.toCssColorString())
            clickDefineColor(colorString)
          })

          let subtractElm = document.createElement('div')
          subtractElm.className = 'yj-pre-define-color-item subtract-btn'
          subtractElm.innerHTML = '<svg class="icon-cross"><use xlink:href="#yj-icon-cross"></use></svg>'
          subtractElm.style.display = 'none'
          colorElm.appendChild(subtractElm)

          collectColorContainer.appendChild(colorElm)

          subtractElm.addEventListener('click', () => {
            delete colorList[key]
            localStorage.setItem('custom-color', JSON.stringify(colorList))
            collectColorContainer.removeChild(colorElm)
          })
          subtractElmList.push(subtractElm)
        }

        addColorBtn.addEventListener('click', () => {
          if (isSubtract) {
            isSubtract = false
            for (let i = 0; i < subtractElmList.length; i++) {
              subtractElmList[i].style.display = 'none'
            }
          }
          let colorElm = document.createElement('div')
          colorElm.className = 'yj-pre-collect-color'
          let colorItemElm = document.createElement('div')
          colorItemElm.className = 'yj-pre-define-color-item'
          colorElm.appendChild(colorItemElm)

          let c = Cesium.Color.fromCssColorString(_this.colorPicker.prevInputValue)
          if (pickAlphaInput) {
            c = c.withAlpha(pickAlphaInput.value / 100)
          }
          let colorString = c.toCssHexString()
          colorItemElm.style.backgroundColor = colorString
          colorItemElm.addEventListener('click', () => {
            _this.colorPicker.updateColor(c.toCssColorString())
            clickDefineColor(colorString)
          })
          collectColorContainer.appendChild(colorElm)

          let subtractElm = document.createElement('div')
          subtractElm.className = 'yj-pre-define-color-item subtract-btn'
          subtractElm.innerHTML = '<svg class="icon-cross"><use xlink:href="#yj-icon-cross"></use></svg>'
          subtractElm.style.display = 'none'
          colorElm.appendChild(subtractElm)
          subtractElmList.push(subtractElm)

          let key = Cesium.createGuid()
          colorList[key] = colorString
          localStorage.setItem('custom-color', JSON.stringify(colorList))
          subtractElm.addEventListener('click', () => {
            delete colorList[key]
            localStorage.setItem('custom-color', JSON.stringify(colorList))
            collectColorContainer.removeChild(colorElm)
          })
        })

        subtractColorBtn.addEventListener('click', () => {
          isSubtract = !isSubtract
          if (isSubtract) {
            for (let i = 0; i < subtractElmList.length; i++) {
              subtractElmList[i].style.display = 'block'
            }
          }
          else {
            for (let i = 0; i < subtractElmList.length; i++) {
              subtractElmList[i].style.display = 'none'
            }
          }
        })
      }
    }

    function clickDefineColor(color) {
      if (pickAlphaInput) {
        let c = Cesium.Color.fromCssColorString(color)
        pickAlphaInput.value = c.alpha * 100
      }
    }
  }
}
export default YJColorPicker