<script setup lang="ts">
import { ElMessage } from "element-plus";
const xData: Ref<any> = ref([])
const yData: Ref<any> = ref([])
const zoomIndex = computed(() => {
  return (7 / xData.value.length)?.toFixed(1) as any * 100 || 0
})
const showZoom = computed(() => {
  return xData.value.length > 7
})
const option = reactive({
  xAxis: {
    type: "category",
    data: xData,
    boundaryGap: true, // 是否留白，从原点开始
    axisLabel: {
      color: "#fff",
      fontWeight: "500",
      formatter: function (value: any) {
        return value.substring(0, 3) + '..'; // 取每个字符串的前三个字符
      },
    },
  },
  yAxis: {
    show: false,
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,.6)",
    borderColor: "rgba(147, 235, 248, .8)",
    textStyle: {
      color: "#FFF",
    },
  },
  grid: {
    //布局
    show: false,
    left: "10px",
    right: "30px",
    bottom: "0px",
    top: "20px",
    containLabel: true,
    // borderColor: "#1F63A3",
  },
  // 添加 dataZoom 组件来启用滚动条
  /* dataZoom: [
  {
      type: 'slider', // 这里是滑块型数据区域缩放组件
      show: true, // 是否显示滑块
      start: 0, // 数据窗口范围的起始百分比
      end: 50, // 数据窗口范围的结束百分比
      handleSize: 10, // 滑块的大小
      height: 10, // 滑块组件的高度
      xAxisIndex: [0], // 控制哪个x轴
      filterMode: 'empty', // 数据过滤模式，'empty'表示空数据不显示
      
  },
  {
      type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
      start: 0,
      end: 100
  }
], */
  // 只有当数据超过七条时才添加 dataZoom 配置
  dataZoom: [{
    show: showZoom,
    type: 'slider',
    start: 0,
    end: zoomIndex
  }], // 如果不需要 dataZoom，则设置为 null
  series: [
    {
      data: yData,
      type: "bar",
      smooth: false,
      name: "已报到人数",
      color: "#2265ff",
      label: {
        show: true, // 开启显示  
        position: 'top', // 在上方显示  
        color: '#999',
        fontSize: 12,

      }
    }
  ],
});
const getData = (params: any) => {
  let dateList = params.map((el: any) => el.professionalName)
  let numList = params.map((el: any) => el.reportNumber)
  setOption(dateList, numList)

};
const setOption = (x: any[], y: any[]) => {
  // console.log(x, y);
  xData.value = x
  yData.value = y
};

defineExpose({ getData })
</script>

<template>
  <!-- v-if="JSON.stringify(option) != '{}'" -->
  <v-chart class="chart" :option="option" />
</template>

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