<template>
  <div class="dv-index-indicator">
    <div class="dv-index-indicator-item" v-for="(item, index) in items" :key="index">
      <div class="dv-index-indicator-color" :style="{background: item.color}"></div>
      <div class="dv-index-indicator-label" :class="{active: selected === item}" @click="handleClick(item)">
        <slot :content="getRangeText(item)" :value="item.text"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DvIndexIndicator',
  props: {
    items: {
      type: Array,
      default () {
        return [];
      }
    },
  },
  data () {
    return {
      selected: null
    };
  },
  methods: {
    getRangeText (item) {
      let rangeText = '';
      if (item.min !== null && item.min !== undefined) {
        rangeText = item.min;
      }
      rangeText += '~';
      if (item.max !== null && item.max !== undefined) {
        rangeText += item.max;
      }
      return rangeText;
    },
    handleClick(item) {
      if (this.selected === item) {
        this.selected = null;
      }
      else {
        this.selected = item;
      }
      this.$emit('select', this.selected);
    }
  }
};
</script>
