<template>
  <el-card shadow="hover" class="mt20">
    <template #header>选科测评
    </template>
    <el-row :gutter="20">
      <el-col v-for="test in testResults" :key="test.key" :span="24/testResults.length">
        <test-entry :test-type-key="test.key" :latest-test-result="test.result"
                    @changed="loadSummary"></test-entry>
      </el-col>
    </el-row>
    <test-result :all-test-results="testResults" :selected-majors="summary.selectedList"
                 @changed="loadSummary"></test-result>
  </el-card>
</template>

<script>
import consts from '@/common/mx-const'
import config from '@/common/mx-config'
import TestEntry from '@/views/elective/test/components/test-entry'
import TestResult from '@/views/elective/test/components/test-result'
import { getAllTestMajorResult } from '@/api/webApi/test-major'

export default {
  name: 'test-summary',
  components: { TestResult, TestEntry },
  data() {
    return {
      enumTypes: consts.enum.selectTestType,
      summary: {
        philosophy: {},
        occupation: {},
        knowledge: {},
        selectedList: []
      }
    }
  },
  computed: {
    enumTypeKeys() {
      return Object.keys(this.enumTypes)
    },
    testResults() {
      return this.enumTypeKeys
        .map(key => ({
          key: key,
          result: this.summary[key] || {},
          title: config.roundSelectTestEntryOptions[key].title
        }))
    }
  },
  mounted() {
    this.loadSummary()
  },
  methods: {
    async loadSummary() {
      const res = await getAllTestMajorResult()
      // safety check
      Object.keys(res.data).forEach(key => {
        if (res.data[key] === null) {
          res.data[key] = {}
        }
      })
      this.summary = res.data || {}
    }
  }
}
</script>

<style scoped>

</style>
