<template>
  <div>
    <VideoPlay :w="w" :h="h" :sourceSrc="option.dataset" :autoPlay="option.autoplay" :avatar="option.poster" />
  </div>
</template>
<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { option as configOption } from './config'
import { VideoPlay } from './components'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const { w, h } = toRefs(props.chartConfig.attr)

const { autoplay, dataset, poster, url } = toRefs(props.chartConfig.option)

const option = shallowReactive({
  dataset: configOption.dataset,
  poster: configOption.poster,
  autoplay:configOption.autoplay
})

watch(
  () => dataset?.value,
  (newData: string) => {
    if (url?.value) {
      option.dataset = url?.value
    } else {
      option.dataset = newData
    }
  },
  {
    immediate: true
  }
)

watch(
  () => poster?.value,
  (newData: string) => {
    option.poster = newData
  },
  {
    immediate: true
  }
)

watch(
  () => autoplay?.value,
  (newData:boolean) => {
    option.autoplay = newData
  },
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped></style>