<template>
  <b-container
    :style="{ display: 'flex', 'flex-direction': 'column' }"
    fluid="xxl pt-0 m-0"
  >
    <page-title />
    <page-section class="bootstrap-table__section">
      <b-table
        responsive="md"
        show-empty
        class="bootstrap-rounded-table"
        :items="systems"
        :fields="fields"
        :empty-text="$t('global.table.emptyMessage')"
      >
        <template #cell(value)="data">
          <b-row v-if="typeof data.value === 'boolean'">
            <b-col>
              <span v-if="systems[data.index].value">
                {{ $t('global.status.enabled') }}
              </span>
              <span v-else>
                {{ $t('global.status.disabled') }}
              </span>
            </b-col>
            <b-col>
              <b-form-checkbox v-model="systems[data.index].value" switch>
              </b-form-checkbox>
            </b-col>
          </b-row>
          <b-row
            v-else-if="data.index === 1 || data.index === 6 || data.index === 8"
          >
            <b-col>
              <span>
                {{ data.value }}
              </span>
            </b-col>
            <b-col>
              <img :is="iconChevron" class="icon-chevron" />
            </b-col>
          </b-row>
          <b-row v-else-if="data.index === 3">
            <b-col>
              <span>
                {{ data.value }}
              </span>
            </b-col>
            <b-col>
              <img src="@/assets/images/icon-edit.svg" class="icon-chevron" />
            </b-col>
          </b-row>
          <b-row v-else>
            <span>{{ data.value }}</span></b-row
          >
        </template>
      </b-table>
      <div class="save-button">
        <b-button variant="primary" class="console-settings__save-button">
          {{ $t('global.action.saveChanges') }}
        </b-button>
      </div>
    </page-section>
  </b-container>
</template>

<script>
import PageTitle from '@/components/Global/PageTitle';
// import BMCConfigurationTable from './BMCConfigurationTable';
// import BMCConfigurationControl from './BMCConfigurationControl';
import PageSection from '@/components/Global/PageSection';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
// import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
import TableRowExpandMixin, {
  expandRowLabel,
} from '@/components/Mixins/TableRowExpandMixin';
import iconChevron from '@carbon/icons-vue/es/chevron--down/16';

export default {
  components: {
    PageTitle,
    // BMCConfigurationControl,
    // BMCConfigurationTable,
    PageSection,
  },
  mixins: [BVToastMixin, TableRowExpandMixin],
  data() {
    return {
      text: '',
      isBusy: true,
      fields: [
        {
          key: 'attributes',
          label: 'Атрибуты',
          formatter: this.dataFormatter,
          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
          class: 'bootstrap-rounded-table__column-first',
          tdClass: 'regular-12px bootstrap-rounded-table__td',
        },
        {
          key: 'value',
          label: 'Значение',
          formatter: this.dataFormatter,
          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
          class: `bootstrap-rounded-table__column-last
          bootstrap-rounded-table__column-last___console`,
          tdClass: 'regular-12px bootstrap-rounded-table__td',
        },
      ],
      iconChevron,
      expandRowLabel: expandRowLabel,
      systems: [
        { attributes: 'Состояние', value: true },
        { attributes: 'Максимальное количество сеансов', value: '6' },
        { attributes: 'Активные сеансы', value: '0' },
        { attributes: 'Порт удаленного доступа', value: '5900' },
        { attributes: 'Статус шифрования видео', value: true },
        { attributes: 'Видео с локального сервера', value: true },
        {
          attributes:
            'Действие по умолчанию при истечении времени ожидания запроса на общий доступ к сеансу',
          value: 'Полный доступ',
        },
        {
          attributes: 'Автоматическая блокировка системы',
          value: false,
        },
        {
          attributes: 'Состояние подключения клавиатуры/мыши',
          value: 'Автоматическое',
        },
      ],
      // iconChevronUp: iconChevronUp,
    };
  },
};
</script>
<style lang="scss">
.bootstrap-rounded-table__column-last___console {
  width: 30%;
}
</style>
<style lang="scss" scoped>
.row {
  margin: 0px;
  height: 15px;
  flex-wrap: nowrap;
  align-items: center;
}
.col {
  padding: 0;
}

.icon-chevron {
  margin: 0 0 0 85%;
  cursor: pointer;
}

.save-button {
  display: flex;
  justify-content: flex-end;
}

.console-settings__save-button {
  width: 241px;
  height: 36px;
  margin-right: 0.5rem;
}

.bootstrap-table__section {
  width: auto;
}
</style>
