<template>
  <div class="mistake-analysis part-box part-box-pad">
    <div class="part-box-head">
      <h3>
        <span>{{ title }}</span>
      </h3>
      <!-- modules -->
      <div class="module-select" v-if="mistakeList.length">
        <div
          v-for="mod in mistakeList"
          :key="mod.id"
          :class="[
            'module-select-item',
            {
              'module-select-item-act': mod.id === curMistake.id
            }
          ]"
          @click="mistakeChange(mod)"
        >
          {{ mod.moduleName }}
        </div>
      </div>
    </div>
    <div class="chart-box chart-ksctnd">
      <v-chart
        :option="curMistake.chartOption"
        v-if="curMistake.chartOption"
      ></v-chart>
    </div>
    <p class="report-tips" v-if="curMistake.moduleName">
      {{ curMistake.moduleName }}模块：<b>{{ curMistake.dimensionList }}</b>
    </p>
  </div>
</template>

<script>
import { getStudentErrorOption } from "../../chartOption";

export default {
  name: "mistake-analysis",
  props: {
    title: {
      type: String,
      default: "考生错题难度分析"
    },
    datas: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      mistakeList: [],
      curMistake: { chartOption: null }
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const difModules = [
        {
          name: "知识",
          labels: "dimensionList",
          serialLabel: "knowledgeDimension"
        },
        {
          name: "能力",
          labels: "abilityDimensionList",
          serialLabel: "abilityDimension"
        }
      ];
      const validList = difModules.filter(
        item => this.datas[item.labels] && this.datas[item.labels].length
      );
      if (!validList.length) {
        const dataList = this.datas.cellList
          .filter(elem => elem.paperStructJudge !== "ALL_CORRECT")
          .map(elem => {
            return {
              name: `${elem.mainNumber}-${elem.subNumber}`,
              detailName: elem.questionName,
              value: (elem.scoreRate / 100).toFixed(4) * 1,
              knowleges: []
            };
          });
        this.curMistake.chartOption = getStudentErrorOption(dataList);
        return;
      }

      this.mistakeList = difModules
        .filter(
          item => this.datas[item.labels] && this.datas[item.labels].length
        )
        .map((item, index) => {
          const dataList = this.datas.cellList
            .filter(elem => elem.paperStructJudge !== "ALL_CORRECT")
            .map(elem => {
              return {
                name: `${elem.mainNumber}-${elem.subNumber}`,
                detailName: elem.questionName,
                value: (elem.scoreRate / 100).toFixed(4) * 1,
                knowleges: elem[item.serialLabel]
                  ? elem[item.serialLabel].split(",")
                  : []
              };
            });
          const dimensionList = this.datas[item.labels]
            .map(elem => `【${elem.dimensionCode}-${elem.dimensionName}】`)
            .join("，");
          return {
            id: `dimension${index}`,
            moduleName: item.name,
            dimensionList,
            chartOption: getStudentErrorOption(dataList)
          };
        });
      this.mistakeChange(this.mistakeList[0]);
    },
    mistakeChange(mod) {
      this.curMistake = mod;
    }
  }
};
</script>
