<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getUnitsBoards } from '../../service/system.service';
import UnitsBoard from '../../components/units/UnitsBoard.vue';
import { traduction } from '@/utils/language';
import { loading } from '@/utils/composition';

const tabs = ref([] as any);
const checkTabIndex = ref(0);
const showData: any = reactive({});
const transformLabelList = {
  StorageExtensionUnit: traduction('COMPONENTS_STORAGE_EXTENSION'),
  IOExtensionUnit: traduction('COMPONENTS_IO_EXTENSION'),
  CoolingUnit: traduction('COMPONENTS_HEAT_DISSIPATION'),
  ExtensionUnit: traduction('COMPONENTS_SYSTEM_EXTENSION'),
  BasicComputingUnit: traduction('COMPONENTS_BASIC_COMPUTING'),
  AccelerationUnit: traduction('COMPONENTS_ACCELERATOR'),
  PowerSupplyUnit: traduction('COMPONENTS_POWER_SUPPLY'),
  PowerExtensionUnit: traduction('COMPONENTS_POWER_EXTENSION'),
};

getUnitsBoards().then((res: any) => {
  tabs.value = factoryBoardsInfo(res.data);
  tabs.value[0].isCheck = true;
  Object.assign(showData, tabs.value[0]);
});

function factoryBoardsInfo(boards: any): any[] {
  const responseData: any[] = [];
  if (boards) {
    for (const key of Object.keys(boards).sort()) {
      let board = boards[key];
      if (board.MaxNumber !== null) {
        responseData.push({
          label: transformLabel(key, board),
          type: key,
          currentNumber: board.CurrentNumber,
          detailLink: board.DetailLink,
          maxNumber: board.MaxNumber,
          isCheck: false
        });
      } else {}
    }
  }
  return responseData;
}

function transformLabel(key: string, board: any): string {
  let name = transformLabelList[key];
  if (board.MaxNumber && board.MaxNumber > 0) {
    name = name + ' (' + board.CurrentNumber + '/' + board.MaxNumber + ')';
  }
  return name;
}

function tabCheck(index: number) {
  loading(true);
  getUnitsBoards().then((res: any) => {
    tabs.value = factoryBoardsInfo(res.data);
  })
  .catch((error)=>{})
  .finally(()=>{
    tabs.value[checkTabIndex.value].isCheck = false;
    tabs.value[index].isCheck = true;
    checkTabIndex.value = index;
    Object.assign(showData, tabs.value[index]);
    loading(false);
  });
}
</script>

<template>
  <div class="unit">
    <div class="tab">
      <el-button
        v-for="(tab, index) in tabs"
        :id="tab.type"
        :key="tab.label"
        :class="{ check: tab.isCheck }"
        @click="tabCheck(index)"
      >
        {{ tab.label }}
      </el-button>
    </div>
    <div v-if="tabs.length" class="content">
      <UnitsBoard :data="showData" />
    </div>
  </div>
</template>

<style lang="scss">
.unit {
  height: 100%;
  background: var(--o-bg-color-base);
  border-radius: 0 4px 4px 4px;

  .tab {
    margin: 8px 16px 0;
  }
  .content {
    padding: 0 16px 16px 16px;
    height: calc(100% - 32px);
  }
  .el-button {
    background: var(--o-border-color-base);
    border-radius: 2px;
    margin-top: 8px;
    max-width: 242px;
    border: none;
    &:hover {
      background: var(--o-color-primary-secondary);
      color: var(--o-color-white);
    }
  }
  .el-button + .el-button {
    margin-left: 4px;
  }
  .check.el-button {
    background: var(--o-color-primary);
    color: var(--o-color-white);
  }
}
</style>
