<template>

<div class="event-detail">

  <!-- 页面导航 -->
  <Header />

  <EventBar v-bind="{
    id: params.id,
    info: params.info,
    handled: params.handled,
  }" />

  <!-- 视频组 -->
  <VideosGroups v-bind="{
    carImages: params.carImages,
    evtImages: params.evtImages,
    milestone: params.milestone,
    videopath: params.videopath
  }"/>

  <!-- 车流 -->
  <Traffic ref="traffic" @camera-change="cameraChange" v-model="trackers" />
  

</div>

<HandlePop @update="handleComplete" ref="evtPop" />

</template>

<script lang='ts' setup>

import Header from './components/Header/index.vue'
import EventBar from './components/EventBar/index.vue'
import VideosGroups from './components/VideosGroups/index.vue'
import Traffic from './components/Traffic/index.vue'
import HandlePop from '@/views/components/HandlePop/index.vue'

import { ref, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTrafficStoreOut } from '@/store/modules/traffic'
import { ASYNC_DIRECTIONS } from '@/config/dict'
import { useTunnelStore } from '@/store/modules/tunnel'

import { getEventDetail, eventRemain } from '@/api/event'
import { historyed, isMocking, ensign, direct, flows, flashClean, startFlows } from '@/flash/Detail'

const evtPop = ref<any>(null) // 事件处理弹窗实例

const route = useRoute()
const router = useRouter()
const trafficStore = useTrafficStoreOut()
const tunnelStore = useTunnelStore()

const traffic = ref(null) // 实例
const trackers = ref({
  id: null,
  car: null,
  tracking: false,
  sectionAct: 0
})

const effects = [] // 监听收集器

// 格式化参数
const params = reactive({
  id: '',
  info: '',
  handled: false,
  carImages: [],
  evtImages: [],
  milestone: 0,
  videopath: null
})

// 事件处理
const goHandle = () => {
  evtPop.value.diaOpen(eventData.value)
}

// 事件完成处理
const handleComplete = () => {
  const { from } = route.query
  router.replace({
    path: from as any
  })
}

// 手控摄像头
const cameraChange = (e) => {
  videosRef.value.cameraSet(e)
}

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

  })

}

onMounted(async () => {

  if (!route.query.id) {
    return ElMessage.error('链接错误！')
  }

  const id = route.query.id

  // 事件详情
  const res1 = await getEventDetail({ id })
  params.id = id
  params.info = res1.eventSituation
  params.handled = res1.eventStatus !== 0
  params.milestone = +res1.milestone

  if (res1.carInfoList.length === 1) {
    trackers.value.id = res1.carInfoList[0].carId
  }

  direct.value = ASYNC_DIRECTIONS().find(item => item.seKey === res1.tunnelId).inkey

  // 创建
  const configs = await getConfigs(direct.value)

  if (!configs) return

  traffic.value.createTraffic({
    milestone: res1.milestone,
    ...configs
  })

  // 历史数据
  const res2 = await eventRemain({ eventId: id })
  historyed.value = res2.existHisData
  isMocking.value = res2.existHisData
  params.carImages = (res2.bayonetImage || []).map(item => {
    return {
      name: item.carPlate,
      imgs: item.imagePath
    }
  })
  params.evtImages = res2.eventImagesPath || []
  params.videopath = res2.videoPath
  flows.value = (res2.hisVehicleInfo || []).map(item => item.frame)
  startFlows()

})

onBeforeUnmount(() => {

  flashClean()

})


</script>

<style lang='scss' scoped>

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

.event-detail {
  padding-bottom: 60px;
  .traffic-header {
    height: 42px;
    color: white;
    margin: 0 71px;
    text-align: center;
    position: relative;
    .title {
      font-size: 24px;
      font-weight: 600;
      display: inline-block;
      padding: 0 16px 6px 34px;
      background-image: url($base-url + 'arrow_lft.png');
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: 0 bottom;
    }
    .icons {
      position: absolute;
      right: 20px;
      top: 15px;
    }
  }

}

</style>

<style lang="scss">

.el-popover {
  &.car-select {
    background: rgba(53, 102, 156, 0.7);
    border: none;
    margin-left: -12px;
    border-radius: 0;
  }
}

</style>