<template>
  <div :style="getStyle" class="w-full h-full relative">
    <ImageBg
      v-if="getStyle?.imageSrc"
      :src="getStyle?.imageSrc"
      :imageStyle="getStyle?.imageStyle"
    />
    <div
      class="w-full h-full p-4px flex box-border"
      :style="{ 'justify-content': part !== 'indicator' ? 'start' : 'end' }"
    >
      <span
        class="absolute inline-block flex-1 aspect-square box-border"
        :style="styleMap.knobStyle"
        style="height: calc(100% - 8px)"
      >
        <ImageBg
          v-if="styleMap?.knobStyle?.imageSrc"
          :src="styleMap?.knobStyle?.imageSrc"
          :imageStyle="styleMap?.knobStyle?.imageStyle"
        />
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
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: 'lv_switch',
  props
})

// 根据当前part计算样式
const getStyle = computed(() => {
  return {
    ...styleMap.value.mainStyle,
    ...(props.part === 'indicator' ? styleMap.value.indicatorStyle : {})
  }
})
</script>
