<template>
  <div class="elective-ai-container">
    <el-divider class="new-page"><h1>{{ simulateActive.title }}AI分析</h1></el-divider>
    <index-card :title="`${simulateActive.title}AI分析表`">
      <elective-ai-table :generation="generation" :optional-majors="inheritOptionalMajors" readonly></elective-ai-table>
    </index-card>
    <index-card :title="`${simulateActive.title}AI分析报告`" class="mt20">
      <elective-ai-report :generation="generation"></elective-ai-report>
    </index-card>
  </div>
</template>

<script>
import RoundSelect from '@/views/system/user/profile/round-select'
import ElectiveAiTable from '@/views/elective/select/components/elective-ai-table'
import ElectiveAiReport from '@/views/elective/select/components/elective-ai-report'
import IndexCard from '@/views/index/components/index-card'

export default {
  name: 'elective-ai-analysis-step',
  components: { IndexCard, ElectiveAiReport, ElectiveAiTable },
  extends: RoundSelect, // NOTE: 这里也扩展了RoundSelect，是想以最小的代码成本，制造generation的副本
  props: ['simulateActive', 'inheritGeneration', 'inheritOptionalMajors'],
  data() {
    return {
      autoLoad: false, // NOTE: 重写RoundSelect防止加载完整数据 !!important
      selectObj: this.inheritGeneration.status,
      activeStep: this.simulateActive.key,
      generationModels: this.inheritGeneration.models
    }
  }
}
</script>

<style scoped>
/deep/ .elective-ai-container > .el-divider {
  margin: 40px 0;
}

h1 {
  font-size: 36px;
  margin: 0;
}
</style>
