<script lang="ts" setup>
import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib';
import { defineAsyncComponent, watch, shallowRef, onMounted } from 'vue';
import { stepState, fnStepPrev, fnStepNext, fnRestStepState } from './hooks/useStep';

// 异步加载组件
const StepCheck = defineAsyncComponent(
  () => import('./components/StepCheck.vue')
);

// 当前组件
const currentComponent = shallowRef(StepCheck);

watch(
  () => stepState.current,
  v => {
    if (v === 0) {
      currentComponent.value = StepCheck;
      return;
    }
    if (v === 1) {
      const StepNeInfo = defineAsyncComponent(
        () => import('./components/StepNeInfo.vue')
      );
      currentComponent.value = StepNeInfo;
      return;
    }
    if (v === 2) {
      const StepInstall = defineAsyncComponent(
        () => import('./components/StepInstall.vue')
      );
      currentComponent.value = StepInstall;
      return;
    }
    if (v === 3) {
      // 读取第二步的网元信息
      const stepNeInfo = stepState.states[1].from;
      if (stepNeInfo.neType === 'SMF') {
        const StepConfigSMF = defineAsyncComponent(
          () => import('./components/StepConfigSMF.vue')
        );
        currentComponent.value = StepConfigSMF;
      } else if (stepNeInfo.neType === 'AMF') {
        const StepConfigText = defineAsyncComponent(
          () => import('./components/StepConfigText.vue')
        );
        currentComponent.value = StepConfigText;
      } else {
        const StepConfig = defineAsyncComponent(
          () => import('./components/StepConfig.vue')
        );
        currentComponent.value = StepConfig;
      }
      return;
    }
    if (v === 4) {
      const StepActivate = defineAsyncComponent(
        () => import('./components/StepActivate.vue')
      );
      currentComponent.value = StepActivate;
      return;
    }
    if (v === 5) {
      const StepFinish = defineAsyncComponent(
        () => import('./components/StepFinish.vue')
      );
      currentComponent.value = StepFinish;
      return;
    }
  }
);

onMounted(()=>{
  fnRestStepState()
})
</script>

<template>
  <PageContainer>
    <!-- 步骤进度 -->
    <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
      <a-steps :current="stepState.current" direction="horizontal">
        <a-step
          v-for="s in stepState.steps"
          :key="s.title"
          :title="s.title"
          :description="s.description"
          :disabled="true"
        />
      </a-steps>
    </a-card>

    <a-card
      :bordered="false"
      :body-style="{ padding: '12px', minHeight: '450px' }"
    >
      <!-- 插槽-卡片左侧侧 -->
      <template #title>
        <div>
          {{ stepState.steps[stepState.current].title }}
          Check, NeInfo, Install, Config, Activate, Finish
        </div>
      </template>

      <!-- 插槽-卡片右侧 -->
      <template #extra>
        <a-space :size="8" align="center">
          <a-button
            v-if="stepState.current > 0"
            style="margin-left: 8px"
            @click="fnStepPrev()"
          >
            上一步
          </a-button>
          <a-button
            v-if="stepState.current < stepState.steps.length - 1"
            type="primary"
            :disabled="!stepState.stepNext"
            @click="fnStepNext()"
          >
            下一步
          </a-button>
          <a-button
            v-if="stepState.current == stepState.steps.length - 1"
            type="primary"
            @click="message.success('Processing complete!')"
          >
            完成
          </a-button>
        </a-space>
      </template>

      <!-- 步骤页面 -->
      <component :is="currentComponent" />
    </a-card>
  </PageContainer>
</template>

<style lang="less" scoped>
.pane-box {
  padding: 16px;
  height: calc(100vh - 320px);
  overflow-x: hidden;
}
</style>
