<template>

<div class="event-detail">

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

  <EventBar :eventData @event-handle="goHandle" />

  <!-- 视频组 -->
  <Videos ref="videosRef" :eventData />

  <!-- 车流 -->
  <Traffic ref="trafficRef" 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 Videos from './components/Videos/index.vue'
import Traffic from './components/Traffic/index.vue'
import HandlePop from '@/views/components/HandlePop/index.vue'
import { ElMessage } from 'element-plus'

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

import { ASYNC_DIRECTIONS } from '@/config/dict'

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

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

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


const eventData = ref(null)

const trackers = ref({
  id: null,
  car: null,
  tracking: false,
  sectionAct: 0
})
const trafficRef = ref(null)

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

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

  })

}

onBeforeMount(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

  trafficRef.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)

  eventData.value = {
    ...res1, ...res2
  }

  trafficStore.setWaves(eventData.value.carInfoList.map(item => item.carId))
  trafficStore.setOldEvents(eventData.value.carInfoList.map(item => {
    return {
      id: item.carId,
      type: eventData.value.eventType
    }
  }))

  startFlows()


  // traffic.value.startMook(flows.value)

  // Promise.all(
  //   [getEventDetail({ id }), eventRemain({ eventId: id })]
  // ).then(([res1, res2]) => {

  //   eventData.value = {
  //     ...res1,
  //     ...res2
  //   }

  //   setCommons(JSON.parse(JSON.stringify(eventData.value)))

  //   const { carInfoList } = unref(eventData)

  //   trafficStore.setWaves(carInfoList.map(item => item.carId))
  //   trafficStore.setOldEvents(carInfoList.map(item => {
  //     return {
  //       id: item.carId,
  //       type: eventData.value.eventType
  //     }
  //   }))
    

  // })

})

onBeforeUnmount(() => {

  flashClean()

})


</script>

<style lang='scss' scoped>

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

.event-detail {
  
  .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>