<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"
              :proposal-info="proposalInfo"
              :default-filters="defaultFilters"
              @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, provide } from 'vue'
import { useRoute } from 'vue-router'
import type { Step, ProposalInfo } from './api'
import { fetchSteps } from './api'
import { getProgressPrediction, parseBillId, transformProposalInfo, generateDefaultFilters } from '@/api/bill/billHome.js'
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 route = useRoute()

// 步骤列表数据
const steps = ref<Step[]>([])
// 当前步骤
const currentStep = ref(1)
// 加载状态
const loading = ref(true)
// 提案信息
const proposalInfo = ref<ProposalInfo | null>(null)
// 默认筛选条件
const defaultFilters = ref<Record<string, string[]>>({})
// 法案ID
const billId = ref('')

// 向子组件提供提案信息
provide('proposalInfo', proposalInfo)
provide('defaultFilters', defaultFilters)

// 页面初始化时加载数据
onMounted(async () => {
  try {
    // 获取路由参数中的 id
    const routeId = route.params.id as string || '1'
    billId.value = parseBillId(routeId)
    
    // 并行加载步骤数据和提案信息
    const [stepsData, predictionData] = await Promise.all([
      fetchSteps(),
      getProgressPrediction(billId.value).catch(err => {
        console.error('  获取预测数据失败:', err)
        return null
      })
    ])
    
    steps.value = stepsData
    
    if (predictionData) {
      // 转换 API 数据为组件所需格式
      proposalInfo.value = transformProposalInfo(predictionData)
      // 根据提案信息生成默认筛选条件
      if (proposalInfo.value) {
        defaultFilters.value = generateDefaultFilters(proposalInfo.value)
      }
    }
  } 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;
  padding-bottom: 32px;
  box-sizing: border-box;
}

.content-card {
  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>
