<script setup lang="ts">
import { ref } from 'vue';
import { IOtherTab } from '../../product.datatype';
import { getBoards } from '../../service/system.service';
import CPUBoard from '../../components/other/CPUBoard.vue';
import DiskBackplane from '../../components/other/DiskBackplane.vue';
import ExpandBoard from '../../components/other/ExpandBoard.vue';
import LeakageDetectionCard from '../../components/other/LeakageDetectionCard.vue';
import PCIeRiserCard from '../../components/other/PCIeRiserCard.vue';
import RAIDCard from '../../components/other/RAIDCard.vue';
import M2TransformCard from '../../components/other/M2TransformCard.vue';
import PassThroughCard from '../../components/other/PassThroughCard.vue';
import MEZZCard from '../../components/other/MEZZCard.vue';
import PCIeTransformCard from '../../components/other/PCIeTransformCard.vue';
import GPUBoard from '../../components/other/GPUBoard.vue';
import FanBackplane from '../../components/other/FanBackplane.vue';
import HorizontalConnectionBoard from '../../components/other/HorizontalConnectionBoard.vue';
import MemoryBoard from '../../components/other/MemoryBoard.vue';
import IOBoard from '../../components/other/IOBoard.vue';
import ChassisBackplane from '../../components/other/ChassisBackplane.vue';
import BBUModule from '../../components/other/BBUModule.vue';
import SecurityModule from '../../components/other/SecurityModule.vue';
import LCD from '../../components/other/LCD.vue';
import PeripheralFirmware from '../../components/other/PeripheralFirmware.vue';
import PeripheralCard from '../../components/other/PeripheralCard.vue';
import SDCard from '../../components/other/SDCard.vue';
import SDStorage from '../../components/other/SDStorage.vue';
import OCPCard from '../../components/other/OCPCard.vue';
import PCIeCard from '../../components/other/PCIeCard.vue';
import CICCard from '../../components/other/CICCard.vue';
import PowerBoard from '../../components/other/PowerBoard.vue';
import LCN from '../../components/other/LCN.vue';
import UBInterfaceCard from '../../components/other/UBInterfaceCard.vue';
import { traduction } from '@/utils/language';
import { getStoreData, loading } from '@/utils/composition';
import { PRODUCTTYPE } from '@/model/base-enum';
import NoDataAvailable from '@/components/NoDataAvailable/NoDataAvailable.vue';

loading(true);
const tabs = ref([] as any);
const checkTabIndex = ref(0);
const boardName = getStoreData('glob', 'boardName');
const transformLabelList = {
  DiskBackplane: traduction('OTHER_DISK_BACK_PLANE'),
  PCIeRiserCard: traduction('OTHER_RISER_CARD'),
  CICCard: traduction('OTHER_CIC_CARD'),
  RAIDCard: traduction('OTHER_RAID_CARD'),
  M2TransformCard: traduction('OTHER_M2_TRANSFORM_CARD'),
  PeripheralCard: traduction('OTHER_PERIPHERAL_CARD'),
  PassThroughCard: traduction('OTHER_PASS_THROUGH_CARD'),
  MezzCard: traduction('OTHER_MEZZCARD'),
  PCIeTransformCard: traduction('OTHER_PCIE_TRANSFORM_CARD'),
  GPUBoard: traduction('OTHER_GPU_BOARD'),
  FanBackplane: traduction('OTHER_FAN_BACKPLANE'),
  PowerBoard: traduction('OTHER_POWER_BOARD'),
  HorizontalConnectionBoard: traduction('OTHER_HORIZONTAL_CONNECTION_BOARD'),
  CPUBoard: traduction('OTHER_CPU_BOARD'),
  MemoryBoard: traduction('OTHER_MEMORY_BOARD'),
  IOBoard: traduction('OTHER_IO_BOARD'),
  ChassisBackplane: traduction('OTHER_MACHINE_FRAME_BACKPLANE'),
  mainboardSDCard: traduction('OTHER_SD_CARD'),
  PCIeCard: traduction('OTHER_PCIE_CARD'),
  OCPCard: traduction('OTHER_OCP_CARD'),
  BBUModule: traduction('OTHERS_BBU'),
  ExpandBoard:
    boardName === PRODUCTTYPE.TIANCHI
      ? traduction('OTHERS_EXPANDSION_BOARD')
      : traduction('OTHERS_EXPANDER'),
  SecurityModule: traduction('OTHER_SECURITY_MODULE'),
  PeripheralFirmware: traduction('OTHER_PERIPHERAL_FIRMWARE'),
  LCD: traduction('OTHER_LCD'),
  LeakageDetectionCard: traduction('OTHER_LEAKAGECARD_CONTROLLER'),
  SDStorage: traduction('OTHER_SD_CONTROLLER'),
  LCNs: 'LCN',
  UBInterfaceCard: traduction('OTHER_BOARD_UB'),
};

getBoards().then((res: any) => {
  tabs.value = factoryBoardsInfo(res.data);
  if (tabs.value.length > 0) {
    tabs.value[0].isCheck = true;
  }
  loading(false);
});

function factoryBoardsInfo(boards: any): IOtherTab[] {
  const responseData: IOtherTab[] = [];
  if (boards) {
    for (let key in boards) {
      if ({}.hasOwnProperty.call(boards, key)) {
        let board = boards[key];
        if (
          key === 'FanBackplane' &&
          (boardName === PRODUCTTYPE.TIANCHI || boardName === PRODUCTTYPE.WUHAN)
        ) {
          board.MaxNumber = 1;
        }
        // 武汉二期不支持装备漏液检测卡
        if (key === 'LeakageDetectionCard' && boardName === PRODUCTTYPE.WUHAN) {
          continue;
        }
        responseData.push({
          label: transformLabel(key, board),
          type: key,
          currentNumber: board.CurrentNumber,
          detailLink: board.DetailLink,
          maxNumber: board.MaxNumber,
          isCheck: false,
        });
      }
    }
  }
  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) {
  tabs.value[checkTabIndex.value].isCheck = false;
  tabs.value[index].isCheck = true;
  checkTabIndex.value = index;
}
</script>

