<template>
  <div class="app-container" v-loading="loading">
    <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">
        <template #header-prefix>
          <el-button circle icon="el-icon-refresh" @click="handleQuery" class="mr30"></el-button>
        </template>
      </elective-generation-master>
    </el-card>
    <evaluation-empty v-else class="mt20"></evaluation-empty>
  </div>
</template>

<script>
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'
import MxGroupTranslateMixin from '@/components/Cache/modules/mx-select-translate-mixin'

export default {
  mixins: [MxGroupTranslateMixin],
  name: 'ElectiveGenerationIndex',
  components: { ElectiveGenerationMaster, ElectiveGenerationSteps, MxCondition },
  data() {
    return {
      // query
      loading: false,
      queryParams: {
        year: '',
        roundId: ''
      },
      requireFields: ['year', 'roundId'],
      // api data
      electiveStatus: null,
      electiveSummary: [],
      // local data
      activeStep: '',
      options: config.electiveGenerationOptions,
      tableHiddenGenerations: []
    }
  },
  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
    },
    roundGroups() {
      return this.electiveStatus?.roundGroups.map(rg => ({
        groupId: rg.groupId,
        groupName: this.translateGroup(rg.groupId),
        expectedCount: rg.personCount
      }))
    },
    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,
        roundGroups: this.roundGroups,
        /// local display setting
        hiddenGenerations: this.tableHiddenGenerations
      }
    }
  },
  provide() {
    return {
      refreshData: this.handleQuery
    }
  },
  methods: {
    handleInvalid() {
      this.activeStep = ''
      this.electiveStatus = null
      this.electiveSummary = []
    },
    async handleQuery() {
      this.loading = true
      try {
        const resStatus = await getElectiveStatus(this.queryParams)
        this.electiveStatus = resStatus.data
        const resSummary = await getElectiveSummary(this.queryParams)
        this.electiveSummary = resSummary.data
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>

</style>
