<template>
  <div class="wrapper">
    <div class="left">
      <div class="left-text text-tip-1">{{ '统计维度：' }}</div>
      <div class="left-list">
        <ActionButton 
        v-for="item, index in list" 
        :key="index" 
        :name="item.name"
        :type="item.active ? 'active' : 'normal'" 
        @click="handleClickItem(item)"
        />
      </div>
    </div>
    <div class="right">
      <slot name="chart-header-right"></slot>
    </div>
  </div>
</template>

<script setup>
import ActionButton from '@/components/base/ActionButton/index.vue'

const props = defineProps({
  list: {
    type: Array,
    default: [
      {
        name: '时间',
        active: true
      },
      {
        name: '领域',
        active: false
      },
      {
        name: '党派',
        active: false
      },
    ]
  }
})

const emit = defineEmits(['clickItem'])

const handleClickItem = (item) => {
  emit('clickItem', item)
}

</script>

<style lang="scss" scoped>
.wrapper {
  width: 1520px;
  height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;

    .left-text {
      color: var(--text-primary-80-color);
    }

    .left-list {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-start;
    }
  }
}
</style>