<template>

  <div :class="[
    'x-direction',
    isDownCtrls ? 'down' : 'up',
    +direction ? 'out' : 'in',
    act ? 'act' : 'disabled'
  ]">

    <template v-if="!isDownCtrls && section">

      <!-- 段面控制器 -->

      <div class="section-box">

        <Section
          v-bind="{ data:_sections, scene: 'section', direction, trackers }"
          v-model="sectionAct"
          @go-section="goSection"
        />
        <TrackPoint v-bind="{ trackers, direction }" />
      </div>

      <!-- 刻度线 -->
      <Scale class="scale-line" v-bind="{ data: _sections, isDownCtrls, direction, tunnel }" />
     
    </template>

    <div class="main-road" :style="roadStyle">

      <!-- 停车带层 -->
      <Parking v-bind="{ scene: 'panorama', direction, tunnel,  _traffic }" />

      <!-- 路面层 -->
      <div class="level-road">

        <div class="entry"></div>
        <div class="export"></div>

        <div class="inner">

          <!-- 热力图层 -->
          <HeatRoad class="dis-tag" :direction />

          <!-- 虚实线 -->
          <Line class="line-1" v-bind="{ direction, tunnel,  _traffic }" />

          <Line class="line-2" v-bind="{ direction, tunnel,  _traffic }" />

          <!-- 路标 -->
          <Arrow v-bind="{ direction, tunnel,  _traffic }" />

        </div>

      </div>
    </div>

    <template v-if="isDownCtrls && section">

      <!-- 刻度线 -->
      <Scale v-bind="{ data:_sections, isDownCtrls, direction, tunnel }" />

      <!-- 段面控制器 -->
      <Section
        v-bind="{ data:_sections, isDownCtrls, scene: 'panorama', direction }"
        @go-section="goSection"
      />

    </template>

  </div>

  <CarCollect
    v-model="_carSelected"
    :cars="_cars"
    ref="collectRef"
    @go-track="e => emits('go-track', e)"
  />

  <EventPop
    :events="_events"
    v-model="_eventSelected"
    ref="eventRef"
  />

  

</template>

<script lang="ts" setup>

import Section from './comps/Section/index.vue'
import Scale from './comps/Scale/index.vue'
import Parking  from './comps/Parking/index.vue'
import Camera from './comps/Camera/index.vue'
import Line from './comps/Line/index.vue'
import Arrow from './comps/Arrow/index.vue'
import Cars from './comps/Cars/index.vue'
import Events from './comps/Events/index.vue'
import HeatRoad from './comps/HeatRoad/index.vue'
import TrackPoint from './comps/TrackPoint/index.vue'

import TrafficEngine from '@/views/traffic/roads/Engine/index'
import CarCollect from '@/views/traffic/components/CarCollect/index.vue'
import EventPop from '@/views/traffic/components/EventPop/index.vue'
import tunnelConfigs from '@/config/tunnel'

import { useTunnelStoreWithOut } from '@/store/modules/tunnel'

const emits = defineEmits(['go-section', 'cars-update', 'open-event', 'go-track', 'car-socket', 'camera-change'])

const tunnelStore = useTunnelStoreWithOut()
const collectRef = ref<any>(null) // 收藏弹窗实例
const eventRef = ref<any>(null) // 事件弹窗实例

const props = withDefaults(
  defineProps<{
    direction: number, // 道路方向
    plateType: number, // 铭牌类型
    useMaterial: boolean, // 是否使用动态车辆贴图
    evtConfigs: any, // 事件详情
    act: boolean, // 是否激活
    traffic?: any, // 车流引擎
    section?: boolean
    filterType?: null | string, // 筛选类型
    isDownCtrls?: boolean, // 是否下方展示控制器
    trackers?: any
    roadHeight?: number
  }>(),
  {
    filterType: null,
    isDownCtrls: false,
    act: true,
    trackers: {},
    roadHeight: 120
  }
)

const _traffic = ref<any>(null) // 车流引擎
const _sections = ref<any[]>([]) // 段面控制
const _cars = ref<any[]>([]) // 车流
const _carSelected= ref(null) // 选中车辆
const _events = ref<any[]>([]) // 事件列表
const _eventSelected= ref(null) // 选中车辆
// const sectionAct = ref(null) // 当前段面
const start = ref(true) // 是否初次追踪
const _lines = ref(3)
const roadStyle = computed(() => {
  return {
    height: `${props.roadHeight}px`
  }
})

const sectionAct = defineModel('sectionAct') // 选中段面

const tunnel = computed(() => {
  return [
    tunnelStore.getUpTunnel,
    tunnelStore.getDownTunnel
  ][props.direction]
})


// 车道初始化
const trafficInit = () => {

  if (_traffic.value) return
  if (props.traffic) {
    _traffic.value = props.traffic 
  } else {
    const { start, end, long } = tunnel.value
    _traffic.value = new TrafficEngine('panorama', {
      direction: props.direction,
      start: +start,
      end: +end,
      miles: +long
    })
  }

  _sections.value = _traffic.value.sectionsCompute()

}

