<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  data: number[]
  color?: string
  height?: number
  maxBars?: number
}>(), {
  color: 'var(--accent-cyan)',
  height: 32,
  maxBars: 7
})

const displayData = computed(() => {
  if (props.data.length <= props.maxBars) return props.data
  // 采样：取最后 N 个
  return props.data.slice(-props.maxBars)
})

const maxValue = computed(() => Math.max(...displayData.value, 1))
</script>

<template>
  <div class="mini-bar-chart" :style="{ '--chart-height': height + 'px', '--chart-color': color }">
    <div class="bars">
      <div
        v-for="(value, i) in displayData"
        :key="i"
        class="bar"
        :style="{ height: (value / maxValue * 100) + '%' }"
      />
    </div>
  </div>
</template>

<style scoped>
.mini-bar-chart {
  width: 100%;
  height: var(--chart-height);
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100%;
}

.bar {
  flex: 1;
  background: var(--chart-color);
  border-radius: 2px 2px 0 0;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
  min-height: 2px;
}

.bar:hover {
  opacity: 1;
}
</style>
