<template>
  <div>
    <n-spin size="medium" :show="showLoading" class="player-spin">
      <XGPlayer
        ref="XGPlayerRef"
        @userAction="handleOnUserAction"
        :url="sourceUrl"
        :stream-type="playType"
        :config="{ width: '100%', height: '100%', poster: poster }"
        :auto-play="autoplay"
      />
    </n-spin>
  </div>
</template>
<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch, ref, nextTick } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { Dataset, getPlayUrl, option as configOption } from './config'
import { XGPlayer } from '@/components/Video'
import { StreamType, UserActionEventType } 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 XGPlayerRef = ref<InstanceType<typeof XGPlayer>>()

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) {
  if (!autoplay.value) return
  doPlaySource(params)
}

async function doPlaySource(params?: Dataset) {
  const { id, channelId, deviceId, accessMode, customUrl, playProtocol } = params as unknown as Dataset
  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
}

function handleOnUserAction(event: UserActionEventType) {
  console.log(event)
  const { from, to, pluginName } = event
  if (from && !to) {
    doPlaySource(dataset?.value)
    nextTick(() => {
      XGPlayerRef.value?.getPlayerInstance()?.play()
    })
  } else if (!from && to && pluginName !== "fullscreen") {
    nextTick(() => {
      XGPlayerRef.value?.getPlayerInstance()?.pause()
    })
  }
}

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>