$(function (){
  window.clickToFocus = function (){
    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')
      $(e.target).addClass('active')
      // 选中编辑区中对应的元素
      var dataQuery = $(e.target).attr('data-query')
      var dataIndex = parseInt($(e.target).attr('data-index')) || 0
      $('.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)
            break;
          case 'bgImg':
            $('.edit-area-middle .styleEdit .upload-photo').addClass('active').siblings('.style-edit-tool').removeClass('active')
            dataSize && $('.upload-photo .text .size').text('图片尺寸：' + dataSize)
            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').text())
            break;
          default:
            break;
        }
      }
    })

    // 点击右侧编辑区域 手机中与被点击元素对应的元素添加 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)
          break;
        case 'bgImg':
          $('.edit-area-middle .styleEdit .upload-photo').addClass('active').siblings('.style-edit-tool').removeClass('active')
          dataSize && $('.upload-photo .text .size').text('图片尺寸：' + dataSize)
          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').text())
          break;
        default:
          break;
      }
    })
  }
})