<template>
  <div class="home">
    <ods-row>
      <ods-col :span="24">
        <div class="grid-content">
          <kpi-list data-id="kpi-list" :kpis="getKpiList"/>
        </div>
      </ods-col>
    </ods-row>
    <ods-row>
      <ods-col :span="12">
        <div class="grid-content mr">
          <alert-table
            data-id="delay-table"
            :title="translate('home','firstRowLeft')"
            :buttonLabel="translate('buttonLabel')"
            type="DELAY_IN"
            :alerts="delayResult"
          />
        </div>
      </ods-col>
      <ods-col :span="12">
        <div class="grid-content">
          <alert-table
            data-id="handling-table"
            :title="translate('firstRowRight')"
            :buttonLabel="translate('buttonLabel')"
            type="HANDLING"
            :alerts="handlingResult"
          />
        </div>
      </ods-col>
    </ods-row>
    <ods-row>
      <ods-col :span="12">
        <div class="grid-content mr">
           <pie-charts data-id="pie-charts" :title="translate('secondRowLeft')"></pie-charts>
        </div>
      </ods-col>
      <ods-col :span="16"></ods-col>
    </ods-row>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex';

import KpiList from '@/components/kpi-list/KpiList';
import AlertTable from '@/components/alert-table/AlertTable';
import PieCharts from '@/components/pie-charts/pie-charts';

export default {
  name: 'Home',
  data() {
    return {
      delayResult: null,
      handlingResult: null,
    };
  },
  components: {
    KpiList,
    AlertTable,
    PieCharts,
  },
  mounted() {
    this.getSelectedKpiList();
    this.setAlerts().then(() => {
      this.filterByType();
    });
  },
  computed: {
    ...mapGetters([
      'getKpiList',
      'getAlertList',
    ]),
  },
  methods: {
    ...mapActions([
      'fetchKpis',
      'setAlerts',
      'removeKpiList',
      'removeAlertList',
    ]),
    translate(data) {
      return this.$t(`home.${data}`);
    },
    getSelectedKpiList() {
      const kpisSelected = [1, 2, 3, 4, 5];
      this.removeKpiList();

      kpisSelected.forEach((index) => {
        this.fetchKpis(index);
      });
    },
    filterByType() {
      this.delayResult = this.getAlertList.filter(value => value.type === 'DELAY_IN');
      this.handlingResult = this.getAlertList.filter(value => value.type === 'DELAY_OUT');
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding: 24px;
}
.mr {
  margin-right: 20px;
}
.ods-row {
  margin-bottom: 20px;
}
.ods-row:last-child {
  margin-bottom: 0;
}
.ods-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
