$(function () {
    window.clickToFocus = function () {
        var arrEntities = {
            'lt': '<',
            'gt': '>',
            'nbsp': ' ',
            'amp': '&',
            'quot': '"'
        }
        var editEle = $('.edit-area-element .editEle')
        var editEleBox = $('.edit-area-element .edit-area-element-Ele')
        var tmpEditable = $('.edit-area-phone .tmp-editable')
        // 点击手机内的元素 实现右侧编辑区域的tab切换
        tmpEditable.on('click', function (e) {
            e.stopPropagation();
            // 手机内被点击的元素添加 active 的属性
            tmpEditable.removeClass('active')

            // 选中编辑区中对应的元素
            var dataQuery = $(e.target).attr('data-query')
            var dataIndex = parseInt($(e.target).attr('data-index')) || 0

            if (dataIndex) {
                $($(dataQuery)[dataIndex]).addClass('active')
            } else {
                if ($(e.target).attr('data-index') === undefined) {
                    $(dataQuery).addClass('active')
                }
            }
            $(e.target).addClass('active')
            $('.edit-area-element-Ele').removeClass('active')    // 去掉所有编辑元素的active
            var comEles = []    // 右侧编辑区域中与被点击元素对应的元素
            for (var i = 0; i < editEle.length; i++) {
                if (dataQuery && $(editEle[i]).attr('data-query') === dataQuery) {     // 找到右侧编辑区域对应的tab
                    comEles.push($(editEle[i]).parent().parent())
                    for (var j = 0; j < $('.edit-area-element-content').length; j++) {
                        if ($('.edit-area-element-content')[j].contains(editEle[i])) {
                            $($('.edit-area-element-tab')[j]).addClass('active').siblings('.edit-area-element-tab').removeClass('active')
                            $($('.edit-area-element-content')[j]).addClass('active').siblings('.edit-area-element-content').removeClass('active')
                        }
                    }
                }
            }
            if (comEles[dataIndex]) {
                comEles[dataIndex].addClass('active')
                var dataSize = comEles[dataIndex].find('img').attr('data-size')
                // 激活对应的编辑工具
                var editType = comEles[dataIndex].find('.editEle').attr('data-edit-type')
                switch (editType) {
                    case 'bgC':
                        $('.edit-area-middle .styleEdit .color-picker.double').addClass('active').siblings('.style-edit-tool').removeClass('active')
                        break;
                    case 'bdC':
                        $('.edit-area-middle .styleEdit .color-picker.single').addClass('active').siblings('.style-edit-tool').removeClass('active')
                        break;
                    case 'color':
                        $('.edit-area-middle .styleEdit .color-picker.single').addClass('active').siblings('.style-edit-tool').removeClass('active')
                        break;
                    case 'img':
                        $('.edit-area-middle .styleEdit .upload-photo').addClass('active').siblings('.style-edit-tool').removeClass('active')
                        dataSize && $('.upload-photo .text .size').text('图片尺寸：' + dataSize)
                        // 如果是图片元素 在右侧编辑区域显示其预览效果
                        $('#previewImg').attr('src', comEles[dataIndex].find('.editEle').attr('src'))
                        break;
                    case 'bgImg':
                        $('.edit-area-middle .styleEdit .upload-photo').addClass('active').siblings('.style-edit-tool').removeClass('active')
                        dataSize && $('.upload-photo .text .size').text('图片尺寸：' + dataSize)
                        // 如果是图片元素 在右侧编辑区域显示其预览效果
                        $('#previewImg').attr('src', comEles[dataIndex].find('.editEle').attr('src'))
                        break;
                    case 'text':
                        $('.edit-area-middle .styleEdit .rich-text').addClass('active').siblings('.style-edit-tool').removeClass('active')
                        $('.edit-area-middle .styleEdit .rich-text #txtArea').val(comEles[dataIndex].find('.text').html().replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; }).replace(/<br(\s+)?\/?>/g, '\n'))
                        break;
                    default:
                        break;
                }
            }

            // 如果点击到的是奖品 要显示概率输入框
            if (e.target.getAttribute('data-putonid') != null) {
                $('.real-prize-info-box').show()
                var activeQuery = $('.edit-area-phone-content [data-putonid].active').attr('data-query')
                var activeIndex = $('.edit-area-phone-content [data-putonid].active').attr('data-index')

                if (activeIndex !== undefined) {
                    for (var i = 0; i < probabilityDrawConfig.length; i++) {
                        var pItem = probabilityDrawConfig[i]
                        if (pItem.index === activeIndex) {
                            $('#realPrizePutonId').val(pItem.selectedPrize)
                            $('#realPrizeLuckyProbability').val(pItem.Probability)
                            $('#realPrizeLuckyNum').val(pItem.MaxNum)
                        }
                    }
                } else {
                    for (var i = 0; i < probabilityDrawConfig.length; i++) {
                        var pItem = probabilityDrawConfig[i]
                        if (pItem.query === activeQuery) {
                            $('#realPrizePutonId').val(pItem.selectedPrize)
                            $('#realPrizeLuckyProbability').val(pItem.Probability)
                            $('#realPrizeLuckyNum').val(pItem.MaxNum)
                        }
                    }
                }
            } else {
                $('.real-prize-info-box').hide()
            }
        })

        // 保存数据
        $('#realPrizeLuckyProbability')[0].onblur = function () {
            var activeQuery = $('.edit-area-phone-content [data-putonid].active').attr('data-query')
            var activeIndex = $('.edit-area-phone-content [data-putonid].active').attr('data-index')
            var probability = $('#realPrizeLuckyProbability').val()
            if (activeIndex !== undefined) {
                for (var i = 0; i < probabilityDrawConfig.length; i++) {
                    var pItem = probabilityDrawConfig[i]
                    if (pItem.index === activeIndex) {
                        var amountP = 100
                        for (var j = 0; j < probabilityDrawConfig.length; j++) {
                            amountP -= probabilityDrawConfig[j].Probability
                        }
                        if (!/^(\d+)$|^(\d+\.\d+)$/.test(probability) && probability !== '') {
                            pItem.Probability = probability
                            $('.error-info.probability').show()
                            $('#realPrizeLuckyProbability').addClass('error')
                        } else if (Number(probability) > 100) {
                            $('.error-info.probability').show()
                            $('#realPrizeLuckyProbability').addClass('error')
                        } else {
                            pItem.Probability = probability
                            $('#realPrizeLuckyProbability').attr('placeholder', '中奖率综合100，当前概率不超过' + amountP)
                            break
                        }
                    }
                }
            } else {
                for (var i = 0; i < probabilityDrawConfig.length; i++) {
                    var pItem = probabilityDrawConfig[i]
                    if (pItem.query === activeQuery) {
                        var amountP = 100
                        for (var j = 0; j < probabilityDrawConfig.length; j++) {
                            amountP -= probabilityDrawConfig[j].Probability
                        }
                        if (!/^(\d+)$|^(\d+\.\d+)$/.test(probability) && probability !== '') {
                            $('.error-info.probability').show()
                            $('#realPrizeLuckyProbability').addClass('error')
                            pItem.Probability = probability
                        } else if (Number(probability) > 100) {
                            $('.error-info.probability').show()
                            $('#realPrizeLuckyProbability').addClass('error')
                        } else {
                            pItem.Probability = probability
                            $('#realPrizeLuckyProbability').attr('placeholder', '中奖率综合100，当前概率不超过' + amountP)
                            break
                        }
                    }
                }
            }
        }
        $('#realPrizeLuckyNum')[0].onblur = function () {
            var activeQuery = $('.edit-area-phone-content [data-putonid].active').attr('data-query')
            var activeIndex = $('.edit-area-phone-content [data-putonid].active').attr('data-index')
            var maxNum = $('#realPrizeLuckyNum').val()
            if (activeIndex !== undefined) {
                for (var i = 0; i < probabilityDrawConfig.length; i++) {
                    var pItem = probabilityDrawConfig[i]
                    if (pItem.index === activeIndex) {
                        if (!/^(\d+)$/.test(maxNum) && maxNum !== '') {
                            $('.error-info.maxNum').show()
                            $('#realPrizeLuckyNum').addClass('error')
                        }
                        pItem.MaxNum = maxNum
                        break
                    }
                }
            } else {
                for (var i = 0; i < probabilityDrawConfig.length; i++) {
                    var pItem = probabilityDrawConfig[i]
                    if (pItem.query === activeQuery) {
                        if (!/^(\d+)$/.test(maxNum) && maxNum !== '') {
                            $('.error-info.maxNum').show()
                            $('#realPrizeLuckyNum').addClass('error')
                        }
                        pItem.MaxNum = maxNum
                        break
                    }
                }
            }
        }
        $('#realPrizeLuckyNum')[0].onfocus = function () {
            $('.error-info.maxNum').hide()
            $('#realPrizeLuckyNum').removeClass('error')
        }
        $('#realPrizeLuckyProbability')[0].onfocus = function () {
            $('.error-info.probability').hide()
            $('#realPrizeLuckyProbability').removeClass('error')
        }
        

        // 点击右侧编辑区域 手机中与被点击元素对应的元素添加 active 属性
        editEleBox.on('click', function (e) {
            var target = null

            if ($(e.target).hasClass('styleEle')) {
                target = $(e.target).parent()
            } else if ($(e.target).hasClass('editEle')) {
                target = $(e.target).parent().parent()
            }
            $('.edit-area-element-Ele').removeClass('active')   // 移除所有的active
            target.addClass('active')    // 被点击元素添加active
            var innerTarget = target.find('.editEle')
            var dataQuery = innerTarget.attr('data-query')    // 被点击元素的 data-query 属性
            var dataIndex = innerTarget.attr('data-index')    // 被点击元素的 data-index 属性
            var dataSize = innerTarget.attr('data-size')    // 被点击元素的 data-size 属性
            tmpEditable.removeClass('active')
            if (dataIndex) {
                $($(dataQuery)[dataIndex]).addClass('active')
            } else {
                $(dataQuery).addClass('active')
            }
            // 激活对应的编辑工具
            var editType = innerTarget.attr('data-edit-type')
            switch (editType) {
                case 'bgC':
                    $('.edit-area-middle .styleEdit .color-picker.double').addClass('active').siblings('.style-edit-tool').removeClass('active')
                    break;
                case 'bdC':
                    $('.edit-area-middle .styleEdit .color-picker.single').addClass('active').siblings('.style-edit-tool').removeClass('active')
                    break;
                case 'color':
                    $('.edit-area-middle .styleEdit .color-picker.single').addClass('active').siblings('.style-edit-tool').removeClass('active')
                    break;
                case 'img':
                    $('.edit-area-middle .styleEdit .upload-photo').addClass('active').siblings('.style-edit-tool').removeClass('active')
                    dataSize && $('.upload-photo .text .size').text('图片尺寸：' + dataSize)
                    // 如果是图片元素 在右侧编辑区域显示其预览效果
                    $('#previewImg').attr('src', innerTarget.attr('src'))
                    break;
                case 'bgImg':
                    $('.edit-area-middle .styleEdit .upload-photo').addClass('active').siblings('.style-edit-tool').removeClass('active')
                    dataSize && $('.upload-photo .text .size').text('图片尺寸：' + dataSize)
                    // 如果是图片元素 在右侧编辑区域显示其预览效果
                    $('#previewImg').attr('src', innerTarget.attr('src'))
                    break;
                case 'text':
                    $('.edit-area-middle .styleEdit .rich-text').addClass('active').siblings('.style-edit-tool').removeClass('active')
                    $('.edit-area-middle .styleEdit .rich-text #txtArea').val(target.find('.text').html().replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; }).replace(/<br(\s+)?\/?>/g, '\n'))
                    break;
                default:
                    break;
            }
            // 如果点击区域是奖品 要显示概率输入框
            var targetItem = null
            if (e.target.tagName.toLowerCase() === 'img') {
                targetItem = e.target
            } else {
                targetItem = e.target.getElementsByTagName('img')[0]
            }
            if ($(targetItem).attr('data-putonid') !== undefined) {
                $('.real-prize-info-box').show()

                var activeQuery = $('.edit-area-phone-content [data-putonid].active').attr('data-query')
                var activeIndex = $('.edit-area-phone-content [data-putonid].active').attr('data-index')

                if (activeIndex !== undefined) {
                    for (var i = 0; i < probabilityDrawConfig.length; i++) {
                        var pItem = probabilityDrawConfig[i]
                        if (pItem.index === activeIndex) {
                            $('#realPrizePutonId').val(pItem.selectedPrize)
                            $('#realPrizeLuckyProbability').val(pItem.Probability)
                            $('#realPrizeLuckyNum').val(pItem.MaxNum)
                        }
                    }
                } else {
                    for (var i = 0; i < probabilityDrawConfig.length; i++) {
                        var pItem = probabilityDrawConfig[i]
                        if (pItem.query === activeQuery) {
                            $('#realPrizePutonId').val(pItem.selectedPrize)
                            $('#realPrizeLuckyProbability').val(pItem.Probability)
                            $('#realPrizeLuckyNum').val(pItem.MaxNum)
                        }
                    }
                }

            } else {
                $('.real-prize-info-box').hide()
            }
        })
    }
})