<template>

<div class="traffic">

  <FlowCarCtrl @car-filter="carFilter" :infos="inSummary" />

  <div class="hole-select">
    <div class="name">聚焦位置：</div>
    <el-select
      v-model="holeAct"
      popper-class="define-select"
      :teleported="false"
    >
      <el-option v-for="({ name, key }) in HOLE_TYPES" :key v-bind="{ label: name, value: key }" />
    </el-select>
  </div>

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


  <Road
    @go-section="goSection"
    @go-track="goTrack"
    @car-socket="e => carSocket(e, 1)"
    v-bind="{ ...configs, direction: 0, traffic: inTraffic, act: holeAct === 'new' }"
  />

  <Facilities :act="holeAct === 'new'" />

  <XDirection
    v-if="inTraffic"
    @go-section="goSection"
    @go-track="goTrack"
    @car-socket="e => carSocket(e, 0)"
    v-bind="{ ...configs, direction: 0, traffic: inTraffic, act: holeAct === 'old', section: false }"
  />

  <Facilities :act="holeAct === 'old'" />

  <XDirection
    v-if="outTraffic"
    @go-section="goSection"
    @go-track="goTrack"
    @car-socket="e => carSocket(e, 1)"
    v-bind="{...configs, isDownCtrls: true, direction: 1, traffic: outTraffic, act: holeAct === 'old', section: false}"
  />

  <Facilities :act="holeAct === 'new'" />

  <Road                                                                                                                   
    @go-section="goSection"
    @go-track="goTrack"
    @car-socket="e => carSocket(e, 1)"
    v-bind="{ ...configs, isDownCtrls: true, direction: 1, traffic: inTraffic, act: holeAct === 'new' }"
  />
  

  <FlowCarCtrl @car-filter="carFilter" :infos="outSummary" />

</div>

</template>

<script lang='ts' setup>

import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useTunnelStoreWithOut } from '@/store/modules/tunnel'
import { awaitGet } from '@/utils/tunnel'
import TrafficEngine from '@/views/traffic/roads/Engine/index'

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

import Road from '@/views/traffic/roads/XDirection/Road.vue'

const HOLE_TYPES = [
  { name: '新洞', key: 'new' },
  { name: '老洞', key: 'old' }
]

const tunnelStore = useTunnelStoreWithOut()

const eventRef = ref<any>(null) // 事件弹窗实例
const sceneMode = ref('panorama')
const router = useRouter()
const holeAct = ref('old')

const inTraffic = ref(null) // 上行隧道实例
const outTraffic = ref(null) // 下行隧道实例

const inSummary = ref({
  name: '杭州方向',
  direction: 0,
  dangerousCount: 0,
  truckCount: 0,
  passengerCount: 0,
  sedanCount: 0,
  otherCount: 0
})

const outSummary = ref({
  name: '宁波方向',
  direction: 1,
  dangerousCount: 0,
  truckCount: 0,
  passengerCount: 0,
  sedanCount: 0,
  otherCount: 0
})

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


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

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

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

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

  const summary = [inSummary, outSummary][direction]

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

// 缎面跳转
const goSection = ({ x, direction }) => {

  router.push({
    path: '/section',
    query: {
      x, direction,
      from: 'home'
    }
  })

}

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

// 创建车流实例
const createTraffic = async () => {

  const isAvl = await awaitGet(() => tunnelStore.getUpTunnel?.long)

  // 隧道数据获取错误
  if (!isAvl) return

  const create = (direction) => {
    const key = direction ? 'getDownTunnel' : 'getUpTunnel'
    const { start, end, long } = tunnelStore[key]

    return new TrafficEngine('panorama', {
      direction,
      start: +start,
      end: +end,
      miles: +long
    })
  }

  inTraffic.value = create(0)
  outTraffic.value = create(1)

  inTraffic.value.startTraffic(res => {
    carSocket(res, 0)
  })
  outTraffic.value.startTraffic(res => {
    carSocket(res, 1)
  })

}
 

watch(
  () => sceneMode.value,
  e => {
    if (e === 'section') {
      goSection({ x: 0, direction: 0 })
    }
  }
)


// 打开事件弹窗
provide('openEventPop', (event) => {
  return eventRef?.value.diaOpen(event)
})

onMounted(() => {

  createTraffic()

})

</script>

<style lang='scss' scoped>

.traffic {
  position: relative;
  text-align: center;
  overflow: hidden;
  .scale-ctrls {
    position: absolute;
    right: 85px;
    top: 15px;
  }
  .hole-select {
    position: absolute;
    color: white;
    display: flex;
    align-items: center;
    width: 200px;
    top: 15px;
    left: 85px;
    .name {
      font-size: 14px;
      white-space: nowrap;
    }
  }

  :deep(.define-select) {
    background: rgba(38, 67, 106);
    border: none;
    color: white;
    .el-popper__arrow::before {
      background: rgba(38, 67, 106);
      border: none;
    }
    
  }

  :deep(.el-select-dropdown__item) {
    color: white;
    &.is-hovering {
      background-color: rgb(54, 89, 128);
    }
  }
  
}

</style>


