<template>
  <div :style="styleMap?.mainStyle" class="w-full h-full box-border relative">
    <ImageBg
      v-if="styleMap?.mainStyle?.imageSrc"
      :src="styleMap?.mainStyle?.imageSrc"
      :imageStyle="styleMap?.mainStyle?.imageStyle"
    />
    <div class="relative w-full overflow-hidden" :class="direction === 'left' ? 'text-right' : ''">
      <span :style="selectedTextStyle">{{ resolvedOptions?.[0]?.text || '' }}</span>
      <div class="absolute right-0 top-0" :class="direction === 'left' ? 'left-0 right-auto' : ''">
        <i class="lvgl-icon not-italic" v-html="icon ? getSymbol(icon) : ''" :style="iconStyle"></i>
      </div>
    </div>
    <div
      v-if="showList"
      :style="{ ...styleMap?.listStyle, ...popStyle }"
      style="padding: 0; width: 100%; height: auto"
      class="absolute bg-white max-h-[120px] overflow-y-auto dropdown-pop"
    >
      <ImageBg
        v-if="styleMap?.listStyle?.imageSrc"
        :src="styleMap?.listStyle?.imageSrc"
        :imageStyle="styleMap?.listStyle?.imageStyle"
      />
      <div
        class="truncate h-24px leading-24px px-10px box-border"
        v-for="(item, index) in resolvedOptions"
        :key="`${item.raw}-${index}`"
        :style="index === 0 ? styleMap?.listSelectedStyle : ''"
      >
        <ImageBg
          v-if="styleMap?.listSelectedStyle?.imageSrc && index === 0"
          :src="styleMap?.listSelectedStyle?.imageSrc"
          :imageStyle="styleMap?.listSelectedStyle?.imageStyle"
        />
        <span class="z-1" :style="item.style">{{ item.text }}</span>
      </div>
      <div class="absolute" :style="{ ...(styleMap?.scrollbarStyle || {}), ...scrollbarStyle }" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, CSSProperties } from 'vue'
import { useWidgetStyle } from '../hooks/useWidgetStyle'
import ImageBg from '../ImageBg.vue'
import { getSymbol } from '@/utils'
import { useLanguage } from '../hooks/useLanguage'

const props = defineProps<{
  width: number
  height: number
  icon?: string
  styles: any
  state?: string
  part?: string
  options: string[]
  direction?: 'top' | 'bottom' | 'left' | 'right'
}>()
const { resolveText, getResolvedFontStyle } = useLanguage()

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

const resolvedOptions = computed(() =>
  (props.options || []).map((raw) => {
    const resolved = resolveText(raw)
    return {
      raw,
      text: resolved.text,
      style: getResolvedFontStyle(raw)
    }
  })
)
const selectedTextStyle = computed(() => resolvedOptions.value[0]?.style || {})

const showList = computed(() => props.part !== 'main')

const popStyle = computed((): CSSProperties => {
  const border = (styleMap.value?.mainStyle?.borderWidth as string)
    ? (styleMap.value?.mainStyle?.borderWidth as string)?.replace('px', '')
    : '0'

  return props.direction === 'left'
    ? {
        top: `-${Number(border || 0)}px`,
        left: `calc(-100% - ${Number(border || 0) * 3}px)`
      }
    : props.direction === 'right'
      ? {
          right: `calc(-100% - ${Number(border || 0) * 3}px)`,
          top: `-${Number(border || 0)}px`
        }
      : props.direction === 'top'
        ? {
            top: 'auto',
            bottom: `calc(100% + ${Number(border || 0)}px)`,
            left: `-${Number(border || 0)}px`
          }
        : {
            bottom: 'auto',
            top: `calc(100% + ${Number(border || 0)}px)`,
            left: `-${Number(border || 0)}px`
          }
})
// 滚动条样式
const scrollbarStyle = computed(() => {
  const border = styleMap.value?.mainStyle?.borderWidth as string

  return {
    right: border || 0,
    top: border || 0,
    width: '3px',
    height: '40%'
  }
})

// 图标样式
const iconStyle = computed(() => {
  const direction = props.direction
  const rotate =
    direction === 'top' ? 180 : direction === 'left' ? 90 : direction === 'right' ? -90 : 0
  return {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    transform: `rotate(${rotate}deg)`
  }
})
</script>

<style lang="less" scoped>
.dropdown-pop {
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
