<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: traffic }" />

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

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

          <!-- 摄像机层 -->
          <Camera
            class="dis-tag"
            v-bind="{ scene: 'panorama', direction, isDownCtrls, tunnel, _traffic: traffic, isNeedLeftCamera }"
            @camera-change="(e) => emits('camera-change', e)"
          />

          <!-- 虚实线 -->
          <Line v-bind="{ direction, tunnel, _traffic: traffic }" />

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

          <!-- 车流层 -->
          <Cars
            class="dis-tag"
            v-model:cars="_cars"
            v-model:selected="_carSelected"
            v-bind="{
              scene: 'panorama',
              _traffic: traffic,
              _events,
              tunnel,
              filterType,
              direction,
              plateType,
              useMaterial,
              trackers,
              evtConfigs
            }"
            @car-socket="(e) => emits('car-socket', e)"
          />

          <!-- 事件层 -->
          <Events
            v-model:events="_events"
            v-model:selected="_eventSelected"
            v-bind="{
              scene: 'panorama',
              _traffic: traffic,
              direction,
              evtConfigs,
              tunnel
            }"
          />
        </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 // 路面高度
    isNeedLeftCamera?: boolean // 是否需要显示左边摄像头
  }>(),
  {
    section: true,
    filterType: null,
    isDownCtrls: false,
    act: true,
    trackers: {},
    roadHeight: 90,
    isNeedLeftCamera: false
  }
)

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]
})

watch(
  () => props.traffic,
  (e) => {
    console.log(e)
    if (e) {
      _sections.value = e.sectionsCompute()
      // console.log(_sections.value)
    }
  },
  {
    immediate: 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)

      sectionAct.value = sections - 1
      start.value = false
    }
  },
  {
    immediate: true,
    deep: true
  }
)

// 进入缎面模式
const goSection = (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: 90px;
  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);
        }
      }
    }
    .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>
