<template>
  <el-card shadow="hover">
    <template #header>
      <div class="fx-row fx-bet-cen">
        <div>{{ testTypeOptions.title }}</div>
        <div>
          <el-button v-if="latestTestResult.selectCompleted" type="primary" plain size="small" round
                     @click="handleReport">查看报告
          </el-button>
          <el-button v-else-if="latestTestResult.testCompleted" type="primary" plain size="small" round
                     @click="handleReport">继续测评
          </el-button>
          <el-button v-else type="primary" plain size="small" round @click="handlePaper(false)">进入测评</el-button>
          <el-button type="warning" plain size="small" round @click="handleHistory">查看历史</el-button>
        </div>
      </div>
    </template>
    <div>{{ testTypeOptions.description }}</div>
    <div v-if="latestTestResult.selectCompleted" class="fx-row fx-cen-cen mt20">
      <el-button @click="handlePaper(true)">重新测评</el-button>
    </div>

    <!--  报告  -->
    <el-drawer :visible.sync="reportVisible" :title="testTypeOptions.title+'报告'" size="60%" append-to-body>
      <test-report v-if="reportVisible" :category="testTypeKey" :source="latestTestResult"
                   @changed="$emit('changed')"></test-report>
    </el-drawer>

    <!--  历史  -->
    <el-drawer :visible.sync="historyVisible" :title="testTypeOptions.title+'历史'" size="70%" append-to-body>
      <test-history v-if="historyVisible" :category="testTypeKey" :test-type="testType"
                    @changed="$emit('changed')"></test-history>
    </el-drawer>
  </el-card>
</template>

<script>
import transferMixin from '@/components/mx-transfer-mixin'
import config from '@/common/mx-config'
import consts from '@/common/mx-const'
import TestReport from '@/views/elective/test/components/test-report'
import TestHistory from '@/views/elective/test/components/test-history'

export default {
  components: { TestHistory, TestReport },
  // 学生选科 - 测评入口
  mixins: [transferMixin],
  name: 'test-entry',
  props: {
    testTypeKey: {
      type: String,
      default: ''
    },
    latestTestResult: {
      type: Object,
      default: () => ({
        testCompleted: false,
        selectCompleted: false
      })
    }
  },
  data() {
    return {
      reportVisible: false,
      historyVisible: false
    }
  },
  computed: {
    testType() {
      return consts.enum.selectTestType[this.testTypeKey] || ''
    },
    testTypeOptions() {
      return config.roundSelectTestEntryOptions[this.testTypeKey] || {}
    },
    entryText() {
      if (this.latestTestResult.selectCompleted) return '查看报告'
      if (this.latestTestResult.testCompleted) return '继续测评'
      return '进入测评'
    }
  },
  mounted() {

  },
  methods: {
    handleHistory() {
      this.historyVisible = true
    },
    handleReport() {
      this.reportVisible = true
    },
    handlePaper(confirm) {
      if (confirm) {
        this.$confirm(`重新测评将刷新现有'${this.testTypeOptions.title}'测评结果`).then(_ => {
          this.goPaper()
        })
      } else {
        this.goPaper()
      }
    },
    goPaper() {
      const nextData = { testType: this.testType, category: this.testTypeKey }
      this.transferTo('/elective/test/elective-paper', nextData)
    }
  }
}
</script>

<style scoped>

</style>
