<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">
          <el-table :data="paperData.data" border>
            <el-table-column
              v-for="(colval, colIndex) in paperData.head"
              :key="colIndex"
            >
              <template slot="header">
                <span style="margin-left: 10px">{{ colval }}</span>
              </template>
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row[colIndex] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </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="paperQuestionData" border>
              <el-table-column label="题型" prop="paperDetailName" 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.paperDetailInfo
                        .map(
                          (item) =>
                            `${item.paperDetailName}：${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="paperData3.data"
            style="width: 100%"
            border
            :span-method="objectSpanMethod3"
          >
            <el-table-column
              v-for="(colval, colIndex) in headFirst3"
              :key="`first${colIndex}`"
            >
              <template slot="header">
                <span style="margin-left: 10px">{{ colval }}</span>
              </template>
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row[colIndex] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(colval, colIndex) in headSecond3"
              :key="`second${colIndex}`"
            >
              <template slot="header">
                <span style="margin-left: 10px">{{ colval }}</span>
              </template>
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row[colIndex + 2]
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  paperBaseInfoApi,
  paperQuestionTypeInfoApi,
  paperDifficultTypeInfoApi,
  paperBlueInfoApi,
} from "../api";
export default {
  name: "PaperStructInfo",
  props: {
    paperId: {
      type: [String, Number],
      default: "",
    },
    courseId: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {
      modalIsShow: false,
      paperData: {
        tags: [],
        head: [],
      },
      type: "count",
      paperQuestionData: [],
      paperQuestionChartOption: null,
      paperDifficultData: [],
      paperDifficultChartOption: null,
      paperData3: { head: [], data: [] },
      headFirst3: [],
      headSecond3: [],
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getData() {
      const res = await paperBaseInfoApi(this.paperId);
      this.paperData = res.data;
      this.getPaperData();
      this.getPaperData3();
    },
    async getPaperData() {
      const qres = await paperQuestionTypeInfoApi({
        paperId: this.paperId,
        rootOrgId: this.$store.state.user.rootOrgId,
      });
      this.paperQuestionData = qres.data;
      const qData = this.paperQuestionData.map((item) => {
        return {
          value: item.questionCount,
          name: item.paperDetailName,
        };
      });
      this.paperQuestionChartOption = this.getChartOption(qData);

      const dres = await paperDifficultTypeInfoApi({
        paperId: this.paperId,
        rootOrgId: this.$store.state.user.rootOrgId,
      });
      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: "Access From",
            type: "pie",
            radius: "90%",
            data,
            label: { show: false },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      return option;
    },
    async getPaperData3() {
      // if (!this.coursePropertyId) return;
      const res = await paperBlueInfoApi({
        paperId: this.paperId,
        courseId: this.courseId,
        // coursePropertyId: this.coursePropertyId,
        rootOrgId: this.$store.state.user.rootOrgId,
      });
      this.paperData3 = res.data;
      this.headFirst3 = this.paperData3.head.slice(0, 2);
      this.headSecond3 = this.paperData3.head.slice(2);
    },
    objectSpanMethod3({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        for (let span of this.paperData3.rowspan) {
          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>
