<template>
  <div class="app-container">
    <el-card>
      <mx-condition :query-params="queryParams" :require-fields="requireFields"
                    @query="handleQuery" @invalid="handleInvalid"></mx-condition>
    </el-card>
    <el-card v-if="electiveStatus" class="mt20">
      <template #header>
        <elective-generation-steps v-model="activeStep" :generation="generation"></elective-generation-steps>
      </template>
      <elective-generation-master :generation="generation"></elective-generation-master>
    </el-card>
    <evaluation-empty v-else class="mt20"></evaluation-empty>
  </div>
</template>

<script>
import Vue from 'vue'
import config from '@/common/mx-config'
import { getElectiveStatus, getElectiveSummary } from '@/api/webApi/elective/generation'
import MxCondition from '@/components/MxCondition/mx-condition'
import ElectiveGenerationSteps from '@/views/elective/generation/components/elective-generation-steps'
import ElectiveGenerationMaster from '@/views/elective/generation/components/elective-generation-master'

export default {
  name: 'generation-index',
  components: { ElectiveGenerationMaster, ElectiveGenerationSteps, MxCondition },
  data() {
    return {
      // query
      queryParams: {
        year: '',
        roundId: ''
      },
      requireFields: ['year', 'roundId'],
      // api data
      electiveStatus: null,
      electiveSummary: [],
      // local data
      activeStep: '',
      options: config.electiveGenerationOptions
    }
  },
  computed: {
    current() {
      /// 当前进程代，可能没有值
      return this.electiveStatus?.currentGeneration
    },
    currentOpt() {
      /// 当前进程代对应的配置项，可能没有值
      return Object.values(this.options).find(opt => opt.value == this.current)
    },
    activeOpt() {
      /// 当前选中的进程代，可能没有值
      return this.options[this.activeStep]
    },
    active() {
      return this.activeOpt?.value
    },
    generation() {
      return {
        // generation key value
        options: this.options,
        current: this.current,
        currentOpt: this.currentOpt,
        active: this.active,
        activeOpt: this.activeOpt,
        /// root data inject
        summary: this.electiveSummary,
        status: this.electiveStatus
      }
    }
  },
  methods: {
    handleInvalid() {
      this.electiveStatus = null
      this.electiveSummary = []
    },
    async handleQuery() {
      const resStatus = await getElectiveStatus(this.queryParams)
      this.electiveStatus = resStatus.data
      const resSummary = await getElectiveSummary(this.queryParams)
      this.electiveSummary = resSummary.data
      debugger
      window.electiveVue = this
      console.log('query completed')
    }
  }
}
</script>

<style scoped>

</style>