<template>
  <div class="other">
    <div class="tab">
      <el-button
        v-for="(tab, index) in tabs"
        :id="tab.type"
        :key="tab.label"
        class="btn-boder-radius"
        :class="{ check: tab.isCheck }"
        @click="tabCheck(index)"
      >
        {{ tab.label }}
      </el-button>
    </div>
    <div v-if="tabs.length > 0" class="content">
      <CPUBoard v-if="tabs[checkTabIndex].type === 'CPUBoard'" :data="tabs[checkTabIndex]" />
      <DiskBackplane
        v-if="tabs[checkTabIndex].type === 'DiskBackplane'"
        :data="tabs[checkTabIndex]"
      />
      <ExpandBoard v-if="tabs[checkTabIndex].type === 'ExpandBoard'" :data="tabs[checkTabIndex]" />
      <LeakageDetectionCard
        v-if="tabs[checkTabIndex].type === 'LeakageDetectionCard'"
        :data="tabs[checkTabIndex]"
      />
      <PCIeRiserCard
        v-if="tabs[checkTabIndex].type === 'PCIeRiserCard'"
        :data="tabs[checkTabIndex]"
      />
      <RAIDCard v-if="tabs[checkTabIndex].type === 'RAIDCard'" :data="tabs[checkTabIndex]" />
      <M2TransformCard
        v-if="tabs[checkTabIndex].type === 'M2TransformCard'"
        :data="tabs[checkTabIndex]"
      />
      <PassThroughCard
        v-if="tabs[checkTabIndex].type === 'PassThroughCard'"
        :data="tabs[checkTabIndex]"
      />
      <MEZZCard v-if="tabs[checkTabIndex].type === 'MEZZCard'" :data="tabs[checkTabIndex]" />
      <PCIeTransformCard
        v-if="tabs[checkTabIndex].type === 'PCIeTransformCard'"
        :data="tabs[checkTabIndex]"
      />
      <FanBackplane
        v-if="tabs[checkTabIndex].type === 'FanBackplane'"
        :data="tabs[checkTabIndex]"
      />
      <GPUBoard v-if="tabs[checkTabIndex].type === 'GPUBoard'" :data="tabs[checkTabIndex]" />
      <HorizontalConnectionBoard
        v-if="tabs[checkTabIndex].type === 'HorizontalConnectionBoard'"
        :data="tabs[checkTabIndex]"
      />
      <MemoryBoard v-if="tabs[checkTabIndex].type === 'MemoryBoard'" :data="tabs[checkTabIndex]" />
      <IOBoard v-if="tabs[checkTabIndex].type === 'IOBoard'" :data="tabs[checkTabIndex]" />
      <ChassisBackplane
        v-if="tabs[checkTabIndex].type === 'ChassisBackplane'"
        :data="tabs[checkTabIndex]"
      />
      <BBUModule v-if="tabs[checkTabIndex].type === 'BBUModule'" :data="tabs[checkTabIndex]" />
      <SecurityModule
        v-if="tabs[checkTabIndex].type === 'SecurityModule'"
        :data="tabs[checkTabIndex]"
      />
      <LCD v-if="tabs[checkTabIndex].type === 'LCD'" :data="tabs[checkTabIndex]" />
      <PeripheralFirmware
        v-if="tabs[checkTabIndex].type === 'PeripheralFirmware'"
        :data="tabs[checkTabIndex]"
      />
      <PeripheralCard
        v-if="tabs[checkTabIndex].type === 'PeripheralCard'"
        :data="tabs[checkTabIndex]"
      />
      <SDCard v-if="tabs[checkTabIndex].type === 'mainboardSDCard'" :data="tabs[checkTabIndex]" />
      <OCPCard v-if="tabs[checkTabIndex].type === 'OCPCard'" :data="tabs[checkTabIndex]" />
      <PCIeCard v-if="tabs[checkTabIndex].type === 'PCIeCard'" :data="tabs[checkTabIndex]" />
      <CICCard v-if="tabs[checkTabIndex].type === 'CICCard'" :data="tabs[checkTabIndex]" />
      <PowerBoard v-if="tabs[checkTabIndex].type === 'PowerBoard'" :data="tabs[checkTabIndex]" />
      <SDStorage v-if="tabs[checkTabIndex].type === 'SDStorage'" :data="tabs[checkTabIndex]" />
      <LCN v-if="tabs[checkTabIndex].type === 'LCNs'" :data="tabs[checkTabIndex]" />
      <UBInterfaceCard v-if="tabs[checkTabIndex].type === 'UBInterfaceCard'" :data="tabs[checkTabIndex]" />
    </div>
    <div v-else>
      <NoDataAvailable />
    </div>
  </div>
</template>

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

  .tab {
    margin: 8px 16px 0;
  }
  .content {
    padding: 0 0 16px 0;
    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: #ffffff;
    }
  }
  .btn-boder-radius {
    border-radius: var(--i-button-border-radius);
  }
  .el-button + .el-button {
    margin-left: 4px;
  }
  .check.el-button {
    background: var(--o-color-primary);
    color: #ffffff;
  }
}
</style>
