<script lang='ts' setup>

import echarts from '@/config/plugins/echarts'
import { CAR_SPEED_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.statisticsHour + '').slice(-2)) + '时')

  options.xAxis.data = (new Array(24)).fill(null).map((_, x) => x + '时')
  options.legend.data = CAR_SPEED_TYPES.map(item => item.name)
  options.yAxis.name = 'km/h'

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

    return {
      name: item.name,
      data: props.dats.map(xtype => xtype[item.key]),
      type: 'line',
      symbol: 'diamond',
      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-speed-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-speed-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>