<template>
  <page-section class="bootstrap-table__section">
    <span class="bold-12px__caps">
      {{ $t('fansPage.valueIndicators') }}
    </span>
    <b-table
      responsive="md"
      class="bootstrap-fans-table bootstrap-fans-table__stripes"
      :items="filteredSensors"
      :busy="isBusy"
      :fields="fields"
    >
      <template #cell(name)="{ value, index }">
        <div
          class="fans-colors"
          :style="`background-color: ${colors[index]}`"
        ></div>
        <span class="regular-12px tretiatry">
          {{ value }}
        </span>
      </template>
      <template #cell(middleSpeed)="{ value }">
        <span class="regular-12px">
          {{ value.time }}
        </span>
        <span class="regular-12px tretiatry">
          {{ value.date }}
        </span>
      </template>
      <template #cell(minSpeedDate)="{ value }">
        <span class="regular-12px">
          {{ value.time }}
        </span>
        <span class="regular-12px tretiatry">
          {{ value.date }}
        </span>
      </template>
      <template #cell(maxSpeedDate)="{ value }">
        <span class="regular-12px">
          {{ value.time }}
        </span>
        <span class="regular-12px tretiatry">
          {{ value.date }}
        </span>
      </template>
    </b-table>
  </page-section>
</template>

<script>
import PageSection from '@/components/Global/PageSection';
import { colors } from './helpers';

import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';

export default {
  components: { PageSection },
  mixins: [TableFilterMixin, DataFormatterMixin],
  data() {
    return {
      isBusy: true,
      colors,
      fields: [
        {
          key: 'name',
          label: 'Имя модуля',
          formatter: this.dataFormatter,
          thClass: 'bootstrap-fans-table__th medium-12px',
          tdClass: 'bootstrap-fans-table__td light-12px',
        },
        {
          key: 'currentValue',
          label: 'Текущая',
          formatter: this.dataFormatter,
          thClass: 'bootstrap-fans-table__th medium-12px',
          tdClass: 'bootstrap-fans-table__td light-12px',
        },
        {
          key: 'middleSpeed',
          label: 'Средняя',
          formatter: this.dataFormatter,
          thClass: 'bootstrap-fans-table__th medium-12px',
          tdClass: 'bootstrap-fans-table__td light-12px',
        },
        {
          key: 'lowerCaution',
          label: 'Минимальная',
          formatter: this.dataFormatter,
          thClass: 'bootstrap-fans-table__th medium-12px',
          tdClass: 'bootstrap-fans-table__td light-12px',
        },
        {
          key: 'minSpeedDate',
          label: 'Дата минимальной',
          formatter: this.dataFormatter,
          thClass: 'bootstrap-fans-table__th medium-12px',
          tdClass: 'bootstrap-fans-table__td light-12px',
        },
        {
          key: 'upperCaution',
          label: 'Максимальная',
          formatter: this.dataFormatter,
          thClass: 'bootstrap-fans-table__th medium-12px',
          tdClass: 'bootstrap-fans-table__td light-12px',
        },
        {
          key: 'maxSpeedDate',
          label: 'Дата максимальной',
          formatter: this.dataFormatter,
          thClass: 'bootstrap-fans-table__th medium-12px',
          tdClass: 'bootstrap-fans-table__td light-12px',
        },
      ],
    };
  },

  computed: {
    allSensors() {
      let sensors = this.$store.getters['sensors/fanSensors'];
      if (this.isSensorsExist) {
        sensors.forEach((sensor) => {
          sensor.type = sensor.name.toLowerCase().includes('cpu')
            ? this.$t('tablesDescription.cpu')
            : this.$t('tablesDescription.system');
        });
      }
      return sensors;
    },

    isSensorsExist() {
      return (
        this.$store.getters['sensors/fanSensors'] &&
        this.$store.getters['sensors/fanSensors'].length > 0
      );
    },

    filteredSensors() {
      return this.getFilteredTableData(this.allSensors, this.activeFilters);
    },
  },

  created() {
    this.$store.dispatch('sensors/getFanSensors').finally(() => {
      this.isBusy = false;
    });
  },
};
</script>
<style lang="scss">
.bootstrap-fans-table__th {
  background-color: transparent !important;
  color: $text-primary !important;
  border-top: none !important;
  padding: 10px 5px !important;
  border-bottom: 1px solid $faint-secondary-primary-10;
}

.bootstrap-fans-table__td {
  padding: 5px !important;
  border-top: none !important;
}
</style>

<style lang="scss" scoped>
.fans-colors {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.row {
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.medium-12px {
  color: $text-primary !important;
}
</style>
