<template>
  <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
</template>

<script setup>
import { computed } from 'vue';

const prop = defineProps({
  data: {
    type: Object,
    default: () => {
      return [
        {
          "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
          "devName": "噪声监测7",
          "label": "noise-7",
          "place": null,
          "data": 0,
          "status": 0
        }]
    }
  }
});

const bodyMax = 150;



const options = computed(() => {


  let xData = []
  let seriesData = []
  prop.data.forEach((item) => {
    xData.push(item.devName);
    seriesData.push(item.data);
  });
  const labelSetting = {
    show: true,
    position: 'top',
    offset: [0, -20],
    formatter: function (param) {
      return xData[param.dataIndex] + '\r\n' + seriesData[param.dataIndex] + 'dB';
    },
    fontSize: 14,
    fontFamily: 'Arial',
    color: '#33FFFF'
  };
  return {
    tooltip: {
    },
    backgroundColor: 'transparent',
    xAxis: {
      data: xData,
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: { show: false }
    },
    yAxis: {
      show: false,
      max: bodyMax,
      offset: 20,
      splitLine: { show: false },
    },
    grid: {
      top: 'center',
      height: 230,
      left: 0,
      right: 0
    },
    markLine: {
      z: -100
    },
    series: [
      {
        name: 'typeA',
        type: 'pictorialBar',
        symbolClip: true,
        symbolBoundingData: bodyMax,
        symbolRepeat: true, //图形是否重复
        symbolSize: [25, 6], //图形元素的尺寸
        itemStyle: {
          color: '#33FFFF'
        },
        data: seriesData.map((item) => {
          return {
            value: item
          };
        }),
        z: 10
      },
      {
        name: 'full',
        type: 'pictorialBar',
        symbolBoundingData: bodyMax,
        label: labelSetting,
        animationDuration: 0,
        symbolRepeat: true, //图形是否重复
        symbolSize: [25, 6], //图形元素的尺寸
        itemStyle: {
          color: '#ccc'
        },
        data: prop.data.map(item => {
          return {
            value: 100,
          }
        })
      }
    ]
  }
})
</script>

<style lang="scss" scoped></style>
