$(function (){
  function changeBgC(){
    var phoneActive = $('.edit-area-phone .tmp-editable.active')
    var editActive = $('.edit-area-element .edit-area-element-Ele.active .bgColor')[0]
    bgC_t = $($('.colorpicker_new_color')[0]).css('background-color')
    bgC_b = $($('.colorpicker_new_color')[1]).css('background-color')
    if (phoneActive) {
      phoneActive.css('background',  'linear-gradient(' + bgC_t + ', ' + bgC_b + ')')
    }
    if (editActive) {
      editActive.style.background = 'linear-gradient(' + bgC_t + ', ' + bgC_b + ')'
    }
  }
  function changeColor(){
    var phoneActive = $('.edit-area-phone .tmp-editable.active')
    var editActive = $('.edit-area-element .edit-area-element-Ele.active .bgColor')[0] || $('.edit-area-element .edit-area-element-Ele.active .color')[0]
    color = $($('.colorpicker_new_color')[2]).css('background-color')
    if (phoneActive) {
      if (phoneActive[0].getAttribute('data-edit-type') === 'bdC') {
        phoneActive.css('borderColor', color)
      } else if (phoneActive[0].getAttribute('data-edit-type') === 'color') {
        phoneActive.css('color', color)
      }
    }
    if (editActive) {
      editActive.style.background = color
    }
  }

  window.initColorPicker = function (){
    // 初始化取色器插件
    $('#colorpickerHolder-t').ColorPicker({ flat: true });
    $('#colorpickerHolder-b').ColorPicker({ flat: true });
    $('#colorpickerHolder-s').ColorPicker({ flat: true });
    // 编辑 编辑区域 顶部颜色
    $('#colorpickerHolder-t .colorpicker_hue').on('mousedown', function (){
      this.onmousemove = changeBgC
      var _this = this
      document.onmouseup = function (){
        _this.onmousemove = null
      }
    })
    // 编辑 编辑区域 底部颜色
    $('#colorpickerHolder-b .colorpicker_hue').on('mousedown', function () {
      this.onmousemove = changeBgC
      var _this = this
      document.onmouseup = function () {
        _this.onmousemove = null
      }
    })
    // 编辑 手机区域 顶部颜色
    $('#colorpickerHolder-t .colorpicker_color').on('mousedown', function () {
      this.onmousemove = changeBgC
      var _this = this
      document.onmouseup = function () {
        _this.onmousemove = null
      }
    })
    // 编辑 手机区域 底部颜色
    $('#colorpickerHolder-b .colorpicker_color').on('mousedown', function () {
      this.onmousemove = changeBgC
      var _this = this
      document.onmouseup = function () {
        _this.onmousemove = null
      }
    })
    // 编辑 编辑区域 边框颜色和文字颜色
    $('#colorpickerHolder-s .colorpicker_hue').on('mousedown', function () {
      this.onmousemove = changeColor
      var _this = this
      document.onmouseup = function () {
        _this.onmousemove = null
      }
    })
    // 编辑 手机区域 边框颜色和文字颜色
    $('#colorpickerHolder-s .colorpicker_color').on('mousedown', function () {
      this.onmousemove = changeColor
      var _this = this
      document.onmouseup = function () {
        _this.onmousemove = null
      }
    })
    // 通过输入修改 顶部颜色
    $('#colorpickerHolder-t .colorpicker_hex input').change(function () {
      changeBgC()
    })
    // 通过输入修改 底颜色
    $('#colorpickerHolder-b .colorpicker_hex input').change(function () {
      changeBgC()
    })
    // 通过输入修改 边框和文字颜色
    $('#colorpickerHolder-s .colorpicker_hex input').change(function () {
      changeColor()
    })
  }
})