<script lang="ts" setup>
import CarView from './components/CarView/index.vue'
import CarList from './components/CarList/index.vue'
import Traffic from './components/Traffic/index.vue'
import Header from './components/Header/index.vue'
import { getHisFlows, getFlowCars } from '@/api/history'
import { ElMessage } from 'element-plus'
import { setTrack } from '@/flash/History'

import { useRoute } from 'vue-router'

const route = useRoute()
const trafficRef = ref(null)
const selected = ref(null)

const trackers = reactive<{
  recordId: string | null
  plate: string
  id: string | null
  car: any
  tracking: boolean
  sectionAct: number
  loading: boolean
}>({
  recordId: null,
  plate: '',
  id: null,
  car: null,
  tracking: false,
  sectionAct: 0,
  loading: true
})
function splitTime(startTime, endTime, num) {
  const start = new Date(startTime)
  const end = new Date(endTime)
  const result = []
  while (start < end) {
    const startTimeStr = start.toISOString().replace('T', ' ').substring(0, 19)
    const nextTime = new Date(start.getTime() + num * 1000)
    if (nextTime > end) {
      nextTime.setTime(end.getTime())
    }
    const endTimeStr = nextTime.toISOString().replace('T', ' ').substring(0, 19)
    result.push({
      startTime: startTimeStr,
      endTime: endTimeStr
    })
    start.setTime(nextTime.getTime())
  }
  return result
}
const fetchList = async (list, row) => {
  const res = list.map((item) =>
    getFlowCars({
      tunnelId: row.tunnelId,
      startTime: item.startTime,
      endTime: item.endTime
    })
  )
  const result = await Promise.all(res)
  console.log(result, 'kkkkkkk')
  const data = result.flatMap((a) => a.map((item) => item.frame))
  console.log(data, '999999999999')
  return data
}

const setTraffic = (row) => {
  trackers.loading = true
  trackers.recordId = row.guid
  trackers.id = row.carId
  trackers.tracking = true
  selected.value = row

  const direct = row.tunnelId === 'xl_tunnel_up' ? 0 : 1

  trafficRef.value.createTraffic(direct, async (traffic) => {
    console.log(row.inTunnelTime, row.outTunnelTime, '------')

    //拆分开始和结束为数组
    // console.log(splitTime(row.inTunnelTime, row.outTunnelTime, 10), 'aaa')
    let listDate = splitTime(row.inTunnelTime, row.outTunnelTime, 10)
    let frames = []
    fetchList(listDate, row).then((result) => {
      console.log(result, 'llllll')
      frames = result
         traffic.startMook(frames)
    trackers.loading = false
    })

    // const res = await getFlowCars({
    //   tunnelId: row.tunnelId,
    //   startTime: row.inTunnelTime,
    //   endTime: row.outTunnelTime
    // })

    // const frames = res.map((item) => item.frame)
    // console.log(frames, '00000')



// ---------------
    // const useFrames = frames.filter(cars => {
    //   return cars.some(item => item.carPlate === '浙AAY7096') && cars.some(item => item.carPlate === '浙AAV5373')
    // })

    // console.log()

    // const fmts = useFrames.map(arr => {
    //   const iarr = arr.map(item => {
    //     return {
    //       distance: item.originDistance,
    //       speed: item.speed,
    //       lanex: item.roadNo,
    //       id: item.carPlate,
    //       isFocus: item.carPlate === '浙AAY7096'
    //     }
    //   }).filter(item => ['浙AAY7096', '浙AAV5373'].includes(item.id))

    //   iarr.sort((a, b) => a.distance - b.distance)

    //   return iarr
    // })

    // fmts.sort((a, b) => a.distance - b.distance)

    // console.log(fmts.filter(arr => arr[1].id === '浙AAY7096'))

    // console.log(fmts)

 
  })
}

/* const trackInit = async () => {

  const res = await getHisFlows({
    direction: ['上行', '下行'],
    passProfileId: trackers.recordId,
    pageNo: 1,
    pageSize: 10
  })



  const tagCar = res1.list[0]


  trackers.id = tagCar.carId
  trackers.tracking = true

  const direct = tagCar.tunnelId === 'xl_tunnel_up' ? 0 : 1
  trafficRef.value.createTraffic(direct, async traffic => {

    const res2 = await getFlowCars({
      tunnelId: tagCar.tunnelId,
      startTime: tagCar.inTunnelTime,
      endTime: tagCar.outTunnelTime
    })

    const frames = res2.map(item => item.frame)
    traffic.startMook(frames)

  })

} */

onMounted(async () => {
  const querys = route.query

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

  const res = await getHisFlows({
    direction: ['上行', '下行'],
    passProfileId: trackers.recordId,
    pageNo: 1,
    pageSize: 10
  })

  setTraffic(res.list[0])

  // const res = getHisFlows({
  //   direction: ['上行', '下行'],
  //   passProfileId: querys.id,
  //   pageNo: 1,
  //   pageSize: 10
  // })

  // getHisFlows({
  //   direction: ['上行', '下行'],
  //   passProfileId: querys.id,
  //   pageNo: 1,
  //   pageSize: 10
  // }).then(res => {
  //   const row = res.list[0]
  //   setTrack(row)
  //   trackers.id = row.carId
  //   trackers.tracking = true
  //   trackers.sectionAct = 0
  // })
})
</script>

<template>
  <Header />

  <div class="x-block">
    <CarView :trackers :selected />
    <CarList v-model="trackers" @track-change="setTraffic" />
  </div>

  <Traffic ref="trafficRef" v-model="trackers" />
</template>

<style lang="scss" scoped>
.x-block {
  display: flex;
  margin: 45px;
}
</style>
