<template>

<div class="events">

  <div
    v-for="point in [currentEvents, nowEvent].flat()"
    class="event-x"
    :style="getStyle(point)"
    :key="point.id"
    @click="onClicked(point)"
  >

    <div v-if="EVENT_TYPE[point.eventType]" class="chip">
      <div class="text">{{ EVENT_TYPE[point.eventType] || '' }}</div>
      <div :class="['type-icon', `type-${point.eventType}`]"></div>
    </div>

    <div v-else class="chip">
      <div class="text">其他事件</div>
      <div class="type-icon type-0"></div>
    </div>

    <img :src="EVENT_IMAGE" />

  </div>

</div>

</template>

<script lang='ts' setup>

import { EVENT_TYPE } from '@/config/enum'
import EVENT_IMAGE from '@/assets/images/event/event.png'
import TrafficSocket from '@/views/traffic/utils/socket'
import { useRoute } from 'vue-router'

const props = defineProps<{
  scene: string,
  _traffic: any,
  tunnel: any,
  direction: number,
  evtConfigs: any
}>()
 
const events = defineModel<any[]>('events') // 实时事件
const selected = defineModel<any>('selected') // 选中事件
const socketEvent = ref<any>(null) // 事件流

const route = useRoute()

// 多车事件
const currentEvents = computed(() => {
  

  if (!events.value || !props.tunnel || !props._traffic) {
    return []
  }

  const codes = [5, 6, 7]

  const evts = events.value
    .filter(item => codes.includes(item.eventType))
    .map(item => {
      const distance = props.direction ? +item.milestone - props.tunnel.start : props.tunnel.end - (+item.milestone)
      return {
        ...item,
        distance
      }
    })
  
  return props._traffic.eventFormate(evts)

})

// 当前事件
const nowEvent = computed(() => {

  return []

  // if (route.name !== 'Detail' || !props.evtConfigs.status || !props.tunnel) {
  //   return []
  // }

  // const temp = { ...props.evtConfigs.infos };
  // delete temp.hisVehicleInfo

  // const distance = props.direction ? +temp.milestone - props.tunnel.start : props.tunnel.end - +temp.milestone

  // const evts = props._traffic.eventFormate([{
  //   ...temp,
  //   distance
  // }])
  
  // return evts

})

// 开启实时事件
const evtFlowStart = async () => {

  if (socketEvent.value) {
    socketEvent.value.close()
    socketEvent.value = null
  }

  socketEvent.value = new TrafficSocket(
    props.direction ? 'OUT_EVENT' : 'IN_EVENT'
  )

  socketEvent.value.start(res => {
    events.value = props._traffic.eventFormate(res)
  })

}

// 关闭事实事件
const evtFlowClose = () => {
  if (socketEvent.value) {
    socketEvent.value.close()
    socketEvent.value = null
  }
  events.value = []
}

// 距离计算
const getStyle = (point) => {
  return {
    top: point.y + 'px',
    left: point.x + 'px',
    transform: point.transform
  }
}

// 事件点击
const onClicked = (event) => {

  // 回溯模式下不支持点击
  if (props?.evtConfigs?.status) {
    return
  }

  selected.value = event.id
}

// 事件详情控制
watch(
  () => [props._traffic, props.evtConfigs],
  (e) => {

    if (!props._traffic) return

    if (route.name !== 'Detail') {
      evtFlowStart()
      return
    }

    e.status ? evtFlowClose() : evtFlowStart()

  },
  {
    immediate: true
  }
)


onMounted(() => {

  // evtFlowStart()

})


</script>

<style lang='scss' scoped>

$base-event: '@/assets/images/event/';

.event-x {
  width: 90px;
  height: 90px;
  position: absolute;
  z-index: 3;
  cursor: pointer;
  transform: translate(-50%, -50%);

  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .chip {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation-name: wave;
    animation-duration: 1.85s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;

    .text {
      font-size: 12px;
      background: #772727;
      border: 1px solid rgba(238, 89, 97, 0.8);
      padding: 2px 4px;
      border-radius: 2px;
      white-space: nowrap;
      color: white;
      margin-bottom: 4px;
    }

    .type-icon {
      width: 24px;
      height: 24px;
    }

    .type-0,
    .type-1,
    .type-2,
    .type-3,
    .type-4,
    .type-8 {
      background: url($base-event + 'event_01.png') no-repeat;
      background-size: cover;
    }
  }
  
}

@keyframes wave {
  0% {
    transform: translate(-50%, 0px);
  }
  25% {
    transform: translate(-50%, 5px);
  }
  50% {
    transform: translate(-50%, 0px);
  }
  75% {
    transform: translate(-50%, 5px);
  }
  100% {
    transform: translate(-50%, 0px);
  }
}

</style>