<template>
  <page-section class="bootstrap-table__section">
    <span class="bold-12px__caps">
      {{ $t('SystemDescription.LoadingQueue') }}
    </span>
    <b-table
      responsive="md"
      class="bootstrap-table bootstrap-table__stripes"
      :items="queueItems"
      :fields="fields"
    >
      <template #cell(active)="data">
        <b-row>
          <b-col>
            <span v-if="queueItems[data.index].active">
              {{ $t('global.status.enabled') }}
            </span>
            <span v-else>
              {{ $t('global.status.disabled') }}
            </span>
          </b-col>
          <b-col>
            <b-form-checkbox
              v-model="queueItems[data.index].active"
              switch
              @change="toggleLoad"
            >
            </b-form-checkbox>
          </b-col>
        </b-row>
      </template>
    </b-table>
    <span class="bold-12px__caps">
      {{ $t('SystemDescription.DiskParametrs') }}
    </span>
    <b-table
      responsive="md"
      class="bootstrap-table bootstrap-table__stripes"
      :items="diskItems"
      :fields="fields"
    >
    </b-table>
  </page-section>
</template>

<script>
import PageSection from '@/components/Global/PageSection';
import iconChevron from '@carbon/icons-vue/es/chevron--down/16';

export default {
  components: { PageSection },
  data() {
    return {
      selectedCell: null,
      fields: [
        {
          key: 'param',
          label: '',
          formatter: this.dataFormatter,
          thClass: 'bootstrap-table__head_bg',
          class: 'bootstrap-table__column-first',
          tdClass: 'regular-12px bootstrap-table__td',
        },
        {
          key: 'active',
          label: '',
          formatter: this.dataFormatter,
          thClass: 'bootstrap-table__head_bg',
          class: `bootstrap-table__column-last
            bootstrap-table__server-param`,
          tdClass: 'regular-12px bootstrap-table__td',
        },
      ],
      iconChevron,
      queueItems: [
        {
          param: 'Hard Drive C:',
          active: false,
        },
        {
          param:
            'Embedded NIC 2 Port 1 Partition 1: BRCM MBA Slot E101 v21.6.0',
          active: false,
        },
        {
          param: 'Virtual Floppy Drive',
          active: false,
        },
        {
          param: 'Virtual Optical Drive',
          active: false,
        },
      ],
      diskItems: [
        {
          param: 'Internal SD',
          active: 'IDSM',
        },
        {
          param: 'ACHI Controller in SL7',
          active: 'A0S0 MTFDDAV480TDS',
        },
        {
          param: 'ACHI Controller in SL7',
          active: 'A0S1 MTFDDAV480TDS',
        },
        {
          param: 'RAID Controller in SL8',
          active: 'PERC H755 Front (bus 01 dev 00)',
        },
      ],
    };
  },
  methods: {
    toggleLoad(data, value) {
      this.queueItems[data.index].value = !value;
    },
  },
};
</script>
<style lang="scss">
.bootstrap-table__stripes tr:nth-of-type(even) {
  background-color: rgb(255 255 255);
}

.bootstrap-table__head_bg {
  border-top: none;
  display: none;
}

.bootstrap-table__column-first {
  border-right: 1px solid rgba(26, 62, 91, 0.1);
  border-top: none;
}

.bootstrap-table__column-last {
  border-top: none;
}

.bootstrap-table__td {
  border-top: 1px solid rgba(26, 62, 91, 0.1);
}

.bootstrap-table__server-param {
  width: 30%;
}

.system-network-table__icon-col {
  max-width: 20%;
  margin: 0 5px 0 auto !important;
}
</style>

<style lang="scss" scoped>
.row {
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.icon-expand {
  margin: 0 !important;
}

.bold-12px__caps {
  display: block;
  margin: 16px 0 7px 0;
}
</style>
