$(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('backgroundImage', 'linear-gradient(' + bgC_t + ', ' + bgC_b + ')')
        }
        if (editActive) {
            editActive.style.backgroundImage = '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') {
                for (var i = 0; i < phoneActive.length; i++) {
                    phoneActive[i].style.borderColor = color
                }
            } else if (phoneActive[0].getAttribute('data-edit-type') === 'color') {
                for (var i = 0; i < phoneActive.length; i++) {
                    phoneActive[i].style.color = color
                }
            } else if (phoneActive[0].getAttribute('data-edit-type') === 'strokeColor') {
                for (var i = 0; i < phoneActive.length; i++) {
                    phoneActive[i].setAttribute("stroke", color);
                }
            }

        }
        if (editActive) {
            editActive.style.backgroundColor = 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()
        })
    }
})