<template>
  <b-container fluid="xxl pt-0 m-0">
    <page-title />
    <div class="tables-container">
      <div class="server-table">
        <span class="semi-bold-16px">{{
          $t('global.status.serverStatus')
        }}</span>
        <b-table
          show-empty
          responsive="md"
          class="bootstrap-analytical-table"
          :items="serverItems"
          :fields="server_fields"
        >
          <template #cell(value)="{ value }">
            <b-col v-if="value">
              <img
                src="@/assets/images/icon-ok.svg"
                class="system-network-table__icon"
              />
            </b-col>
            <b-col v-else>
              <img
                src="@/assets/images/icon-no.svg"
                class="system-network-table__icon"
              />
            </b-col>
          </template>
        </b-table>
      </div>
      <div class="events-table">
        <span class="semi-bold-16px">{{ $t('global.action.events') }}</span>
        <div id="events-table-wrapper">
          <b-table
            show-empty
            :sticky-header="stickyHeader"
            responsive="md"
            class="bootstrap-analytical-table"
            :no-border-collapse="true"
            :items="eventsItems"
            :fields="events_fields"
          >
            <template #cell(date)="{ value }">
              <img
                src="@/assets/images/event-logs/time.svg"
                class="sourse__img"
              />
              <span class="regular-12px quaternary"> {{ value }} </span>
            </template>
            <template #cell(type)="{ value }">
              <span
                v-if="value === 'Критические'"
                class="bold-12px__caps errors"
                >{{ value }}</span
              >
              <span
                v-else-if="value === 'Предупреждения'"
                class="bold-12px__caps warning"
              >
                {{ value }}
              </span>
              <span v-else class="bold-12px__caps information">{{
                value
              }}</span>
            </template>
            <template #cell(description)="data">
              <b-row class="semi-bold-16px tretiatry">
                {{ data.item.description.name }}
              </b-row>
              <b-row
                class="regular-12px tretiatry pointer"
                @click="toggleRowDetails(data)"
              >
                {{ data.item.description.description }}</b-row
              >
            </template>
            <template #row-details="{ index }">
              <b-container fluid>
                <b-col class="mt-1 mb-2 regular-12px tretiatry">
                  <span class="row-details">
                    {{
                      `Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.
                   Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.`
                    }}
                    {{ $t(eventsItems[index].description.description) }}
                  </span>
                </b-col>
              </b-container>
            </template>
          </b-table>
        </div>
      </div>
    </div>
    <div class="indicators-container">
      <span class="bold-16px">{{ $t('global.status.indicators') }}</span>
      <span class="indicators-units regular-12px tretiatry">
        {{ $t('global.units.unit') }}</span
      >
      <b-button id="popover-choice-1" variant="unstiled">
        <span class="regular-12px units-label">
          {{
            $t(`global.units.${unit === 'Ампераж' ? 'amper' : 'volt'}`)
          }}</span
        >
        <img class="units__icon" src="@/assets/images/icon-chevron-red.svg" />
      </b-button>
    </div>
    <two-chioce-popover
      :id="1"
      fitst-option="Ампераж"
      second-option="Вольтаж"
      :chosen-option="unit"
      :first-action="selectAmper"
      :second-action="selectVolt"
    />
    <!-- <unit-popover
        :select-amper="selectAmper"
        :select-volt="selectVolt"
        :unit="unit"
      /> -->
    <date-switch :switch-time-scale="switchTimeScale" :time-scale="timeScale" />
    <accessory-table :records="accessoryData.power" />
    <power-table :time-scale="timeScale" />
    <div class="tables-container">
      <span class="semi-bold-16px">Управление</span>
    </div>
    <control-system />
  </b-container>
</template>

<script>
import PageTitle from '@/components/Global/PageTitle';
import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin';
import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel';
import ControlSystem from '@/components/Global/SilaComponents/InventoryControlSystem';
import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover';

import PowerTable from './PowerTable';
import { AccessoryData, ServerItems, EventsItems } from './helpers';
export default {
  components: {
    PageTitle,
    DateSwitch,
    AccessoryTable,
    PowerTable,
    ControlSystem,
    TwoChiocePopover,
  },
  mixins: [TableRowExpandMixin],
  data() {
    return {
      unit: 'Ампераж',
      isActive: false,
      timeScale: 'hour',
      stickyHeader: '511px',
      accessoryData: AccessoryData,
      serverItems: ServerItems,
      eventsItems: EventsItems,
      server_fields: [
        {
          key: 'param',
          label: 'Раздел',
          formatter: this.dataFormatter,
          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
          class: 'bootstrap-analytical-table__column-first',
          tdClass: 'regular-12px bootstrap-analytical-table__td',
        },
        {
          key: 'value',
          label: 'Статус',
          formatter: this.dataFormatter,
          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
          class:
            'bootstrap-rounded-table__column-last analytical-table__status',
          tdClass: 'regular-12px bootstrap-analytical-table__td',
        },
      ],
      events_fields: [
        {
          key: 'date',
          label: 'Время',
          formatter: this.dataFormatter,
          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
          class: 'bootstrap-analytical-table__column-first',
          tdClass: 'regular-12px bootstrap-analytical-table__td',
        },
        {
          key: 'type',
          label: 'Тип события',
          formatter: this.dataFormatter,
          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
          class: 'bootstrap-analytical-table__column-center',
          tdClass: 'regular-12px bootstrap-analytical-table__td',
        },
        {
          key: 'description',
          label: 'О событии',
          formatter: this.dataFormatter,
          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
          class: 'bootstrap-analytical-table__column-last',
          tdClass: 'regular-12px bootstrap-analytical-table__td',
        },
      ],
    };
  },
  methods: {
    switchTimeScale(period) {
      this.timeScale = period;
    },
    selectAmper() {
      this.unit = 'Ампераж';
    },
    selectVolt() {
      this.unit = 'Вольтаж';
    },
  },
};
</script>
<style lang="scss">
.analytical-table__status {
  width: 10%;
}

#popover-unit-ractive {
  padding-left: 5px;
}

#popover-unit-ampere {
  width: 89px;
  height: 28px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 12px;
}

#popover-unit-volt {
  width: 89px;
  height: 28px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 12px;
  // color: $red-brand-primary;
}
</style>
<style lang="scss" scoped>
.tables-container {
  display: flex;
  flex-flow: row nowrap;
  margin: 16px 32px;
  gap: 24px;
}

.server-table {
  width: 35%;
}

.events-table {
  width: 65%;
}

#events-table-wrapper div {
  overflow-y: overlay;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    position: absolute;
    width: 10px;
  }
  &::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    border-top: 43px solid transparent;
    background: $faint-secondary-primary-20;
    border-radius: 16px;
    background-clip: content-box;
  }
}

.row-details {
  display: block;
  height: auto;
  width: 30vw;
}

.errors {
  color: $indicators-errors !important;
}

.warning {
  color: $indicators-warning !important;
}

.information {
  color: $indicators-complementary !important;
}

.indicators-container {
  margin-left: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.indicators-units {
  margin-left: auto;
}

.units__icon {
  margin: 0 32px 0 5px;
  cursor: pointer;
}

.units-label {
  cursor: pointer;
  color: $red-brand-primary;
}
</style>
