<template>
  <div class="traffic">
    <FlowCarCtrl :trackers />
    <Scales
      @plate-change="plateChange"
      v-model:sceneMode="sceneMode"
      v-model:useMaterial="configs.useMaterial"
      class="scale-ctrls"
    />

    <XDirection
      v-if="sceneMode === 'panorama'"
      v-model:sectionAct="trackers.sectionAct"
      v-bind="{ ...configs, direction: trackers.direction, trackers, traffic }"
      @cars-update="onCarsUpdate"
      @go-section="goSection"
      @go-track="goTrack"
      @camera-change="e => emits('camera-change', e)"
    />
    <XDirectionSection
      ref="directionSectionRef"
      v-else
      v-bind="{ ...configs, direction: trackers.direction, trackers, traffic }"
      v-model:sectionAct="trackers.sectionAct"
      @cars-update="onCarsUpdate"
      @go-track="goTrack"
      @section-change="sectionChange"
      @camera-change="e => emits('camera-change', e)"
    />
  </div>

</template>

<script lang="ts" setup>

import XDirection from '@/views/traffic/roads/XDirection/index.vue'
import XDirectionSection from '@/views/traffic/roads/XDirectionSection/index.vue'

import FlowCarCtrl from '../FlowCarCtrls/index.vue'
import Scales from '@/views/traffic/components/Scales/index.vue'

import TrafficEngine from '@/views/traffic/roads/Engine/index'

import { setTrackId } from '@/flash/Track'

const emits = defineEmits(['camera-change'])

const trackers = defineModel<any>()

const sceneMode = ref('section') // 模式
const directionSectionRef = ref<any>(null) // 段面实例
const traffic = ref(null) // 车流引擎

// 路控参数
const configs = reactive<any>({
  plateType: 1, // 铭牌展示类型
  useMaterial: false // 是否使用贴图
})

// 铭牌切换
const plateChange = (e) => {
  configs.plateType = e
}

// 全景进入段面
const goSection = async ({ x }) => {
  sceneMode.value = 'section'
  trackers.value.sectionAct = x
  await nextTick()
  directionSectionRef.value.sectionChange(x, true)
}

// 车流变化
const onCarsUpdate = (cars) => {
  const xcar = cars.find(xcar => xcar.id === trackers.value.id)

  if (xcar) {
    if (!trackers.value.car) {
      trackers.value.tracking = true
      trackers.value.cameraLock = true
    }
    trackers.value.car = xcar
  } else {
    trackers.value.car = null
    trackers.value.tracking = false
    trackers.value.cameraLock = false
  }
}

// 追踪切换
const goTrack = (e) => {
  trackers.value.id = e.id
  trackers.value.tracking = true
  trackers.value.cameraLock = true
  
  setTrackId(e.id)
}

// 段面切换
const sectionChange = (x) => {
  trackers.value.sectionAct = x
}

// 引擎构建
const createTraffic = (configs) => {
  traffic.value = new TrafficEngine(sceneMode.value, configs)
  traffic.value.startTraffic()

  watchEffect(() => {
    if (sceneMode.value !== traffic.value.scene) {
      traffic.value.sceneChange(sceneMode.value)
    }
  })
}

defineExpose({
  createTraffic
})

</script>

<style lang="scss" scoped>
.traffic {
  position: relative;
  text-align: center;
  overflow: hidden;
  .scale-ctrls {
    position: absolute;
    right: 85px;
    top: 15px;
  }
}
</style>
