<template>
  <view class="legend-container">
    <view class="legend-title">{{ dimensionName ? `当前维度：${dimensionName}` : '分组' }}</view>
    <view class="legend-list">
      <view v-for="group in groups" :key="group.value" class="legend-item">
        <text>{{ group.label || group.value }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Legend',
  props: {
    groups: {
      type: Array,
      required: true
    },
    dimensionName: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.legend-container {
  padding: 8px 16px;
  background: #f7f7f7;
  border-bottom: 1px solid #eee;
}
.legend-title {
  font-weight: bold;
  margin-bottom: 4px;
}
.legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.legend-item {
  background: #e3e6ef;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}
</style> 