watch(
  () => tunnel.value?.long,
  (e) => {
    if (e) {
      trafficInit()
    }
  },
  {
    immediate: true,
    deep: true
  }
)

// 车流切面
watch(
  () => _cars.value,
  (e) => {
    emits('cars-update', e)
  }
)

// 车辆追踪
watch(
  () => props.trackers.car,
  (xcar) => {
    if (xcar && props.trackers.tracking) {

      const distance = props.direction ? xcar.originalCar.carMilestone - tunnel.value.start : tunnel.value.end - xcar.originalCar.carMilestone

      // const left = distance % 300
      // const sections = (distance - left) / 300 + (left > 0 ? 1 : 0)

      const left = distance % tunnelConfigs.perSection
      const sections = (distance - left) / tunnelConfigs.perSection + (left > 0 ? 1 : 0)
      
      start.value = false
    }
  },
  {
    immediate: true,
    deep: true
  }
)

// 进入缎面模式
const goSection = (x) => {
  sectionAct.value = x
  emits('go-section', {
    x,
    direction: props.direction
  })
}



</script>

<style lang="scss" scoped>
@import url(@/views/traffic/css/car.scss);

$base-url: '@/assets/images/home/';
$base-event: '@/assets/images/event/';
$base-common: '@/assets/images/common/';

.x-direction {
  text-align: center;
  width: 100%;
  // overflow: hidden;
  .section-box {
    position: relative;
  }

  &.disabled {
    .main-road {
      opacity: 0.3;
      pointer-events: none;
      .dis-tag {
        display: none;
      }
    }
  }
}



.ctrls {
  display: inline-flex;
  align-items: center;
  height: 42px;
  margin: 0 auto;
  .title {
    color: white;
    width: 316px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: url($base-url + 'arrow_lft.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 bottom;
    padding-bottom: 4px;

    .text {
      font-size: 24px;
      font-weight: 600;
      margin-left: 32px;
    }
    .more {
      font-size: 16px;
      color: rgba(240, 245, 255, 0.95);
      display: flex;
    }
  }
}

.filters {
  display: flex;
  margin-left: 15px;
  .x-car {
    height: 32px;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: #ffffff;
    background: rgba(0, 125, 250, 0.15);
    margin-left: 8px;
    cursor: pointer;
    &.act {
      background: rgba(124, 213, 255, 0.15);
      box-sizing: border-box;
      border: 1px solid #7cd5ff;
    }
  }
}

.main-road {
  height: 120px;
  position: relative;
  .level-road {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: url($base-url + 'road.png');
    background-size: auto 100%;
    .entry {
      height: 100%;
      width: 90px;
      background: url($base-url + 'entry.png') no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      z-index: 1;
    }
    .export {
      height: 100%;
      width: 90px;
      background: url($base-url + 'export.png') no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      z-index: 1;
    }
    .inner {
      position: relative;
      height: 100%;
      margin: 0 90px;
    }
    .line {
      height: 2px;
      position: absolute;
      // top: 50%;
      width: 100%;
      margin-top: -1px;
      .x-line {
        height: 2px;
        position: absolute;
        &.dash {
          background: url($base-url + 'dash.png');
          background-size: 30px 2px;
        }
        &.solid {
          background: rgba($color: #ffffff, $alpha: 0.8);
        }
      }

      &.line-1 {
        top: 33.33%;
      }

      &.line-2 {
        top: 66.66%;
      }
    }
    .running-car {
      right: -60px;
      width: 36px;
      height: 12px;

      .tracker {
        width: 84px;
        height: 84px;
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: -1;
        background: url($base-event + 'tracker.png') no-repeat;
        background-size: cover;
        transform: translate(-50%, -50%);
      }

      .nameplate {
        font-size: 12px;
        top: -24px;
        padding: 2px 5px;
      }
    }
  }
}

.up {
  .scales {
    margin: 8px 90px 0;
  }
  .stone-num {
    top: 12px;
  }
  .main-road {
    // margin-top: 30px;
  }
  .scale-line {
    margin-bottom: 30px;
  }
}

.down {
  
  .stone-num {
    bottom: 12px;
  }
  .main-road {
    margin-top: 0;
  }
}

.x-direction {
  &.down {
    padding-top: 60px;
    margin-top: -60px;
  }
  &.in {
    .entry {
      right: 0;
      transform: rotateY(180deg);
    }
    .export {
      left: 0;
    }
    .running-car {
      right: -60px;
    }
    .main-road {
      right: 0;
    }
  }

  &.out {
    .entry {
      left: 0;
    }
    .export {
      right: 0;
      transform: rotateY(180deg);
    }
    .running-car {
      left: -60px;
      .core {
        transform: rotate(180deg);
      }
    }
    .main-road {
      left: 0;
    }
  }
}
</style>
