<template>
  <div class="fx-column mt20">
    <el-steps simple finish-status="success" :active="activeStep">
      <el-step v-for="test in allTestResults" :key="test.title" :title="test.title" :status="test.status"></el-step>
    </el-steps>
    <div v-if="unfinishedText" class="f-yellow mt15">
      {{ unfinishedText }}
    </div>
    <div v-else class="fx-row fx-bet-cen mt15">
      <div class="fx-1">
        <span class="f-666">您可以从测评选择的专业分类中进一步选择{{ selectLimit }}个自己喜欢的专业：</span>
      </div>
      <el-button type="primary" @click="majorPickerDisabled=false" :disabled="!!unfinishedText">
        {{ (selectedMajors.length ? '更改专业' : '选择专业') }}
      </el-button>
    </div>
    <el-divider>选科测评的专业选择仅作后续<span class="f-primary pointer">意向选科</span>参考使用</el-divider>
    <test-major-picker v-if="!majorPickerDisabled||selectedCodes.length"
                       :major-tree="dynamicMajorTree" :selected-codes="selectedCodes"
                       :select-limit="selectLimit" :disabled="majorPickerDisabled"
                       @submit="handleMajorSubmit" @cancel="majorPickerDisabled=true"></test-major-picker>
  </div>
</template>

<script>
import TestMajorPicker from '@/views/elective/test/components/test-major-picker'
import {
  getSelectMajorSubjectTree,
  saveUserSelectedMajor
} from '@/api/webApi/test-major'
import CacheMixin from '@/components/Cache/mx-cache-mixin'

export default {
  mixins: [CacheMixin],
  name: 'test-result',
  components: { TestMajorPicker },
  props: {
    allTestResults: {
      type: Array,
      default: () => []
    },
    selectedMajors: {
      type: Array,
      default: () => []
    },
    selectLimit: {
      type: Number,
      default: 7
    }
  },
  data() {
    return {
      majorPickerDisabled: true,
      majorTree: [],
      fullMajorTree: []
    }
  },
  computed: {
    activeStep() {
      let active = 0
      for (const test of this.allTestResults) {
        if (test.result.selectCompleted) {
          active += 1
        } else {
          break
        }
      }
      return active
    },
    unfinishedTest() {
      return this.allTestResults
        .filter(test => !test.result.selectCompleted)
        .map(test => test.title)
    },
    unfinishedText() {
      if (!this.unfinishedTest.length) return ''
      const txtPrefix = `请先完成${this.unfinishedTest.join('、')}，`
      const txtSuffix = this.selectedMajors.length ? '可以更改专业选择' : '再进行专业选择'
      return txtPrefix + txtSuffix
    },
    selectedCodes() {
      return this.selectedMajors?.map(m => m.majorCode) || []
    },
    dynamicMajorTree() {
      // 因为major树会由最新测评结果计算，如果在学生测评期间，major树可能显示不了某些历史选择的专业
      return this.majorPickerDisabled ? this.fullMajorTree : this.majorTree
    }
  },
  watch: {
    'allTestResults': {
      immediate: false,
      handler: function() {
        this.$nextTick(() => this.loadMajorTree())
      }
    }
  },
  mounted() {
    this.loadFullMajorTree()
  },
  methods: {
    loadFullMajorTree() {
      this.getAllMajorSubjectTreeByCache().then(tree => this.fullMajorTree = tree)
    },
    loadMajorTree() {
      getSelectMajorSubjectTree().then(res => {
        this.majorTree = res.data
      })
    },
    handleMajorSubmit(commit) {
      saveUserSelectedMajor({
        majorCode: commit.toString()
      }).then(() => {
        this.msgSuccess('保存成功')
        this.majorPickerDisabled = true
      }).finally(() => {
        // 无论成功与否都外抛事件进行刷新
        this.$emit('changed')
      })
    }
  }
}
</script>

<style scoped>

</style>
