<template>

<div class="track">

  <NavTags />
  <StatusBar v-model="trackers" />
  <Videos ref="videosRef" v-model="trackers" />
  <Traffic ref="trafficRef" @camera-change="cameraChange" v-model="trackers" />

  <Video ref="videoRef" />

</div>

</template>

<script lang='ts' setup>

import { reactive, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'

import NavTags from './components/NavTags/index.vue'
import StatusBar from './components/StatusBar/index.vue'
import Videos from './components/Videos/index.vue'
import Traffic from './components/Traffic/index.vue'
import Video from '@/components/Video/index.vue'

import { useTunnelStoreWithOut } from '@/store/modules/tunnel'

import { ElMessage } from 'element-plus'
import { isSomeNone } from '@/utils/is'
import { setTrackId } from '@/flash/Track'

const route = useRoute()
const tunnelStore = useTunnelStoreWithOut()

const trackers = reactive<{
  id: string | null,
  car: any,
  direction: number| null,
  tracking: boolean,
  cameraLock: boolean,
  sectionAct: string
}>({
  id: null,
  car: null,
  direction: null,
  tracking: false,
  cameraLock: false,
  sectionAct: 0
})

const videoRef = ref<any>(null)
const videosRef = ref<any>(null)
const trafficRef = ref<any>(null)

const cameraChange = (e) => {
  videosRef.value.cameraSet(e)
}

onBeforeMount(() => {

  const { id, direction } = route.query

  if (isSomeNone([id, direction])) {
    return ElMessage.error('页面错误！')
  }

  trackers.id = id as string
  trackers.direction = +(direction as string)

  setTrackId(trackers.id)

  watchEffect(cleanUp => {
    if (tunnelStore.init) {
      const { start, end, long } = [tunnelStore.getUpTunnel, tunnelStore.getDownTunnel][direction]
      nextTick(() => {
        trafficRef.value.createTraffic({
          direction: +direction,
          start,
          end,
          miles: long
        })
        cleanUp()
      })
      
    }
  })

})

provide('openVideoPop', (e) => {
  videoRef.value?.diaOpen(e)
})

</script>

<style lang="scss" scoped>

.track {
  padding-bottom: 60px;
}

</style>