<template>
  <div>
    <n-spin size="medium" :show="showLoading" class="player-spin">
      <XGPlayer :url="sourceUrl" :stream-type="playType"
                :config="{width: '100%', height: '100%', poster: option.poster}"
                :auto-play="option.autoplay"/>
    </n-spin>
  </div>
</template>
<script setup lang="ts">
import {PropType, toRefs, shallowReactive, watch, ref} from 'vue'
import {CreateComponentType} from '@/packages/index.d'
import {Dataset, getPlayUrl, option as configOption} from './config'
import {XGPlayer} from '@/components/Video'
import {StreamType} from "@/components/Video/src/types";
import {CameraRecord} from "@/api/external/common/model";
import { isNullOrUnDef } from '@/utils/external/is';

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

const showLoading = ref(false)

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

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

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

const sourceUrl = ref('')
const playType = ref<StreamType>()


async function getPlaySource(params: Dataset) {
    const {id, channelId, deviceId, accessMode, customUrl, playProtocol} = params
    if (isNullOrUnDef(accessMode)) return
    const {type, url} = await getPlayUrl({
      id: id,
      accessMode: accessMode,
      playProtocol: playProtocol,
      videoUrl: customUrl,
      params: {
        deviceId: deviceId,
        channelNo: channelId,
      },
    } as unknown as CameraRecord) || {}
    sourceUrl.value = url!
    playType.value = type
}

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

</script>

<style lang="scss" scoped>
.player-spin {
  width: 100%;
  height: 100%;
  @include deep() {
    .n-spin-content {
      width: 100%;
      height: 100%;
    }
  }
}
</style>