<template>

<div class="section">

  <Cameras ref="videosRef" :commons />
  <Traffic @camera-change="cameraChange" v-model="commons" />

</div>

<!-- <Video ref="videoRef" /> -->

</template>

<script lang='ts' setup>

import Cameras from './components/Cameras/index.vue'
import Traffic from './components/Traffic/index.vue'
// import Video from '@/components/Video/index.vue'
import { useRoute } from 'vue-router'

import { ref } from 'vue'

// const videoRef = ref<any>(null)
const videosRef = ref<any>(null)
const route = useRoute()


// 公共参数
const commons = reactive({
  filterType: null,
  useMaterial: false, // 是否使用贴图
  plateType: 1, // 铭牌展示类型
  direction: 0, // 车流方向
  sectionAct: 1 // 当前断面
})

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

onBeforeMount(() => {
  const querys = route.query
  commons.sectionAct = +querys.x
  commons.direction = +querys.direction
})


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

</script>

<style lang='scss' scoped>

.section {
  text-align: center;
}

</style>