<script lang='ts' setup>

import { getFlowSections } from '@/api/home'
import { useTunnelStoreWithOut } from '@/store/modules/tunnel'
import { useRoute } from 'vue-router'

import { FLOW_COLOR } from '@/config/enum'
import { getState } from '@/flash/Home'

const props = defineProps<{
  direction: number
}>()

const route = useRoute()
const tunnelStore = useTunnelStoreWithOut()
const heatRes = ref<any>(null)

const block = route.name

const state = computed(() => {
  if (['Home', 'Section'].includes(route.name)) {
    return getState()
  } else {
    return false
  }
})

// 数据处理
const heatArrs = computed(() => {

  const nowTunnel = [tunnelStore.getUpTunnel, tunnelStore.getDownTunnel][props.direction]

  if (heatRes.value && nowTunnel.long) {

    const arrs = [{ point: 0, level: 1 }, { point: nowTunnel.long, level: 1 }]

    heatRes.value.forEach(item => {
      arrs.push({
        point: item.startMilestone,
        level: item.level
      })
      arrs.push({
        point: item.endMilestone,
        level: 1
      })
    })

    const mcPoint = arrs[0]


    const list = arrs.map((item, x) => {
      if (item.point === mcPoint.point) {
        return null
      } else {
        return {
          grow: (item.point - mcPoint.point) / nowTunnel.long,
          type: mcPoint.level,
          color: FLOW_COLOR[mcPoint.level - 1]
        }
      }
    }).filter(item => item)

    return list

  }

  return []

})

const roadStyle = computed(() => {

  if (!state.value) return null

  const mix = 0.1

  const roadStyle = heatArrs.value.map((item, x) => {

    const start = heatArrs.value.slice(0, x).reduce((prev, next) => prev + next.grow, 0)
    const point1 = start + item.grow * mix
    const point2 = start + item.grow * (1 - mix)
    const end = start + item.grow

    let str = `${item.color} ${point1 * 100}%, ${item.color} ${point2 * 100}%`

    // if (x === 0) {
    //   str = `rgba(0, 0, 0, 0) ${start * 100}%, ` + str
    // }

    // if (end === 1) {
    //   str = str + `, rgba(0, 0, 0, 0) ${end * 100}%`
    // }

    return str

  }).join(', ')

  return {
    background: `linear-gradient(90deg, ${roadStyle})`
  }

})

const getHeatRes = () => {
  getFlowSections({
    tunnelId: ['xl_tunnel_up', 'xl_tunnel_down'][props.direction]
  }).then(res => {
    heatRes.value = res
  })
}

watch (
  () => props.direction,
  () => {
    getHeatRes()
  },
  {
    immediate: true
  }
)

</script>

<template>

<div v-show="roadStyle" :style="roadStyle" class="heat-road"></div>

</template>

<style lang='scss' scoped>

.heat-road {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  &::before {
    position: absolute;
    content: '';
    width: 50px;
    height: 100%;
    left: -50px;
    top: 0;
    z-index: 2;
    background: linear-gradient(-90deg, rgba(72, 255, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  }
  &::after {
    position: absolute;
    content: '';
    width: 50px;
    height: 100%;
    right: -50px;
    top: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(72, 255, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  }
}

</style>