<template>
  <div class="traffic">

    <FlowCarCtrl />

    <Scales
      @plate-change="plateChange"
      v-model:sceneMode="sceneMode"
      v-model:useMaterial="configs.useMaterial"
      class="scale-ctrls"
    >
      <div v-if="mode === 'mook'" @click="rePlay" class="x-btn">
        <Icon icon="ep:refresh-right" :size="13" />
      </div>
    </Scales>

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

</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import TrafficEngine from '@/views/traffic/roads/Engine/index'
import { useRouter } from 'vue-router'

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 { ROAD_DIRECTION } from '@/config/enum'
import { numToSection } from '@/utils/tunnel'
import { isMocking, direct, milestone, scene, flows, startFlows, traffic } from '@/flash/HisDetail'


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

const collectRef = ref<any>(null) // 收藏弹窗实例
const directionSectionRef = ref<any>(null) // 段面实例
const sceneMode = ref('section')
const sectionAct = ref(0)

const trackers = defineModel<any>()

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


// 缎面切换
const trafficChange = async ({ to }) => {
  sceneMode.value = to
  traffic.value.sceneChange(to)
}

// 手动切换
const goSection = async ({ x }) => {
  trafficChange({ to: 'section' })
  await nextTick()
  directionSectionRef.value.sectionChange(x)
}

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

// 回放重播
const rePlay = async () => {
  if (useFuncs['flowRestart']) {
    useFuncs['flowRestart']()
  }
}

// 车辆追踪
const goTrack = () => {
  return ElMessage.warning('该状态下不支持车辆追踪！')
}

watch(
  () => sceneMode.value,
  (e) => {
    trafficChange({ to: e })
  }
)

const createTraffic = (configs) => {

  traffic.value = new TrafficEngine(sceneMode.value, configs)
  sectionAct.value = numToSection(configs.milestone, configs.direction)

}


defineExpose({
  createTraffic
})

</script>

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

  .x-btn {
    width: 24px;
    height: 24px;
    margin: 0 4px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: all;
    transition-duration: 0.2s;
    color: white;
    background: rgba(0, 125, 250, 0.1);

    &:hover {
      cursor: pointer;
      box-shadow: 0 0 10px #aeaeae;
    }
  }
}
</style>
