import {
  defineAsyncComponent,
  onMounted,
  reactive,
  shallowRef,
  watch,
} from 'vue';

/**步骤信息状态类型 */
type StepStateType = {
  /**步骤名称 */
  stepName: string;
  /**安装网元步骤信息 */
  steps: any[];
  /**安装网元步骤当前选中 */
  current: number;
  /**连接主机 */
  neHost: Record<string, any>;
  /**网元信息 */
  neInfo: Record<string, any>;
};

/**步骤信息状态 */
export const stepState: StepStateType = reactive({
  stepName: 'Para5G',
  steps: [
    {
      title: '服务器环境',
      description: '服务端与网元服务',
    },
    {
      title: '配置网元信息',
      description: '网元信息设置',
    },
    {
      title: '网元软件安装',
      description: '软件安装到服务端',
    },
    {
      title: '网元授权激活',
      description: '网元服务授权激活',
    },
  ],
  current: -1,
  neHost: {},
  neInfo: {},
});

/**步骤信息状态复位 */
export function fnRestStepState(t?: any) {
  stepState.stepName = 'Para5G';
  stepState.current = -1;
  stepState.neHost = {};
  stepState.neInfo = {};

  // 多语言翻译
  if (t) {
    stepState.steps = [
      {
        title: t('views.ne.neQuickSetup.startTitle'),
        description: t('views.ne.neQuickSetup.startDesc'),
      },
      {
        title: t('views.ne.neQuickSetup.configTitle'),
        description: t('views.ne.neQuickSetup.configDesc'),
      },
      {
        title: t('views.ne.neQuickSetup.installTitle'),
        description: t('views.ne.neQuickSetup.installDesc'),
      },
      {
        title: t('views.ne.neQuickSetup.licenseTitle'),
        description: t('views.ne.neQuickSetup.licenseDesc'),
      },
    ];
  }
}

/**跳转步骤组件 */
export function fnToStepName(stepName: string) {
  stepState.current = [
    'Start',
    'NeInfoConfig',
    'NeInfoSoftwareInstall',
    'NeInfoSoftwareLicense',
  ].indexOf(stepName);

  stepState.stepName = stepName;
}

export function useStep({ t }: any) {
  // 异步加载组件
  const Start = defineAsyncComponent(() => import('../components/Start.vue'));

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

  watch(
    () => stepState.stepName,
    v => {
      const loadComponent = defineAsyncComponent(
        () => import(`../components/${v}.vue`)
      );
      currentComponent.value = loadComponent;
    }
  );

  return { currentComponent };
}
