<template>
  <div class="dv-table" :class="{scrollable: scrollable}" :style="styles">
    <div class="dv-table-header">
      <table>
        <colgroup>
          <col v-for="(dimension, index) in dimensions" :key="index" :style="{width: getWidth(dimension)}"/>
          <col v-for="index in indexes" :key="index" :style="{width: getWidth(index)}"/>
        </colgroup>
        <thead>
        <tr>
          <th v-for="dimension in dimensions" :key="dimension">
            <div class="dv-table-cell">
              {{dimension.title}}
            </div>
          </th>
          <th v-for="index in indexes" :key="index">
            <div class="dv-table-cell">
              {{index.title}}
            </div>
          </th>
        </tr>
        </thead>
      </table>
    </div>
    <div class="dv-table-body-wrap">
      <component :is="component" :data="items" class="seamless-warp" :class-option="classOption">
        <div class="dv-table-body">
          <table>
            <colgroup>
              <col v-for="(dimension, index) in dimensions" :key="index" :style="{width: getWidth(dimension)}"/>
              <col v-for="index in indexes" :key="index" :style="{width: getWidth(index)}"/>
            </colgroup>
            <tbody>
            <tr v-for="item in items" :key="item">
              <td v-for="(dimension, index) in dimensions" :key="index">
                <div class="dv-table-cell">{{getValue(item, dimension)|nullableValue}}</div>
              </td>
              <td v-for="index in indexes" :key="index">
                <div class="dv-table-cell">{{getValue(item, index)|nullableValue}}</div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </component>
    </div>
  </div>
</template>

<script>
import VueSeamlessScroll from 'vue-seamless-scroll';

export default {
  name: 'DvTable',
  components: {
    VueSeamlessScroll
  },
  props: {
    scrollable: {
      type: Boolean,
      default: false
    },
    height: {
      type: [String, Number]
    },
    maxHeight: {
      type: [String, Number]
    },
    minHeight: {
      type: [String, Number]
    },
    dimensions: {
      type: Array,
      required: false,
      default () {
        return [];
      }
    },
    indexes: {
      type: Array,
      default () {
        return [];
      }
    },
    items: {
      type: Array,
      default () {
        return [];
      }
    },
  },
  data() {
    return {
      width: 0
    };
  },
  computed: {
    component () {
      return this.scrollable ? 'vue-seamless-scroll' : 'div';
    },
    classOption () {
      return {
        step: 1,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 33,
        waitTime: 2000
      };
    },
    styles () {
      const styles = {};
      if (this.height) {
        styles.height = this.height + 'px';
      }
      if (this.minHeight) {
        styles.minHeight = this.minHeight + 'px';
      }
      if (this.maxHeight) {
        styles.maxHeight = this.maxHeight + 'px';
      }
      return styles;
    }
  },
  methods: {
    getWidth (item) {
      if (item.width) {
        return item.width + '%';
      }
      return this.width;
    },
    computeWidth () {
      let definedWidth = 0;
      let count = 0;
      this.dimensions.forEach(_ => {
        if (_.width) {
          count++;
          definedWidth += _.width ;
        }
      });
      this.indexes.forEach(_ => {
        if (_.width) {
          count++;
          definedWidth += _.width ;
        }
      });
      const fullWidth = 100;
      this.width = ((fullWidth - definedWidth) / (this.dimensions.length + this.indexes.length - count)) + '%';
    },
    getValue (item, index) {
      let value = item[index.name];

      if (index.formatter) {
        value = index.formatter(value);
      }
      if (index.fix !== undefined) {
        return parseFloat(value).toFixed(index.fix);
      }
      return value;
    }
  },
  mounted() {
    this.computeWidth();
  }
};
</script>
