<script setup lang="ts">
import { traduction } from '@/utils/language';
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import useStore from '@/stores';
import { ElNotification as elNotification } from 'element-plus';
import CustomAlert from '@/components/CustAlert/CustAlert.vue';
import { getUpgradeInfo } from '../../upgrade.services';
import { getStoreData, loading } from '@/utils/composition';
import Step from './Step.vue';
import UpgradeModeStep1 from './UpgradeModeStep1.vue';
import CheckStatusStep2 from './CheckStatusStep2.vue';

const store = useStore();
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});
const step = ref(0);
const multihost = computed(() => getStoreData('loct', 'multihost'));
const productLabel = store.state.loct.sn;
const loct: any = localStorage.getItem('loct');
const alertInfo = traduction('IBMC_FIMWARE_TIP_INFO', { softwareName: productLabel });
// 记录网络失败次数
const upgradeMode = ref<string>('Serial');
const activeMode = ref(false);

let fileItem: any = null;

// 文件上传
const message = 'insufficient memory capacity for the upload.';

function init(isInit?: boolean) {
  loading(true);
  getUpgradeInfo().then(res => {
    // 进入页面时查询一次升级进度
    upgradeMode.value = res.data?.UpgradeMode;
    activeMode.value = res.data?.ActiveMode === 'Immediately';
    const activeUrl = res.data?.ActiveUrl;
    // 如果在统一生效过程中则直接进入第二步
    if (Boolean(activeUrl)) {
      store.state.glob.setGlobState({ type: 'isActive', value: true });
      step.value = 2;
    } else {
      step.value = 1;
    }
    loading(false);
  });
}

function nextStep() {
  step.value += 1;
}

function previousStep() {
  step.value -= 1;
}

onMounted(() => {
  init(true);
});

</script>
<template>
  <div id="locationView" v-privil.base.baseConfig class="location-container">
    <CustomAlert id="alertType" :content="alertInfo" />
    <div class="current-step">
      <Step :step="step" />
    </div>
    <UpgradeModeStep1
      v-if="step === 1"
      :upgrade-mode="upgradeMode === 'Parallel'"
      :active-mode="activeMode"
      @nextStep="nextStep"
      ref="step1"
    >
    </UpgradeModeStep1>
    <CheckStatusStep2
      v-if="step === 2"
      @nextStep="nextStep"
      @previousStep="previousStep"
      ref="step2"
    >
    </CheckStatusStep2>
  </div>
</template>
<style lang="scss">
.location-container {
  height: 100%;
}
.el-notification .el-notification__closeBtn {
  top: 18px;
  right: 15px;
}
#tipAlert {
  background-color: #e2f1fc;
  border: 1px solid var(--o-color-state-primary);
}
#tipAler :deep(.bc-content) {
  color: #6c7280;
}
.tip-word {
  margin-top: 20px;
  color: #6c7280;
}
.tip-title {
  display: flex;
  background-color: #e2f1fc;
  padding: 8px 16px;
  border-radius: 2px;
  border: 1px solid var(--o-color-state-primary);
}
.tip-title .d-icon {
  height: 16px;
  margin-right: 8px;
}
.tip-title .d-container {
  font-size: 12px;
  color: var(--o-text-color-primary);
  overflow: hidden;
  transition: all 0.2s;
  white-space: pre-wrap;
  &.active {
    margin-top: 8px;
    height: auto;
  }
}
.config-dialog {
  .c-modal {
    width: 532px;
  }
}
#configSavedTip {
  vertical-align: top;
}
</style>
