<template>
  <div>
    <n-spin size="medium" :show="showLoading" :content-style="{ background: 'red' }">
      <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
})

const loadTime = (time: number, status: boolean) => {
  setTimeout(() => {
    showLoading.value = status
  }, time)
}

watch(
  () => dataset?.value,
  (newData: string) => {
    loadTime(800, true)
    if (newData) {
      loadTime(2000, false)
    }
    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>