<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { TOKEN_RESPONSE_FIELD } from '@/constants/token-constants';
import { getToken, setToken } from '@/plugins/auth-token';
import { bootloaderStart } from '@/api/system/quick-start/bootloader';
import useI18n from '@/hooks/useI18n';
import { fnToStepName } from '../hooks/useStep';
const { t, changeLocale, optionsLocale } = useI18n();
const router = useRouter();

/**改变多语言 */
function fnChangeLocale(e: any) {
  changeLocale(e.key);
}

/**引导开始 */
function fnGuideStart() {
  if (getToken()) return;
  bootloaderStart().then(res => {
    if (res.code === RESULT_CODE_SUCCESS && res.data) {
      const token = res.data[TOKEN_RESPONSE_FIELD];
      setToken(token);
    } else {
      router.push({ name: 'Login' });
    }
  });
}

onMounted(() => {
  fnGuideStart();
});
</script>

<template>
  <div class="ne">
    <h2>{{ t('welcome') }}</h2>

    <div class="ne-main">
      <a-space direction="vertical" style="width: 30%">
        <a-button block type="primary" @click="fnToStepName('SystemConfig')">
          {{ t('views.system.quickStart.start') }}
        </a-button>
      </a-space>
    </div>

    <div class="ne-footer">
      <a-space direction="horizontal">
        <a-dropdown trigger="click">
          <a-button size="small" type="default">
            {{ t('i18n') }}
            <DownOutlined />
          </a-button>
          <template #overlay>
            <a-menu @click="fnChangeLocale">
              <a-menu-item v-for="opt in optionsLocale" :key="opt.value">
                {{ opt.label }}
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-space>
    </div>
  </div>
</template>

<style lang="less" scoped>
.ne {
  height: 524px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  &-main {
    flex: 1;
    padding-top: 20%;
    text-align: center;
  }

  &-footer {
    text-align: start;
  }
}
</style>
