<template>
  <div class="section">
    <div class="flow-switch">
      <div class="inner">
        <Scales
          :isShowSceneMode="false"
          @plate-change="plateChange"
          v-model:useMaterial="commons.useMaterial"
          class="scale-ctrls"
        />
      </div>
    </div>

    <!-- 返回全局视图 -->
    <div class="back-home" @click="backHome">
      <div class="text-bef">返回全局视图</div>
    </div>

    <!-- <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 Scales from '@/views/traffic/components/Scales/index.vue'
import { useRoute, useRouter } from 'vue-router'

import { ref } from 'vue'

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

// 公共参数
const commons = reactive({
  filterType: null,
  useMaterial: true, // 是否使用贴图
  plateType: 1, // 铭牌展示类型
  direction: 0, // 车流方向
  sectionAct: 1, // 当前断面
  scrollLeft: null, // 滚动轴位置
  holeType: 'old' // 洞类型
})

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

// 展示牌切换
const plateChange = (e) => {
  commons.plateType = e
}

// 返回全局视图
const backHome = () => {
  router.push({
    name: 'Home'
  })
}

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

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

<style lang="scss" scoped>
$base-url: '@/assets/images/section/';

.section {
  text-align: center;

  .flow-switch {
    color: white;
    font-size: 14px;
    z-index: 6;
    position: absolute;
    right: 10px;
    top: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .inner {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 24px;
      .text-aft {
        margin-left: 6px;
      }
      .scale-ctrls {
        margin-right: 20px;
      }
    }

    :deep(.el-switch) {
      --el-switch-on-color: #007dfa;
      --el-switch-off-color: #203a60;
    }
  }

  .back-home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 32px;
    border-radius: 4px;
    // padding: 4px 12px;
    // box-sizing: border-box;
    background: rgba(0, 125, 250, 0.15);
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    color: #ffffff;
    margin: 30px 0 27px 44px;
    cursor: pointer;

    &::before {
      display: inline-block;
      content: '';
      width: 16px;
      height: 16px;
      background: url($base-url + 'back.png') no-repeat;
      background-size: cover;
      margin-right: 5px;
    }
  }
}
</style>
