<template>

<div :style="chartStyle" class="flow-chart">

  <div ref="chartBox" class="chart-box"></div>

</div>

</template>

<script lang='ts' setup>

import echarts from '@/config/plugins/echarts'
import { TraficFlowBar } from '../../static'
import { useAppStoreWithOut } from '@/store/modules/app'
import { getAvargeFlow } from '@/api/home'

import dayjs from 'dayjs'

import { ref, onMounted } from 'vue'

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

const chartBox = ref(null)
const chartEl = ref<any>(null)
const chartStyle = ref<any>(null)
const appStore = useAppStoreWithOut()

const chartRender = async (options = TraficFlowBar()) => {

  const res = await getAvargeFlow({tunnelId: props.direction ? 'xl_tunnel_down' : 'xl_tunnel_up'})

  options.xAxis.data = res.map(item => dayjs(item.createTime).format('HH:mm'))
  options.series[0].data = res.map(item => item.carCount)
  options.series[1].data = res.map(item => item.maxAverageSpeed)

  chartEl.value.setOption(options)

  chartStyle.value = {
    zoom: 1 / appStore.getZoom,
    transform: `scale(${appStore.getZoom})`,
    transformOrigin: 'left top'
  }

}


onMounted(() => {

  chartEl.value = echarts.init(chartBox.value)
  chartRender()

})


</script>

<style lang='scss' scoped>

.chart-box {
  height: 200px;
  margin: 0 40px;
  transform-origin: 0;
}

</style>