<script lang='ts' setup>

import echarts from '@/config/plugins/echarts'
import { CAR_TYPES, BarOptions } from '../../../charts'

const chart = ref<any>(null)
const chartEl = ref<any>(null)

const props = defineProps<{
  dats: any
}>()

const setChart = () => {

  if (!chartEl.value) {
    chartEl.value = echarts.init(chart.value)
  }

  const options = BarOptions()
  options.xAxis.data = props.dats.map(item => item.staticsHour + '时')
  options.legend.data = CAR_TYPES.map(item => item.name)

  options.series = CAR_TYPES.map(item => {

    const tempArrs = props.dats.map(xdat => {

      const x = xdat.dataMap.findIndex(xtype => {
        if (xtype.catType === '未知') {
          return item.name === '其他'
        } else {
          return xtype.catType === item.name
        }

        
      })
      return xdat.dataMap[x].count

    })


    return {
      name: item.name,
      stack: 'car',
      data: tempArrs,
      type: 'bar',
      itemStyle: {
        color: item.color
      },
      lineStyle: {
        color: item.color
      }
    }

  }).reverse()

  chartEl.value.setOption(options)
}

watch(
  () => props.dats,
  e => {
    if (e) {
      nextTick(() => {
        setChart()
      })
    }
  }
)

</script>

<template>

  <div class="day-flow-trend">

    <div class="header">
      <div class="icon"></div>
      <div class="text">24小时流量趋势</div>
    </div>

    <div class="chart-content">
      <ChartBox>
        <div ref="chart" class="chart"></div>
      </ChartBox>
    </div>

    
  </div>

</template>

<style lang='scss' scoped>

$path-event: '@/assets/images/event/';

.day-flow-trend {
  overflow: hidden;
  .header {
    margin: 12px 12px 0;
    display: flex;
    align-items: center;
    .icon {
      width: 30px;
      height: 30px;
      background: url($path-event + 'title.png') no-repeat;
      background-size: cover;
    }
    .text {
      height: 28px;
      line-height: 28px;
      width: 150px;
      border-radius: 110px;
      color: white;
      font-weight: 600;
      font-size: 16px;
      padding-left: 12px;
      margin-left: 2px;
      background: linear-gradient(90deg, rgba(87, 115, 162, 0.81) 0%, rgba(87, 115, 162, 0) 99%);
    }
  }
  
  .chart-content {
    height: 215px;
    .chart {
      height: 215px;
    }
  }
}

</style>