<template>
  <div class="block gy-exam-details" >
    <ExamList @onchange="examChangedHandle"></ExamList>
    <div class="gy-exam-details-charts-container" v-show="examItem">
      <div class="start-end-time">
        <div class="time-item" v-if="examItem?.examStartTime">
          <div class="tag">始</div>
          {{ examItem?.examStartTime }}
        </div>
        <div class="time-item" v-if="examItem?.examStartTime">
          <div class="tag">末</div>
          {{ examItem?.examEndTime }}
        </div>
      </div>
      <div><ExamDetailsScoreOrderTower :exam="examItem?.id"></ExamDetailsScoreOrderTower></div>
      <div><ExamDetailsScorePassPercentVue :exam="examItem?.id"/></div>
      <div><ExamDetailsJoinStudentCountPercent :exam="examItem?.id"/></div>
      <div><ExamDetailsQuestionsScorePercentVue :exam="examItem?.id"/></div>
      <div><ExamDetailsQuestionsCountPercent :exam="examItem?.id"/></div>
      <div><ExamDetailsMistakesPercent :exam="examItem?.id"/></div>
    </div>
    <div class="gy-exam-details-charts-container" style="display:flex;align-items:center;justify-content:center;padding:5px" v-show="!examItem">
      <el-empty description="请先选择考试"></el-empty>
    </div>
  </div>
</template>

<script>
import ExamList from '@/views/statistic/components/ExamListChart.vue'
import ExamDetailsScoreOrderTower from './ExamDetailsScoreOrderTower.vue'
import ExamDetailsScorePassPercentVue from './ExamDetailsScorePassPercent.vue'
import ExamDetailsQuestionsScorePercentVue from './ExamDetailsQuestionsScorePercent.vue'
import ExamDetailsQuestionsCountPercent from './ExamDetailsQuestionsCountPercent.vue'
import ExamDetailsJoinStudentCountPercent from './ExamDetailsJoinStudentCountPercent.vue'
import ExamDetailsMistakesPercent from './ExamDetailsMistakesPercent.vue'
export default {
  components: { ExamList, ExamDetailsScoreOrderTower, ExamDetailsScorePassPercentVue, ExamDetailsQuestionsScorePercentVue, ExamDetailsQuestionsCountPercent, ExamDetailsJoinStudentCountPercent, ExamDetailsMistakesPercent },
  data: (_) => ({
    examItem: null
  }),
  methods: {
    /**
     * ExamList组件抛出onchang事件的回调
     */
    examChangedHandle (examItem) {
      this.examItem = examItem
    }
  }
}
</script>

<style lang="scss" scoped>
.gy-exam-details {
  display: flex;
  .gy-exam-details-charts-container {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    border:1px solid #ccc;
    border-radius: 4px;
    margin-left: 10px;
  }
}
.start-end-time {
  display: flex;
  flex-direction: column;
  .time-item {
    display: flex;
    align-items: center;
    margin-top: 10px;
    .tag {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 2px solid $--color-primary;
      color: $--color-primary;
      margin-right: 10px;
    }

  }
}

</style>
