<template>

<div class="traffic">

  <Scales
    @plate-change="plateChange"
    v-model:sceneMode="sceneMode"
    v-model:useMaterial="commons.useMaterial"
    class="scale-ctrls"
  />
  
  <FlowCarCtrl
    @car-filter="carFilter"
    @direction-change="handleDirectionChange"
    :infos="{ ...summary, direction: commons.direction }"
  />

  <XDirectionSection
    v-bind="{...commons, traffic}"
    v-model:sectionAct="commons.sectionAct"
    @car-socket="carSocket"
    @section-change="sectionChange"
    @go-track="goTrack"
    @camera-change="e => emits('camera-change', e)"
  />

</div>

</template>

<script lang='ts' setup>

import { ref, reactive, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import FlowCarCtrl from '../FlowCarCtrls/index.vue'
import XDirectionSection from '@/views/traffic/roads/XDirectionSection/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 { isSomeNone } from '@/utils/is'
import { useTunnelStoreWithOut } from '@/store/modules/tunnel'

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

const sceneMode = ref('section') // 模式

const route = useRoute()
const router = useRouter()
const tunnelStore = useTunnelStoreWithOut()

// 页面公共参数
const commons = defineModel<any>()
const freshKey = ref(true)
const traffic = ref(null)

const summary = ref<any>({
  dangerousCount: 0,
  truckCount: 0,
  passengerCount: 0,
  sedanCount: 0,
  otherCount: 0,
  total: 0
})

watch(
  () => sceneMode.value,
  (e) => {
    if (e === 'panorama')
    router.push({
      path: 'home'
    })
  }
)

// 汇总同步
const carSocket = (e) => {

const { dangerousCount, truckCount, passengerCount, sedanCount, otherCount } = e

summary.value = {
  ...summary.value,
  ...{
    dangerousCount, truckCount, passengerCount,  sedanCount, otherCount,
    total: dangerousCount + dangerousCount + passengerCount + sedanCount + otherCount
  }
}

}



// 车流筛选
const carFilter = ({ e }) => {
  commons.value.filterType = e?.type || null
}

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

// 方向切换
const handleDirectionChange = async () => {

  commons.value.direction = 1 - commons.value.direction

  summary.value.dangerousCount = 0
  summary.value.truckCount = 0
  summary.value.passengerCount = 0
  summary.value.sedanCount = 0
  summary.value.otherCount = 0
  summary.value.total = 0

  traffic.value.cleanRoad()

  const configs = await getConfigs(commons.value.direction)

  if (configs) {
    traffic.value = new TrafficEngine(sceneMode.value, configs)
    traffic.value.startTraffic(res => {
      carSocket(res)
    })
  }
  
}

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

// 车辆追踪
const goTrack = ({ id, direction }) => {
  router.push({
    path: 'track',
    query: {
      id, direction,
      from: 'event'
    }
  })
}

// 获取隧道数据
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
        })
      }
    })

  })

}

onBeforeMount(async () => {

  const { x, direction } = route.query

  if (isSomeNone([x, direction])) {
    return ElMessage.error('地址错误！')
  }

  commons.value.direction = +(direction as string)

  const configs = await getConfigs(+direction)

  if (configs) {
    traffic.value = new TrafficEngine(sceneMode.value, configs)
    traffic.value.startTraffic(res => {
      carSocket(res)
    })
  }

})


</script>

<style lang='scss' scoped>

.traffic {
  position: relative;
  text-align: center;
  overflow: hidden;
  .scale-ctrls {
    position: absolute;
    right: 85px;
    top: 15px;
  }
}

</style>