<template>
  <div class="dv-index-table" :class="classes">
    <div class="dv-index-table-header" v-if="title || time">
      <h3 class="dv-index-table-title" v-if="title">{{title}}</h3>
      <p class="dv-index-table-time" v-if="time">{{time}}</p>
    </div>
    <div class="dv-index-table-body">
      <ul class="dv-index-table-names">
        <li v-for="(item, index) in items" :key="index" class="dv-index-table-name" :style="getStyles(item)">
          {{item[dimensions[0].name]}}
        </li>
      </ul>
      <ul class="dv-index-table-values">
        <li v-for="(item, index) in items" :key="index" class="dv-index-table-value">
          <span>{{item[indexes[0].name]}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import ThemeComponent from "../../../mixins/ThemeComponent";

  export default {
    name: 'DvIndexTable',
    mixins: [ThemeComponent],
    props: {
      title: {
        type: String
      },
      time: {
        type: String
      },
      dimensions: {
        type: Array,
        default () {
          return [];
        }
      },
      indexes: {
        type: Array,
        default () {
          return [];
        }
      },
      getColor: {
        type: Function
      },
      indexTableStyle: {
        type: String
      },
      items: {
        type: Array,
        default () {
          return [];
        }
      }
    },
    computed: {
      classes () {
        return [this.indexTableStyle ? `style-${this.indexTableStyle}` : '', ...this.themeClasses];
      },
    },
    methods: {
      getStyles (item) {
        const styles = {};
        if (this.getColor) {
          styles.backgroundColor = this.getColor(item);
        }
        return styles;
      }
    }
  };
</script>
