<template>
  <div>
    <VideoPlay :h="h" :path="option.dataset" :autoPlay="autoplay" :poster="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 { h } = toRefs(props.chartConfig.attr)

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

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

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

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

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