<template>
  <view class="charts-box" :style="{ width: width, height: height }">
    <qiun-data-charts
      type="bar"
      :canvas2d="canvas2d"
      :opts="opts"
      :tooltipShow="false"
      :chartData="_chartData"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
interface SeriesType {
  data: { color?: string; value: number }[];
}
interface ChartDataType {
  categories: string[];
  series: SeriesType[];
}
const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    chartData: ChartDataType;
  }>(),
  { height: '420rpx', categories: () => [] },
);
const canvas2d = ref(true);
const _chartData = ref();
const opts = ref({
  padding: [0, 42, 0, 0],
  enableScroll: false,
  legend: {
    position: 'top',
    padding: 2,
    show: false,
  },
  xAxis: {
    boundaryGap: 'justify',
    disableGrid: false,
    min: 0,
    max: 10,
    axisLine: false,
    type: 'grid', // X轴类型
    gridType: 'dash', // X轴网格线类型
    gridColor: '#d4d4d4',
    splitNumber: 10,
    format: 'xAixsHours',
  },
  yAxis: {},
  extra: {
    bar: {
      type: 'group',
      width: 25,
      meterBorde: 1,
      meterFillColor: '#FFFFFF',
      activeBgColor: '#000000',
      activeBgOpacity: 0.05,
      barBorderCircle: false,
      seriesGap: 2,
      categoryGap: 2,
    },
  },
});
watch(
  () => props.chartData,
  val => {
    _chartData.value = val;
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<style lang="scss" scoped>
.charts-box {
  width: 100%;
}
</style>
