<template>
  <div class="alarm-today" :id="id" />
</template>

<script setup>
  import { fitChartSize } from '@/utils/dataUtil'
  import { useEchart } from '@/hooks/echart'

  const { id, setOption } = useEchart()

  let props = defineProps({
    list: {
      type: Array,
      default: () => []
    }
  })

  watch(
    () => props.list,
    (val) => {
      if (val.length > 0) {
        setTimeout(() => {
          init()
        }, 1000)
      }
    },
    { immediate: true }
  )

  let params = null

  const getSeriesData = () => {
    return props.list.map((item) => {
      return {
        ...item,
        itemStyle: {
          color: '#0D53FF'
        }
      }
    })
  }
  const getXAxisData = () => {
    return props.list.map((item) => item.name)
  }
  const init = () => {
    if (!params) {
      params = {
        grid: {
          left: '4%',
          right: '4%',
          top: '10%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          boundaryGap: true,
          type: 'category',
          data: getXAxisData(),
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(5, 72, 134, 1)'
            }
          },
          axisLabel: {
            fontSize: fitChartSize(12),
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: fitChartSize(12),
            color: 'rgba(255,255,255,0.9)'
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            type: 'bar',
            data: getSeriesData(),
            barWidth: fitChartSize(20),
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
                fontSize: fitChartSize(10)
              }
            }
          }
        ]
      }
    } else {
      params.xAxis.data = getXAxisData()
      params.series[0].data = getSeriesData()
    }
    setOption(params)
  }
</script>

<style scoped lang="scss">
  .alarm-today {
    width: vw(400);
    height: vh(200);
  }
</style>
