<template>
  <div
    ref="boxRef"
    :style="styleMap?.mainStyle"
    class="w-full h-full relative overflow-hidden box-border flex items-start"
    :class="
      styleMap?.mainStyle?.textAlign === 'left'
        ? 'justify-start'
        : styleMap?.mainStyle?.textAlign === 'right'
          ? 'justify-end'
          : 'justify-center'
    "
  >
    <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
    <span ref="txtRef" class="z-2 lv_label_txt break-all whitespace-pre">{{ text }}</span>
  </div>
</template>

<script setup lang="ts">
import { useWidgetStyle } from '../hooks/useWidgetStyle'
import ImageBg from '../ImageBg.vue'

const props = defineProps<{
  width: number
  height: number
  text?: string
  styles: any
  state?: string
  part?: string
}>()

const styleMap = useWidgetStyle({
  widget: 'datetext',
  props
})
</script>

<style scoped>
.lv_label_txt::-webkit-scrollbar {
  display: none;
}
</style>
