<template>
  <div>
    <n-spin size="medium" :show="showLoading">
      <template #description>
        视频正在努力加载中......
      </template>
      <div>
        <VideoPlay :baseSize="{ w, h }" :sourceSrc="option.dataset" :autoPlay="option.autoplay" :avatar="option.poster" />
      </div>
    </n-spin>
  </div>
</template>
<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch, ref } 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 showLoading = ref(true)

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

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

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

watch(
  () => dataset?.value,
  (newData: string) => {
    if (newData) {
      setTimeout(() => {
        showLoading.value = false
      }, 2000);
    }
    option.dataset = newData
  },
  {
    immediate: true
  }
)

watch(
  () => [poster.value, autoplay.value],
  newData => {
    option.poster = newData.at(-2) as string
    option.autoplay = newData.at(-1) as boolean
  },
  {
    immediate: true
  }
)
</script>

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