<template>
  <div :style="{ ...(styleMap?.mainStyle || {}), ...otherStyles }" class="w-full h-full">
    <span
      class="shrink-0 whitespace-pre!"
      v-for="(item, index) in resolvedItems"
      :key="index"
      :style="getSpanStyle(item)"
      >{{ item.resolvedText.text }}</span
    >
  </div>
</template>

<script setup lang="ts">
import { computed, CSSProperties } from 'vue'
import { LineEnum } from './data'
import { useWidgetStyle } from '../hooks/useWidgetStyle'
import { useLanguage } from '../hooks/useLanguage'

import type { SpanItem } from './data'

const props = defineProps<{
  width: number
  height: number
  styles: any
  state?: string
  mode: 'break' | 'fixed' | 'expand'
  items: SpanItem[]
}>()

const styleMap = useWidgetStyle({
  widget: 'lv_span',
  props
})
const { resolveText, getResolvedFontStyle } = useLanguage()
const resolvedItems = computed(() =>
  (props.items || []).map((item) => ({
    ...item,
    resolvedText: resolveText(item.text),
    resolvedStyle: getResolvedFontStyle(item.text)
  }))
)

// 额外样式
const otherStyles = computed(() => {
  const otherStyles: CSSProperties = {}

  if (props.mode === 'expand') {
    otherStyles.display = 'flex'
    otherStyles.flexWrap = 'nowrap'
  }

  if (props.mode === 'fixed') {
    otherStyles.overflow = 'hidden'
  }

  return otherStyles
})

// 获取子项样式
const getSpanStyle = (item: SpanItem & { resolvedStyle: CSSProperties }) => {
  const lineStyle =
    item.text_decor === LineEnum['LV_TEXT_DECOR_UNDERLINE | LV_TEXT_DECOR_STRIKETHROUGH']
      ? 'underline line-through'
      : item.text_decor === LineEnum.LV_TEXT_DECOR_UNDERLINE
        ? 'underline'
        : item.text_decor === LineEnum.LV_TEXT_DECOR_STRIKETHROUGH
          ? 'line-through'
          : 'none'

  return {
    color: item.text_color,
    fontSize: `${item.font_size}px`,
    textDecoration: lineStyle,
    ...item.resolvedStyle
  }
}
</script>

<style scoped></style>
