<template>
 
  <div class="traffic">

    <FlowCarCtrl />

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

    <XDirection
      v-if="scene === 'panorama'"
      v-model:sectionAct="sectionAct"
      @go-track="goTrack"
      v-bind="{
        ...configs, direction: direct, traffic, trackers
      }"
      @go-section="goSection"
      @cars-update="carsUpdate"
      @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)"
      @cars-update="carsUpdate"
    />
  </div>

  <CarCollect :cars="configs.cars" ref="collectRef" />
</template>

<script lang="ts" setup>

import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useTunnelStore } from '@/store/modules/tunnel'

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 CarCollect from '@/views/traffic/components/CarCollect/index.vue'
import CreateCar from '@/views/traffic/utils/eventCar'
import TrafficEngine from '@/views/traffic/roads/Engine'

import { isMocking, direct, milestone, scene, flows, startFlows, traffic } from '@/flash/Detail'
import { numToSection } from '@/utils/tunnel'

const emits = defineEmits(['camera-change'])
const router = useRouter()
 
const sectionAct = ref(0) // 激活段面
const collectRef = ref<any>(null) // 收藏弹窗实例
const directionSectionRef = ref<any>(null) // 段面实例

const trackers = defineModel<any>()

const createTraffic = (configs) => {
  
  traffic.value = new TrafficEngine(scene.value, configs)
  sectionAct.value = numToSection(configs.milestone, configs.direction)
  
}

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

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

// 缎面切换
const trafficChange = ({ to }) => {
  scene.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 () => {
  isMocking.value = true
  startFlows()
}

// 车流变化
const carsUpdate = (cars) => {

  const xcar = cars.find(xcar => xcar.id === trackers.value.id)
  
  if (xcar) {
    if (!trackers.value.car) {
      trackers.value.tracking = true
    }
    trackers.value.car = xcar
  } else {
    trackers.value.car = null
    trackers.value.tracking = false
  }

}

// 车辆追踪
const goTrack = ({ id, direction }) => {

  if (isMocking.value) {
    return ElMessage.warning('该状态下不支持车辆追踪！')
  }

  router.push({
    path: 'track',
    query: {
      id, direction,
      from: 'event'
    }
  })
}


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>
