<template>
  <div :style="mainStyle" class="w-full h-full flex overflow-hidden relative">
    <ImageBg v-if="styleMap?.mainStyle?.imageSrc" :src="styleMap?.mainStyle?.imageSrc"
      :imageStyle="styleMap?.mainStyle?.imageStyle" />
    <div class="lvtab-header flex box-border" :style="tabMainStyle">
      <div class="flex-1 shrink-0 box-border overflow-hidden whitespace-pre!" v-for="(item, index) in resolvedChildren"
        :key="index" :style="getTabItemStyle(item.name, activeIndex === index)">
        <div class="w-full h-full grid place-items-center box-border" :style="activeIndex === index
            ? {
              borderBottom: '2px solid',
              borderBottomColor: activeStyle?.color || '#000'
            }
            : null
          ">
          {{ item.resolvedName.text }}
        </div>
      </div>
    </div>
    <div class="w-auto h-auto flex-1 p-10px">
      <div class="overflow-hidden whitespace-nowrap whitespace-pre!" :style="activeContentTextStyle">
        {{ resolvedChildren?.[activeIndex]?.resolvedText.text || '' }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, type CSSProperties } from 'vue'
import { useWidgetStyle, getStyle } from '../hooks/useWidgetStyle'
import { useProjectStore } from '@/store/modules/project'
import { assign } from 'lodash-es'
import { useLanguage } from '../hooks/useLanguage'

import ImageBg from '../ImageBg.vue'

const props = defineProps<{
  width: number
  height: number
  styles: any
  state: string
  part: string
  scrollbar: string
  size: number
  position: string
  children?: any[]
  activeIndex: number
}>()
const { resolveText, getResolvedFontStyle } = useLanguage()

const styleMap = useWidgetStyle({
  widget: 'lv_tabview',
  props
})

const resolvedChildren = computed(() =>
  (props.children || []).map((item) => ({
    ...item,
    resolvedName: resolveText(item?.name),
    resolvedText: resolveText(item?.text)
  }))
)

const projectStore = useProjectStore()

// 根据位置动态调整样式
const tabMainStyle = computed((): CSSProperties => {
  const { position = 'top', size } = props
  return ['left', 'right'].includes(position)
    ? {
      width: `${size}px`,
      height: '100%',
      flexDirection: 'column',
      ...styleMap.value?.tabStyle
    }
    : {
      height: `${size}px`,
      width: '100%',
      flexDirection: 'row',
      ...styleMap.value?.tabStyle
    }
})

// 激活样式
const activeStyle = computed(() => {
  const styles = props.styles

  const itemStyle = styles.find(
    (item) => item?.part?.name === 'items' && item.part?.state === 'checked'
  )

  const stateItemStyle = projectStore.globalStyle
    ?.find((item) => item.widget === 'lv_tabview')
    ?.part?.find((item) => item.partName === 'items')
    ?.state?.find((item) => item.state === 'checked')?.style

  const defaultItemStyle = projectStore.globalStyle
    ?.find((item) => item.widget === 'lv_tabview')
    ?.part?.find((item) => item.partName === 'items')?.defaultStyle

  const style = assign({}, defaultItemStyle, stateItemStyle, itemStyle)

  let styleMap: CSSProperties = {}

  Object.keys(style || {}).forEach((key) => {
    // 合并样式
    styleMap = {
      ...styleMap,
      ...getStyle(key, style?.[key], {
        width: props.width,
        height: props.height
      })
    }
  })

  return styleMap
})

const getTabItemStyle = (name?: string, isActive?: boolean) => {
  return {
    ...((isActive ? activeStyle.value : styleMap.value?.itemsStyle) || {}),
    ...getResolvedFontStyle(name)
  }
}

const activeContentTextStyle = computed(() =>
  getResolvedFontStyle(props.children?.[props.activeIndex]?.text)
)

// 动态计算main样式
const mainStyle = computed(() => {
  const { position = 'top' } = props
  const otherStyle: CSSProperties = {}

  if (position === 'top') {
    otherStyle.flexDirection = 'column'
  }

  if (position === 'left') {
    otherStyle.flexDirection = 'row'
  }

  if (position === 'right') {
    otherStyle.flexFlow = 'row-reverse'
  }

  if (position === 'bottom') {
    otherStyle.flexFlow = 'column-reverse'
  }

  return {
    ...styleMap.value?.mainStyle,
    ...otherStyle
  }
})
</script>

<style scoped></style>
