<script setup lang="ts">
import { ref, reactive } from 'vue';
import { traduction } from '@/utils/language';
import Version from './components/version/Version.vue';
import Manual from './components/manual/Manual.vue';
import { getUpgradeInfo } from './upgrade.services';
import { IVersion, IFirmwareVersion, IUpgradeVersion } from '@/model/Manager/upgrade-interface';

const activeName = ref('0');
const firmwareVersion: IFirmwareVersion = reactive({
  activeBMCVersion: '',
  backupBMCVersion: '',
  availableBMCVersion: '',
});
const upgradeVersion: IUpgradeVersion = reactive({
  availableBMC: '',
  unavailable: false,
});
const versionList: IVersion[] = reactive([]);

const tabList: any[] = [
  {
    id: 'firmwareTabs0',
    index: '0',
    label: 'IBMC_UPGRADE_VERSION',
  },
  {
    id: 'firmwareTabs1',
    index: '1',
    label: 'IBMC_UPGRADE_MANUAL',
  },
];

getUpgradeInfo().then(res => {
  firmwareVersion.activeBMCVersion = res.data.FirmwareVersion.ActiveBMCVersion;
  firmwareVersion.backupBMCVersion = res.data.FirmwareVersion.BackupBMCVersion;
  firmwareVersion.availableBMCVersion = res.data.FirmwareVersion.AvailableBMCVersion;
  if (firmwareVersion.availableBMCVersion) {
    upgradeVersion.availableBMC = firmwareVersion.availableBMCVersion;
    upgradeVersion.unavailable = true;
  } else {
    upgradeVersion.availableBMC = '';
    upgradeVersion.unavailable = false;
  }
  // 版本列表数据
  for (const item of res.data.UpgradeResource) {
    const versions: IVersion = {
      name: item.Name,
      currentVersion: item.Version || '--',
      type: item.Type,
    };
    versionList.push(versions);
  }
});

function handleSelect(val: string) {
  activeName.value = val;
}
</script>
<template>
  <RightTabs
    :id="'firmwareTabs'"
    :check-tab-index="activeName"
    :tab-list="tabList"
    @handle-select="handleSelect"
  />
  <Version
    v-show="activeName === '0'"
    :firmware-version="firmwareVersion"
    :upgrade-version="upgradeVersion"
    :version-list="versionList"
  />
  <Manual v-show="activeName === '1'" />
</template>

<style lang="scss" scoped>
.page-container {
  background-color: var(--o-bg-color-base);
  padding: 16px 24px 24px;
  margin-right: 24px;
  border-radius: 0 4px 4px 4px;
}
</style>
