<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 { ElMessage } from 'element-plus' 
import { useTunnelStoreWithOut } from '@/store/modules/tunnel'

const tunnelStore = useTunnelStoreWithOut()

const realRange = ref('') // 段面桩号暂存
const sceneMode = ref('section') // 模式

const trackers = defineModel()
const traffic = ref(null)
const frashKey = ref(true)
const direction = ref(0)

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

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

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

  const xcar = cars.find(xcar => {
    return 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 sectionChange = (x) => {
  trackers.value.sectionAct = x
}

// 进入段面
const goSection = (e) => {
  if (trackers.value.tracking) {
    ElMessage.warning('轨迹追踪过程中不支持此操作！')
  } else {
    trackers.value.sectionAct = e.x
    sceneMode.value = 'section'
  }
}

// 轨迹重播
const rePlay = () => {
  traffic.value.startMook()
}

const getConfigs = (direct) => {

  let wait = null
  let stop = null

  return new Promise(resolve => {

    wait = setTimeout(() => {
      stop && stop()
      resolve(false)
    }, 5000)

    stop = watchEffect(() => {
      if (tunnelStore.init) {
        const { start, end, long } = [tunnelStore.getUpTunnel, tunnelStore.getDownTunnel][direct]
        stop && stop()
        resolve({
          direction: direct,
          start,
          end,
          miles: long
        })
      }
    })

  })

}

// 构建引擎
const createTraffic = async (direct, call) => {

  if (traffic.value) {
    traffic.value.cleanRoad()
    traffic.value = null
  }

  direction.value = direct

  const configs = await getConfigs(direct)

  if (configs) {
    traffic.value = new TrafficEngine(sceneMode.value, configs)
    call(traffic.value)
  }

}

defineExpose({
  createTraffic
})


watch(
  () => sceneMode.value,
  e => {
    traffic.value.sceneChange(e)
    traffic.value.startMook()
  }
)

// onMounted(() => {

  // bus.on('track-change', async () => {
  //   frashKey.value = false
  //   await nextTick()
  //   frashKey.value = true
  // })

// })

</script>

<template>

<div class="traffic">

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

  <XDirection
    v-if="sceneMode === 'panorama'"
    v-model:sectionAct="trackers.sectionAct"
    v-bind="{ ...configs, direction, trackers, traffic }"
    @go-section="goSection"
    @cars-update="onCarsUpdate"
  />

  <XDirectionSection
    ref="directionSectionRef"
    v-else
    v-model:sectionAct="trackers.sectionAct"
    v-bind="{ ...configs, direction, trackers, traffic }"
    @section-change="sectionChange"
    @cars-update="onCarsUpdate"
  />

</div>

</template>

<style lang='scss' scoped>

.traffic {
  position: relative;
  text-align: center;
  padding-bottom: 30px;
  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>