<template>
  <div
    :style="styleMap?.mainStyle"
    class="w-full h-full relative overflow-hidden box-border flex items-start bg-#000"
  >
    <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
    <LuPlay class="m-auto" size="45px" />
  </div>
</template>

<script setup lang="ts">
import { useWidgetStyle } from '../hooks/useWidgetStyle'
import ImageBg from '../ImageBg.vue'
import { LuPlay } from 'vue-icons-plus/lu'

const props = defineProps<{
  width: number
  height: number
  styles: any
  state?: string
  part?: string
  source: {
    type: 'file' | 'signal' // file文件 signal信号
    file: {
      id: string
      sd_path: string
      autoplay: boolean
      loop: boolean
    }
    signal: string
  }
}>()

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