<template>
  <ods-module :data-id="dataId">
    <div slot="header" class="clearfix" style="position: relative">
      <span>{{ title }}</span>
      <ods-button
        :data-id="`${dataId}-button`"
        @click="alertDetail"
        style="position: absolute; right: 32px; padding: 0;"
        type="text">
        {{ buttonLabel }}
        <ods-icon name="arrow-right" size="16"></ods-icon>
      </ods-button>
    </div>
    <div class="table">
      <ods-table :data="alerts" height="350" size="mini" style="width: 100%">
        <ods-table-column
          v-for="(column, index) in columns"
          :key="index"
          :prop="column"
          :label="translateColumn(column)"
        >
          <template slot-scope="scope">
            <span :class="[column === 'type' ? (scope.row.type === 'DELAY_IN' ? 'blueTag tag' : 'greenTag tag') : '']">
              {{ column ==='creationDate' ? ( moment(scope.row[column])) : scope.row[column]}}
            </span>
          </template>
        </ods-table-column>
        <ods-table-column class="item">
          <ods-button icon="ods-icon-arrow-right" circle negative></ods-button>
        </ods-table-column>
      </ods-table>
    </div>
  </ods-module>
</template>

<script>
import {getPropertiesObject, dateFormat} from '@/utils/filters';

export default {
  name: 'alert-table',
  props: ['dataId', 'title', 'buttonLabel', 'type', 'alerts'],
  methods: {
    translateColumn(column) {
      return this.$t(`dataTables.${column}`);
    },
    alertDetail() {
      this.$router.push({path: `/alerts/${this.type}`});
    },
    moment(date) {
      return dateFormat(date);
    },
  },
  computed: {
    columns() {
      return this.alerts && this.alerts.length ? getPropertiesObject(this.alerts[0]) : [];
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  display: flex;
}
.item {
  flex-grow: 1;
}
</style>
