<template>
  <page-section :section-title="$t('pagePci.title')">
    <b-table
      responsive="md"
      show-empty
      hover
      :items="pci"
      :fields="fields"
      :empty-text="$t('global.table.emptyMessage')"
      :busy="isBusy"
    >
      <template #cell(expandRow)="row">
        <b-button
          v-if="
            pci[row.index].DeviceType !== 'SingleFunction' &&
            pci[row.index].Functions
          "
          variant="link"
          :title="expandRowLabel"
          class="btn-icon-only"
          @click="toggleRowDetails(row)"
        >
          <icon-chevron />
          <span class="sr-only">{{ expandRowLabel }}</span>
        </b-button>
      </template>
      <template #cell(health)>
        <status-icon :status="statusIcon('OK')" />
        {{ $t('pagePci.table.health_d') }}
      </template>
      <template #cell(deviceClass)="data">
        <span v-if="pci[data.index].DeviceType === 'SingleFunction'">
          {{ data.value }}</span
        >
        <span v-else>
          {{
            pci[data.index].Functions
              ? pci[data.index].Functions[0].deviceClass
              : '--'
          }}</span
        >
      </template>
      <template #row-details="data">
        <b-container fluid>
          <b-row v-for="item in data.item.Functions" :key="item.id">
            <b-col xs="6">
              <dl>
                <dt>{{ $t('pagePci.table.name') }}:</dt>
                <dd v-if="item.DeviceName">
                  {{ dataFormatter(item.DeviceName) }}
                </dd>
                <dd v-else>{{ '--' }}</dd>
              </dl>
            </b-col>
            <b-col xs="6">
              <dl>
                <dt>{{ $t('pagePci.table.type') }}:</dt>
                <dd v-if="item.deviceClass">
                  {{ dataFormatter(item.deviceClass) }}
                </dd>
                <dd v-else>{{ '--' }}</dd>
              </dl>
            </b-col>
          </b-row>
        </b-container>
      </template>
    </b-table>
  </page-section>
</template>

<script>
import { mapState } from 'vuex';

import PageSection from '@/components/_sila/Global/PageSection';
import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
import StatusIcon from '@/components/_sila/Global/StatusIcon';

import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
import TableRowExpandMixin, {
  expandRowLabel,
} from '@/components/_ibs/Mixins/TableRowExpandMixin';

export default {
  components: { PageSection, StatusIcon, IconChevron },
  mixins: [DataFormatterMixin, LoadingBarMixin, TableRowExpandMixin],
  data() {
    return {
      isBusy: true,
      fields: [
        {
          key: 'expandRow',
          label: '',
          tdClass: 'table-row-expand',
          sortable: false,
        },
        {
          key: 'DeviceName',
          label: this.$t('pagePci.table.name'),
          formatter: this.dataFormatter,
        },
        {
          key: 'health',
          label: this.$t('pagePci.table.health'),
          formatter: this.dataFormatter,
          tdClass: 'text-nowrap',
        },
        {
          key: 'deviceClass',
          label: this.$t('pagePci.table.class'),
          formatter: this.dataFormatter,
        },
        {
          key: 'DeviceType',
          label: this.$t('pagePci.table.type'),
          formatter: this.dataFormatter,
        },
        {
          key: 'manufacturer',
          label: this.$t('pagePci.table.manufacturer'),
          formatter: this.dataFormatter,
        },
      ],
      expandRowLabel: expandRowLabel,
    };
  },

  computed: {
    ...mapState('pciStore', ['pci']),
  },

  created() {
    return this.$store.dispatch('pciStore/getDevices').finally(() => {
      this.$root.$emit('hardware-status-pci-complete');
      this.isBusy = false;
    });
  },
};
</script>
