<template>
  <div class="part-box part-box-pad difficult-level-analysis">
    <div class="part-box-head">
      <h3>
        <span>各难度水平题目上的作答分析</span>
        <el-popover
          popper-class="el-popper-dark"
          placement="right-start"
          width="300"
          trigger="hover"
        >
          <i class="el-icon-question" slot="reference"></i>
          <div>
            <p>
              难题：难度值在[0-0.3）之间；中等难度题：难度值在[0.3-0.7)之间；容易题：难度值在0.7以上。
            </p>
          </div>
        </el-popover>
      </h3>
      <!-- modules -->
      <div class="module-select">
        <div
          v-for="mod in dataList"
          :key="mod.id"
          :class="[
            'module-select-item',
            {
              'module-select-item-act': mod.id === curData.id
            }
          ]"
          @click="modChange(mod)"
        >
          {{ mod.paperType }}
        </div>
      </div>
    </div>
    <div class="chart-box chart-ndspzd">
      <v-chart
        :option="curData.chartOption"
        v-if="curData.chartOption"
      ></v-chart>
    </div>
  </div>
</template>

<script>
import { schoolTeacherQuestionAnswerView } from "../../api";
import { getDifficultyAnalyseOption } from "../../chartOption";

export default {
  name: "difficult-level-analysis",
  data() {
    return {
      filter: {},
      dataList: [],
      curData: {}
    };
  },
  methods: {
    initData(filter) {
      this.filter = { ...filter };
      this.filter.collegeId = filter.inspectCollegeId;
      this.getData();
    },
    async getData() {
      this.curData.chartOption = null;
      if (
        !this.filter.examId ||
        !this.filter.semesterId ||
        !this.filter.courseCode
      )
        return;

      let datas = {
        ...this.filter
      };
      const data = await schoolTeacherQuestionAnswerView(datas);
      const dimensionConfig = [
        { name: "学院", param: "colAvgScoreRate" },
        { name: "我的课堂", param: "teaAvgScoreRate" }
      ];
      this.dataList = data.questionInfoList.map((item, index) => {
        const chartData = item.cellList.map(elem => {
          return {
            xaxisLabel: `${elem.interpret}题(${elem.count}道)`,
            list: dimensionConfig.map(config => {
              return {
                legendLabel: config.name,
                num: elem[config.param]
              };
            })
          };
        });

        return {
          id: `difficulty${index}`,
          paperType: item.paperType,
          chartOption: getDifficultyAnalyseOption(chartData)
        };
      });
      if (this.curData.paperType) {
        const curMode = this.dataList.find(
          mod => mod.paperType === this.curData.paperType
        );
        this.modChange(curMode || this.dataList[0]);
      } else {
        this.modChange(this.dataList[0]);
      }
    },
    modChange(mod) {
      this.curData = mod || {};
    }
  }
};
</script>
