<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>
    <ul class="dv-index-table-items">
      <li class="dv-index-table-item" v-for="(item, index) in items" :key="index">
        <div class="dv-index-table-item-name" :style="getStyles(item)">{{item[dimensions[0].name]}}</div>
        <div class="dv-index-table-item-value">{{item[indexes[0].name]}}</div>
      </li>
    </ul>
  </div>
</template>

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

  export default {
    name: 'DvIndexTable',
    mixins: [ThemeComponent],
    props: {
      innerHeader: {
        type: Boolean,
        default: false
      },
      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,
          {
            'inner-header': this.innerHeader
          }
        ];
      },
    },
    methods: {
      getStyles (item) {
        const styles = {};
        if (this.getColor) {
          styles.backgroundColor = this.getColor(item);
        }
        return styles;
      }
    }
  };
</script>
