<template>
  <el-dialog
    custom-class="statistics-dialog"
    title="试题分析"
    :visible.sync="modalIsShow"
    :modal="true"
    fullscreen
    append-to-body
    @open="getData"
  >
    <div class="statistics">
      <div class="statistics-part">
        <div class="statistics-head">
          <h2>按题型统计</h2>
        </div>
        <div class="statistics-body stat-type-body">
          <div class="stat-type-table">
            <el-table :data="paperQuestionData" border>
              <el-table-column label="题型" prop="sourceDetailName" width="120">
              </el-table-column>
              <el-table-column label="试题数量">
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.questionCount }} (
                    {{
                      scope.row.questionDifficultInfo
                        .map(
                          (item) =>
                            `${item.difficultLevel}：${item.questionCount}`
                        )
                        .join("，")
                    }})
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="stat-type-chart">
            <v-chart
              v-if="paperQuestionChartOption"
              :option="paperQuestionChartOption"
            ></v-chart>
          </div>
        </div>
      </div>

      <div class="statistics-part">
        <div class="statistics-head">
          <h2>按难度统计</h2>
        </div>
        <div class="statistics-body stat-type-body">
          <div class="stat-type-table">
            <el-table :data="paperDifficultData" border>
              <el-table-column label="难度" prop="difficultLevel" width="80">
              </el-table-column>
              <el-table-column label="试题数量">
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.questionCount }} (
                    {{
                      scope.row.questionTypeInfo
                        .map(
                          (item) =>
                            `${item.sourceDetailName}：${item.questionCount}`
                        )
                        .join("，")
                    }})
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="stat-type-chart">
            <v-chart
              v-if="paperDifficultChartOption"
              :option="paperDifficultChartOption"
            ></v-chart>
          </div>
        </div>
      </div>

      <div class="statistics-part">
        <div class="statistics-head">
          <h2>按知识点统计</h2>
        </div>
        <div class="statistics-body">
          <el-table :data="blueData" border :span-method="objectSpanMethod">
            <el-table-column
              label="一级知识点"
              prop="firstProperty"
            ></el-table-column>
            <el-table-column
              label="二级知识点"
              prop="secondProperty"
            ></el-table-column>
            <el-table-column
              v-for="(colval, colIndex) in questionTypeList"
              :key="`${colval}${colIndex}`"
              :prop="colval"
            >
              <template slot-scope="scope">
                <span>{{ scope.row[colval] || "--" }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  questionTypeInfoApi,
  questionDifficultInfoApi,
  courseBlueInfoApi,
} from "../api";

export default {
  name: "StatisticsQuestionDialog",
  props: {
    courseId: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {
      modalIsShow: false,
      paperQuestionData: [],
      paperQuestionChartOption: null,
      paperDifficultData: [],
      paperDifficultChartOption: null,
      blueData: [],
      questionTypeList: [],
      rowspans: [],
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    getData() {
      this.paperQuestionChartOption = null;
      this.paperDifficultChartOption = null;
      this.rowspans = [];
      this.questionTypeList = [];
      this.getQuestionData();
      this.getBlueData();
    },
    async getQuestionData() {
      const qres = await questionTypeInfoApi(this.courseId);
      this.paperQuestionData = qres.data;
      const qData = this.paperQuestionData.map((item) => {
        return {
          value: item.questionCount,
          name: item.sourceDetailName,
        };
      });
      this.paperQuestionChartOption = this.getChartOption(qData);

      const dres = await questionDifficultInfoApi(this.courseId);
      this.paperDifficultData = dres.data;

      const dData = this.paperDifficultData.map((item) => {
        return {
          value: item.questionCount,
          name: item.difficultLevel,
        };
      });
      this.paperDifficultChartOption = this.getChartOption(dData);
    },
    getChartOption(data) {
      const option = {
        color: [
          "#265dff",
          "#14c9c8",
          "#f7ba1f",
          "#722ed1",
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
          itemHeight: 10,
        },
        series: [
          {
            name: "试题数量",
            type: "pie",
            radius: "90%",
            data,
            label: { show: false },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      return option;
    },
    async getBlueData() {
      const res = await courseBlueInfoApi(this.courseId);
      if (!res.data?.length) return;

      const datas = res.data[0].distributeInfo || [];

      const tableData = [];
      let questionTypeList = [];
      const rowspans = [];
      let curRowIndex = 0;
      datas.forEach((item) => {
        const rowCount =
          item.children && item.children.length ? item.children.length : 1;
        rowspans.push([curRowIndex, curRowIndex + rowCount - 1]);
        curRowIndex += rowCount;

        if (item.children && item.children.length) {
          item.children.forEach((elem) => {
            const row = {
              id: `${item.propertyId}_${elem.propertyId}`,
              firstProperty: item.propertyName,
              secondProperty: elem.propertyName,
            };

            if (
              elem.distributeByQuestionTypeList &&
              elem.distributeByQuestionTypeList.length
            ) {
              elem.distributeByQuestionTypeList.forEach((source) => {
                row[source.sourceDetailName] = source.questionDifficultInfo
                  .map(
                    (item) => `${item.difficultLevel}：${item.questionCount}`
                  )
                  .join("，");
              });

              if (!questionTypeList.length) {
                questionTypeList = elem.distributeByQuestionTypeList.map(
                  (source) => source.sourceDetailName
                );
              }
            }

            tableData.push(row);
          });
          return;
        }

        const row = {
          id: `${item.propertyId}`,
          firstProperty: item.propertyName,
          secondProperty: "",
        };

        if (
          item.distributeByQuestionTypeList &&
          item.distributeByQuestionTypeList.length
        ) {
          item.distributeByQuestionTypeList.forEach((source) => {
            row[source.sourceDetailName] = source.questionDifficultInfo
              .map((item) => `${item.difficultLevel}：${item.questionCount}`)
              .join("，");
          });

          if (!questionTypeList.length) {
            questionTypeList = item.distributeByQuestionTypeList.map(
              (source) => source.sourceDetailName
            );
          }
        }
        tableData.push(row);
      });

      this.questionTypeList = questionTypeList;
      this.blueData = tableData;
      this.rowspans = rowspans;
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        for (let span of this.rowspans) {
          if (span[0] == rowIndex) {
            return {
              rowspan: span[1] - span[0] + 1,
              colspan: 1,
            };
          } else if (span[0] < rowIndex && span[1] >= rowIndex) {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      }
    },
  },
};
</script>
