import { sin, cos, toPercent } from '@/utils/translate'
import { imgUrlTrans } from '@/utils/imgUtils'
import { hexColorToRGBA } from '@/views/chart/components/js/util'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { isMainCanvas, isTabCanvas } from '@/utils/canvasUtils'
const dvMainStore = dvMainStoreWithOut()
export function getShapeStyle(style) {
  const result = {}
  ;['width', 'height', 'top', 'left', 'rotate'].forEach(attr => {
    if (attr != 'rotate') {
      result[attr] = style[attr] + 'px'
    } else {
      result['transform'] = 'rotate(' + style[attr] + 'deg)'
    }
  })

  return result
}

export function getShapeItemStyle(
  item,
  { dvModel, cellWidth, cellHeight, curGap, showPosition = 'preview' }
) {
  let result = {}
  if (dvModel === 'dashboard' && !item['isPlayer']) {
    result = {
      padding: curGap + 'px!important',
      width: cellWidth * item.sizeX + 'px',
      height: cellHeight * item.sizeY + 'px',
      left: cellWidth * (item.x - 1) + 'px',
      top: cellHeight * (item.y - 1) + 'px'
    }
  } else if (dvModel === 'dataV' && isTabCanvas(item.canvasId) && showPosition === 'preview') {
    result = {
      padding: curGap + 'px!important',
      width: toPercent(item.groupStyle.width),
      height: toPercent(item.groupStyle.height),
      top: toPercent(item.groupStyle.top),
      left: toPercent(item.groupStyle.left)
    }
  } else {
    result = {
      padding: curGap + 'px!important',
      width: item.style.width + 'px',
      height: item.style.height + 'px',
      left: item.style.left + 'px',
      top: item.style.top + 'px'
    }
  }

  return result
}

export function syncShapeItemStyle(item, cellWidth, cellHeight) {
  item.style.left = cellWidth * (item.x - 1)
  item.style.top = cellHeight * (item.y - 1)
  item.style.width = cellWidth * item.sizeX
  item.style.height = cellHeight * item.sizeY
}

const needUnit = [
  'fontSize',
  'width',
  'height',
  'top',
  'left',
  'borderWidth',
  'letterSpacing',
  'borderRadius'
]

export function getSVGStyle(style, filter = []) {
  const result = {}

  ;[
    'opacity',
    'width',
    'height',
    'top',
    'left',
    'rotate',
    'fontSize',
    'fontWeight',
    'lineHeight',
    'letterSpacing',
    'textAlign',
    'color'
  ].forEach(key => {
    if (!filter.includes(key)) {
      if (key != 'rotate') {
        if (style[key] !== '') {
          result[key] = style[key]

          if (needUnit.includes(key)) {
            result[key] += 'px'
          }
        }
      } else {
        result['transform'] = key + '(' + style[key] + 'deg)'
      }
    }
  })

  return result
}

export function getItemAllStyle(item, filter = []) {
  const style = item.style
  const commonBackground = item.commonBackground
  const result = {}
  Object.keys(style).forEach(key => {
    if (!filter.includes(key)) {
      if (key != 'rotate') {
        if (style[key] !== '') {
          result[key] = style[key]

          if (needUnit.includes(key)) {
            result[key] += 'px'
          }
        }
      } else {
        result['transform'] = key + '(' + style[key] + 'deg)'
      }
    }

    if (commonBackground) {
      //附加背景样式
      let colorRGBA = ''
      if (commonBackground.backgroundColorSelect) {
        colorRGBA = hexColorToRGBA(commonBackground.backgroundColor, commonBackground.alpha)
      }
      if (commonBackground.backgroundImageEnable) {
        if (
          commonBackground.backgroundType === 'outerImage' &&
          typeof commonBackground.outerImage === 'string'
        ) {
          result['background'] = `url(${imgUrlTrans(
            commonBackground.outerImage
          )}) no-repeat ${colorRGBA}`
        } else {
          result['background-color'] = colorRGBA
        }
      } else {
        result['background-color'] = colorRGBA
      }
    }
  })

  return result
}

export function getStyle(style, filter = []) {
  const result = {}
  Object.keys(style).forEach(key => {
    if (!filter.includes(key)) {
      if (key != 'rotate') {
        if (style[key] !== '') {
          result[key] = style[key]

          if (needUnit.includes(key)) {
            result[key] += 'px'
          }
        }
      } else {
        result['transform'] = key + '(' + style[key] + 'deg)'
      }
    }
  })
  return result
}

// 获取一个组件旋转 rotate 后的样式
export function getComponentRotatedStyle(style) {
  style = { ...style }
  if (style.rotate != 0) {
    const newWidth = style.width * cos(style.rotate) + style.height * sin(style.rotate)
    const diffX = (style.width - newWidth) / 2 // 旋转后范围变小是正值，变大是负值
    style.left += diffX
    style.right = style.left + newWidth

    const newHeight = style.height * cos(style.rotate) + style.width * sin(style.rotate)
    const diffY = (newHeight - style.height) / 2 // 始终是正
    style.top -= diffY
    style.bottom = style.top + newHeight

    style.width = newWidth
    style.height = newHeight
  } else {
    style.bottom = style.top + style.height
    style.right = style.left + style.width
  }

  return style
}

