<template>
  <div class="fx-column">
    <el-steps :active="activeStep" simple>
      <el-step v-for="(step, idx) in steps" :key="idx" :title="step.title" :icon="step.icon"></el-step>
    </el-steps>
    <el-card shadow="never" style="border: 0">
      <el-divider class="f-999">{{ steps[activeStep].description }}</el-divider>
      <round-setting-score ref="step_0" v-if="currentStep.key=='step_0'"
                           :setting-model="settingModel"></round-setting-score>
      <round-setting-weight ref="step_1" v-if="currentStep.key=='step_1'"
                            :setting-model="settingModel" @resetStep="activeStep=0"></round-setting-weight>
      <round-setting-group-models ref="step_2" v-if="currentStep.key=='step_2'"
                                  :setting-model="settingModel"></round-setting-group-models>
      <round-setting-publish ref="step_3" v-if="currentStep.key=='step_3'"
                             :setting-model="settingModel" :year-options="yearOptions"></round-setting-publish>
      <div class="fx-row fx-end-cen mt20 mb20">
        <el-button v-if="activeStep>0" @click="handlePrevClick">上一步</el-button>
        <el-button v-if="activeStep<steps.length-1" type="primary" @click="handleNextClick">下一步</el-button>
        <el-button v-if="activeStep==steps.length-1" type="primary" @click="handleStepCompleted">完成</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import RoundSettingScore from '@/views/elective/publish/components/steps/round-setting-score'
import RoundSettingWeight from '@/views/elective/publish/components/steps/round-setting-weight'
import RoundSettingGroup from '@/views/elective/publish/components/steps/round-setting-group'
import RoundSettingPublish from '@/views/elective/publish/components/steps/round-setting-publish'
import RoundSettingGroupModels from '@/views/elective/publish/components/steps/round-setting-group-models'
import config from '@/common/mx-config'

export default {
  name: 'round-setting-steps',
  components: {
    RoundSettingGroupModels,
    RoundSettingPublish,
    RoundSettingGroup,
    RoundSettingWeight,
    RoundSettingScore
  },
  props: {
    settingModel: {
      type: Object,
      default: _ => ({})
    },
    defaultActiveStep: {
      type: Number,
      default: 0
    },
    yearOptions: {
      type: Array,
      default: _ => []
    }
  },
  data() {
    return {
      activeStep: this.defaultActiveStep
    }
  },
  computed: {
    steps() {
      const stepConfig = config.roundSettingStep
      return this.settingModel.importWeight?.length > 0 ?
        [stepConfig.score, stepConfig.scoreWeight, stepConfig.group, stepConfig.groupLimit] :
        [stepConfig.score, stepConfig.group, stepConfig.groupLimit]
    },
    currentStep() {
      return this.steps[this.activeStep]
    }
  },
  methods: {
    handlePrevClick() {
      if (this.activeStep == 0) return
      this.activeStep = this.activeStep - 1
    },
    handleNextClick() {
      if (this.activeStep == this.steps.length - 1) return
      const refSub = this.$refs[this.steps[this.activeStep].key]
      if (!refSub) return
      refSub.shouldGoNext().then(_ => this.activeStep = this.activeStep + 1)
    },
    handleStepCompleted() {
      this.$refs['step_3'].shouldGoNext().then(() => {
        this.$emit('do-post', this.settingModel)
      })
    }
  }
}
</script>

<style scoped>

</style>
