<script setup lang="ts">
import { Spin } from 'ant-design-vue'
import { computed, nextTick, onMounted, onUnmounted, ref, unref } from 'vue'

import { getPlayUrl, isRtspProtocol, useFingerprint } from './component/config'

import { isLightboxMode, isShareMode } from '@/utils/env'
import type { CreateComponentType } from '@/core/Library/types'
import { closeFlvPlay } from '@/api/video'
import { useContentDataStore } from '@/store/modules/contentData'
import { XGPlayer } from '@/components/Video/index.ts'
import type { VideoItemRecordType } from '@/api/video/model'
import type { StreamType } from '@/components/Video/src/types'

const props = defineProps<{
  config: CreateComponentType

}>()

// 获取节点数据
const contentDataStore = useContentDataStore()
const { getResult } = useFingerprint()
const loading = ref(false)

// 存储视频数据
const videoConfig = computed(() => {
  return contentDataStore?.contentData.filter((item) => {
    return props.config.cellInfo?.id === item.configurationNodeId
  })
})

// const loading = ref<boolean>(false)
const exampleVideoPlay = 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm'

const playUrl = ref<string>()
const playType = ref<StreamType>()

// 数据绑定获取的url
const handleGetVideoPlay = async () => {
  try {
    const { dataSourceJson } = unref(videoConfig)[0] || {}
    const { videoOption } = dataSourceJson || {}
    const { id, accessMode, videoUrl, deviceId, channelId, playProtocol } = videoOption || {}

    const { type, url } = await getPlayUrl({
      id: id!,
      accessMode: accessMode!,
      playProtocol: playProtocol!,
      videoUrl: videoUrl!,
      params: {
        deviceId,
        channelNo: channelId,
      },
    } as VideoItemRecordType) || {}
    playUrl.value = url
    playType.value = type
  }
  finally {
    loading.value = false
  }
}

// 默认播放
const handleSelectPreview = () => {
  loading.value = false
  playUrl.value = exampleVideoPlay
  playType.value = 'auto'
}

onMounted(async () => {
  await nextTick()
  isLightboxMode() || isShareMode()
    ? handleGetVideoPlay()
    : handleSelectPreview()
})

onUnmounted(async () => {
  const { visitorId } = await getResult()
  const { dataSourceJson } = unref(videoConfig)[0] || {}
  const { videoOption } = dataSourceJson || {}
  const { videoUrl } = videoOption || {}
  isRtspProtocol(videoUrl!) && closeFlvPlay(videoUrl!, visitorId)
})
</script>

<template>
  <div class="w-full h-full flex justify-center items-center video-container">
    <Spin :spinning="loading" class="w-full h-full">
      <XGPlayer auto-play :url="playUrl" :stream-type="playType" :config="{ width: '100%', height: '100%' }" />
    </Spin>
  </div>
</template>

<style lang="less" scoped>
 .video-container {
  :deep(.ant-spin-nested-loading) {
    width: 100%;
    height: 100%;
    .ant-spin-container {
      width: 100%;
      height: 100%;
    }
  }
 }
</style>