<template>
  <div class="dv-legend">
    <div class="dv-legend-item" v-for="(item, index) in items" :key="index">
      <div class="dv-legend-color" :style="{background: item.color}"></div>
      <div class="dv-legend-label">{{item.text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DvLegend',
  props: {
    items: {
      type: Array,
      default () {
        return [];
      }
    },
  },
  data () {
    return {
      selected: null
    };
  },
  methods: {
    handleClick(item) {
      if (this.selected === item) {
        this.selected = null;
      }
      else {
        this.selected = item;
      }
      this.$emit('select', this.selected);
    }
  }
};
</script>
