<template>
  <div :style="styleMap?.mainStyle" class="relative w-full h-full box-border overflow-hidden">
    <ImageBg v-if="styleMap?.mainStyle?.imageSrc" :src="styleMap?.mainStyle?.imageSrc"
      :imageStyle="styleMap?.mainStyle?.imageStyle" />

    <svg class="absolute left-0 top-0 z-2"
      :viewBox="`${-(strokeWidth / 2)} ${-(strokeWidth / 2)} ${width + strokeWidth} ${height + strokeWidth}`"
      xmlns="http://www.w3.org/2000/svg">
      <line v-for="line in lines" :x1="line.x1" :y1="line.y1" :x2="line.x2" :y2="line.y2"
        :stroke="styleMap?.mainStyle?.line?.color" :stroke-width="strokeWidth"
        :stroke-linecap="styleMap?.mainStyle?.line?.radius ? 'round' : 'butt'" />
    </svg>
  </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
  styles: any
  state?: string
  part?: string
  points: { x: number; y: number }[]
}>()

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

// 获取全部线段
const lines = computed(() => {
  return props.points.map((point, index) => {
    const nextPoint = props.points[index + 1] || props.points[index]
    return {
      x1: point.x,
      y1: point.y,
      x2: nextPoint.x,
      y2: nextPoint.y
    }
  })
})

const strokeWidth = computed(() => styleMap.value?.mainStyle?.line?.width ?? 2)
</script>
