<template>
  <div class="step-container">
    <div v-if="loading" class="loading-wrapper flex-display-center">
      <span class="text-tip-2 text-primary-50-clor">加载中...</span>
    </div>
    <template v-else>
      <div class="content-wrapper">
        <ProposalInfoSection v-if="proposalInfo" :info="proposalInfo" />
        <FilterSection
          :fields="filterFields"
          @update:fields="filterFields = $event"
          @set-as-current="handleSetAsCurrent"
        />
      </div>
      <ActionButtons
        @reset="handleReset"
        @next="handleNext"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { ProposalInfo, FilterField } from '../api'
import { fetchProposalInfo, fetchFilterFields } from '../api'
import ProposalInfoSection from './ProposalInfoSection.vue'
import FilterSection from './FilterSection.vue'
import ActionButtons from './ActionButtons.vue'

const emit = defineEmits<{
  next: []
}>()

// 提案信息
const proposalInfo = ref<ProposalInfo | null>(null)
// 筛选字段列表
const filterFields = ref<FilterField[]>([])
// 加载状态
const loading = ref(true)

// 页面初始化时加载数据
onMounted(async () => {
  try {
    const [info, fields] = await Promise.all([
      fetchProposalInfo(),
      fetchFilterFields()
    ])
    proposalInfo.value = info
    filterFields.value = fields
  } finally {
    loading.value = false
  }
})

// 重置所有筛选条件
function handleReset() {
  filterFields.value = filterFields.value.map(field => ({
    ...field,
    selectedValues: []
  }))
}

// 设置为当前提案
function handleSetAsCurrent() {
  console.log('设置为当前提案')
}

// 下一步
function handleNext() {
  emit('next')
}
</script>

<style scoped>
.step-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.loading-wrapper {
  flex: 1;
}

.content-wrapper {
  flex: 1;
  overflow: auto;
}
</style>