export function getCanvasStyle(canvasStyleData, canvasId = 'canvas-main') {
  const {
    backgroundColorSelect,
    background,
    backgroundColor,
    backgroundImageEnable,
    fontSize,
    mobileSetting,
    fontFamily
  } = canvasStyleData
  const style = { fontSize: fontSize + 'px', color: canvasStyleData.color }
  if (isMainCanvas(canvasId)) {
    // 仪表板默认色#f5f6f7 大屏默认配色 #1a1a1a
    let colorRGBA = dvMainStore.dvInfo.type === 'dashboard' ? '#f5f6f7' : '#1a1a1a'
    if (backgroundColorSelect && backgroundColor) {
      colorRGBA = backgroundColor
    }
    if (backgroundImageEnable) {
      style['background'] = `url(${imgUrlTrans(background)}) no-repeat ${colorRGBA}`
    } else {
      style['background-color'] = colorRGBA
    }

    if (dvMainStore.mobileInPc && mobileSetting?.customSetting) {
      const { backgroundColorSelect, color, backgroundImageEnable, background } = mobileSetting
      if (backgroundColorSelect && backgroundImageEnable && typeof background === 'string') {
        style['background'] = `url(${imgUrlTrans(background)}) no-repeat ${color}`
      } else if (backgroundColorSelect) {
        style['background-color'] = color
      } else if (backgroundImageEnable) {
        style['background'] = `url(${imgUrlTrans(background)}) no-repeat`
      }
    }
    style['font-family'] = fontFamily + '!important'
  }

  return style
}

export function createGroupStyle(groupComponent) {
  const parentStyle = groupComponent.style
  groupComponent.propValue.forEach(component => {
    // 分组计算逻辑
    // 1.groupStyle记录left top width height 在出现分组缩放的时候进行等比例变更（缩放来源有两种a.整个大屏的缩放 b.分组尺寸的调整）
    // 2.component 内部进行位移或者尺寸的变更 要同步到这个比例中
    const style = { ...component.style }
    component.groupStyle.left = (style.left - parentStyle.left) / parentStyle.width
    component.groupStyle.top = (style.top - parentStyle.top) / parentStyle.height
    component.groupStyle.width = style.width / parentStyle.width
    component.groupStyle.height = style.height / parentStyle.height

    component.style.left = component.style.left - parentStyle.left
    component.style.top = component.style.top - parentStyle.top
  })
}

function dataVTabSizeStyleAdaptor(tabComponent) {
  const parentStyleAdaptor = { ...tabComponent.style }
  const offset = parentStyleAdaptor.showTabTitle ? 46 : 0
  const domId =
    dvMainStore.editMode === 'edit'
      ? 'component' + tabComponent.id
      : 'enlarge-inner-content' + tabComponent.id
  const tabDom = document.getElementById(domId)
  if (tabDom) {
    parentStyleAdaptor.height = tabDom.clientHeight - offset
    parentStyleAdaptor.width = tabDom.clientWidth
  } else {
    parentStyleAdaptor.height = parentStyleAdaptor.height - offset
  }

  tabComponent.propValue?.forEach(tabItem => {
    tabItem.componentData?.forEach(tabComponent => {
      groupItemStyleAdaptor(tabComponent, parentStyleAdaptor)
      if (['Group'].includes(tabComponent.component)) {
        groupSizeStyleAdaptor(tabComponent)
      }
    })
  })
}

export function groupItemStyleAdaptor(component, parentStyle) {
  // 分组还原逻辑
  // 当发上分组缩放是，要将内部组件按照比例转换
  const styleScale = component.groupStyle
  component.style.left = parentStyle.width * styleScale.left
  component.style.top = parentStyle.height * styleScale.top
  component.style.width = parentStyle.width * styleScale.width
  component.style.height = parentStyle.height * styleScale.height
}

export function groupStyleRevertBatch(groupComponent, parentStyle) {
  if (groupComponent.component === 'DeTabs') {
    groupComponent.propValue?.forEach(tabItem => {
      tabItem.componentData?.forEach(tabComponent => {
        groupStyleRevert(tabComponent, parentStyle)
      })
    })
  }
}

export function tabInnerStyleRevert(tabOuterComponent) {
  const parentStyle = {
    width: tabOuterComponent.style.width,
    height: tabOuterComponent.style.height - (tabOuterComponent.style.showTabTitle ? 46 : 0)
  }
  tabOuterComponent.propValue?.forEach(tabItem => {
    tabItem.componentData?.forEach(tabComponent => {
      groupStyleRevert(tabComponent, parentStyle)
    })
  })
}

export function groupStyleRevert(innerComponent, parentStyle) {
  const innerStyle = { ...innerComponent.style }
  innerComponent.groupStyle.left = innerStyle.left / parentStyle.width
  innerComponent.groupStyle.top = innerStyle.top / parentStyle.height
  innerComponent.groupStyle.width = innerStyle.width / parentStyle.width
  innerComponent.groupStyle.height = innerStyle.height / parentStyle.height
}

export function groupSizeStyleAdaptor(groupComponent) {
  if (groupComponent.component === 'Group') {
    const parentStyle = groupComponent.style
    groupComponent.propValue.forEach(component => {
      groupItemStyleAdaptor(component, parentStyle)
    })
  } else {
    dataVTabSizeStyleAdaptor(groupComponent)
  }
}

export function dataVTabComponentAdd(innerComponent, parentComponent) {
  //do dataVTabComponentAdd
  innerComponent.style.top = 0
  innerComponent.style.left = 0
  const parentStyleAdaptor = { ...parentComponent.style }
  // 去掉tab头部高度
  parentStyleAdaptor.height = parentStyleAdaptor.height - (parentComponent.showTabTitle ? 46 : 0)
  groupStyleRevert(innerComponent, parentStyleAdaptor)
}