<script lang="ts" setup>
import { PageContainer } from 'antdv-pro-layout';
import Para5GForm from './components/Para5GForm.vue';
import {
  stepState,
  fnToStepName,
  fnRestStepState,
  useStep,
} from './hooks/useStep';
import { usePara5G } from './hooks/usePara5G';
import useI18n from '@/hooks/useI18n';
import { onMounted, onUnmounted, watch } from 'vue';
const { t } = useI18n();
const { currentComponent } = useStep(t);
const { state, fnReloadData, fnSaveData } = usePara5G();

watch(
  () => stepState.stepName,
  v => {
    if (v === 'Para5G') {
      fnReloadData();
    }
  }
);

onMounted(() => {
  fnRestStepState(t);
  fnReloadData();
});

onUnmounted(() => {
  fnRestStepState(t);
});

/**公共参数保存前下一步进行网元安装 */
function fnNext() {
  fnSaveData().then(() => {
    fnToStepName('Start');
  });
}
</script>

<template>
  <PageContainer>
    <a-card :bordered="false" v-if="stepState.stepName === 'Para5G'">
      <!-- 公共参数表单 -->
      <Para5GForm v-model:data="state.from" :ne="state.hasNE"></Para5GForm>

      <div style="padding: 24px 12px 0; text-align: end">
        <a-space :size="8" align="center">
          <a-button
            type="default"
            :disabled="state.confirmLoading"
            @click.prevent="fnReloadData()"
          >
            <template #icon><ReloadOutlined /></template>
            {{ t('views.ne.neQuickSetup.reloadPara5G') }}
          </a-button>
          <a-button
            type="primary"
            :loading="state.confirmLoading"
            @click="fnNext()"
          >
            {{ t('views.ne.neQuickSetup.stepNext') }}
          </a-button>
        </a-space>
      </div>
    </a-card>
    <a-card :bordered="false" v-else>
      <!-- 插槽-卡片左侧 -->
      <template #title>
        <!-- 步骤进度 -->
        <a-steps :current="stepState.current" direction="horizontal" style="margin: 24px 0;">
          <a-step
            v-for="s in stepState.steps"
            :key="s.title"
            :title="s.title"
            :description="s.description"
            :disabled="true"
          />
        </a-steps>
      </template>

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

<style lang="less" scoped></style>
