<template>
  <div class="block gy-exam-details">
    <QuestionTypeList @onchange="examChangedHandle"></QuestionTypeList>
    <div class="gy-exam-details-charts-container">
      <div>
        <QuestionDifficultyByTypePercentVue :type="typeItem?.id" />
      </div>
    </div>
  </div>
</template>

<script>
import QuestionTypeList from '@/views/statistic/components/QuestionTypeListChart.vue'
import QuestionDifficultyByTypePercentVue from './QuestionDifficultyByTypePercent.vue'
export default {
  components: { QuestionTypeList, QuestionDifficultyByTypePercentVue },
  data: (_) => ({
    typeItem: null
  }),
  methods: {
    /**
     * ExamList组件抛出onchang事件的回调
     */
    examChangedHandle (typeItem) {
      this.typeItem = typeItem
    }
  }
}
</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;
  }
}

</style>
