<template>
  <div class="app-container">
    <PageHeader />
    <main class="layout-main-center">
      <div class="content-card background-as-card">
        <StepSidebar
          v-if="!loading && steps.length > 0"
          :steps="steps"
          :current-step="currentStep"
        />
        <div class="content-area">
          <template v-if="!loading">
            <Step1FilterCondition
              v-if="currentStep === 1"
              @next="goToNextStep"
            />
            <Step2FilterBills
              v-else-if="currentStep === 2"
              @previous="goToPreviousStep"
              @next="goToNextStep"
            />
            <Step3PredictionAnalysis
              v-else-if="currentStep === 3"
              @prev="goToPreviousStep"
              @repredict="handleRepredict"
            />
          </template>
          <div v-else class="loading-container">
            <span class="text-tip-2 text-primary-50-clor">加载中...</span>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { Step } from './api'
import { fetchSteps } from './api'
import PageHeader from './components/PageHeader.vue'
import StepSidebar from './components/StepSidebar.vue'
import Step1FilterCondition from './components/Step1FilterCondition.vue'
import Step2FilterBills from './components/Step2FilterBills.vue'
import Step3PredictionAnalysis from './components/Step3PredictionAnalysis.vue'

// 步骤列表数据
const steps = ref<Step[]>([])
// 当前步骤
const currentStep = ref(1)
// 加载状态
const loading = ref(true)

// 页面初始化时加载数据
onMounted(async () => {
  try {
    steps.value = await fetchSteps()
  } finally {
    loading.value = false
  }
})

// 下一步
function goToNextStep() {
  if (currentStep.value < steps.value.length) {
    currentStep.value++
  }
}

// 上一步
function goToPreviousStep() {
  if (currentStep.value > 1) {
    currentStep.value--
  }
}

// 重新预测：返回第一步
function handleRepredict() {
  currentStep.value = 1
}
</script>

<style scoped>
.app-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-black-2);
}

.layout-main-center {
  width: 1600px;
  flex: 1;
  /* margin: 0 auto; */
  padding-bottom: 32px;
  box-sizing: border-box;
}

.content-card {
  /* height: 903px; */
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-10);
  border: 1px solid var(--border-black-5);
}

.content-area {
  flex: 1;
  padding: 10px 26px 29px 25px;
  overflow: auto;
}

.loading-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
