<template>
  <div class="question-type-statistics">
    <div class="part-box page-content-main">
      <div class="part-box-header">
        <h2 class="part-box-title">{{ courseName }}</h2>
        <el-button type="danger" plain @click="goBack">返回</el-button>
      </div>

      <div class="part-box" style="flex: 1; overflow: auto">
        <el-tabs v-model="curType" type="card">
          <el-tab-pane label="基础构成" name="base">
            <el-table v-if="curType === 'base'" key="base" :data="baseDataList">
              <el-table-column label="题型" prop="sourceDetailName">
              </el-table-column>
              <el-table-column
                label="试题数量"
                prop="questionDifficultInfoCont"
              ></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="蓝图分布" name="blue">
            <div>
              <!-- <el-form v-if="curType === 'blue'">
                <el-form-item label="可选属性">
                  <el-select v-model="curProperty" @change="propertyChange">
                    <el-option
                      v-for="item in blueDataList"
                      :key="item.name"
                      :value="item.name"
                      :label="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form> -->
              <el-table
                v-if="curType === 'blue'"
                key="blue"
                :data="curBlueDataList"
                :span-method="spanMethod"
              >
                <el-table-column label="蓝图属性" width="520" fixed="left">
                  <el-table-column
                    label="一级属性"
                    :width="propertyColWidth"
                    prop="firstPropertyName"
                  ></el-table-column>
                  <el-table-column
                    label="二级属性"
                    :width="propertyColWidth"
                    prop="secondPropertyName"
                  ></el-table-column>
                </el-table-column>
                <el-table-column label="题型">
                  <el-table-column
                    v-for="item in blueQtypes"
                    :key="item"
                    :label="item"
                    :prop="item"
                    min-width="220"
                  ></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {
  questionDistributionStatisticsApi,
  questionPropertyDistributionStatisticsApi,
} from "../../api";
export default {
  name: "QuestionTypeStatistics",
  computed: {
    propertyColWidth() {
      return this.blueQtypes.length ? 260 : undefined;
    },
  },
  data() {
    return {
      courseId: "",
      courseName: "",
      filter: {
        courseId: "",
      },
      types: [
        {
          name: "基础构成",
          code: "base",
        },
        {
          name: "蓝图分布",
          code: "blue",
        },
      ],
      curType: "base",
      baseDataList: [],
      blueDataList: [],
      blueQtypes: [],
      curProperty: "",
      curBlueDataList: [],
    };
  },
  created() {
    this.courseId = this.$route.query.courseId;
    this.courseName = this.$route.query.courseName;
    this.filter.courseId = this.$route.query.courseId;
    this.getData();
  },
  watch: {
    curType() {
      this.getData();
    },
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    // toSwitch(item) {
    //   this.curType = item.code;
    //   this.getData();
    // },
    spanMethod({ row, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan || 0,
          colspan: 1,
        };
      }
    },
    getData() {
      if (this.curType === "base") {
        this.getBaseData();
      } else {
        this.getBlueData();
      }
    },
    getQuesDiffContent({ questionCount, questionDifficultInfo }) {
      if (!questionCount) return "--";
      const qinfo = questionDifficultInfo
        .map((item) => `${item.difficultLevel}：${item.questionCount}`)
        .join("，");
      return `${questionCount}（${qinfo}）`;
    },
    async getBaseData() {
      const res = await questionDistributionStatisticsApi(this.courseId);
      // console.log(res.data);
      // parse data
      this.baseDataList = res.data.map((quesItem) => {
        let nitem = {
          sourceDetailName: quesItem.sourceDetailName,
          questionDifficultInfoCont: this.getQuesDiffContent(quesItem),
        };
        return nitem;
      });
    },
    async getBlueData() {
      const res = await questionPropertyDistributionStatisticsApi(this.filter);

      this.blueDataList = res.data.map((mainGroup) => {
        let dataList = [];
        let blueQtypes = [];
        mainGroup.distributeInfo.forEach((item) => {
          if (!item.children || !item.children.length) return;
          const rowspan = item.children.length;
          item.children.forEach((elem, index) => {
            let nelem = {
              firstPropertyName: item.propertyName,
              secondPropertyName: elem.propertyName,
            };
            if (index === 0) nelem.rowspan = rowspan;

            elem.distributeByQuestionTypeList.forEach((qt) => {
              nelem[qt.sourceDetailName] = this.getQuesDiffContent(qt);
            });
            if (!blueQtypes.length) {
              blueQtypes = elem.distributeByQuestionTypeList.map(
                (qt) => qt.sourceDetailName
              );
            }

            dataList.push(nelem);
          });
        });
        return {
          name: mainGroup.coursePropertyName,
          dataList,
          blueQtypes,
        };
      });
      if (!this.blueDataList.length) return;
      this.curProperty = this.blueDataList[0].name;
      this.curBlueDataList = this.blueDataList[0].dataList;
      this.blueQtypes = this.blueDataList[0].blueQtypes;
    },
    propertyChange() {
      const data = this.blueDataList.find(
        (item) => item.name === this.curProperty
      );
      if (!data) return;
      this.curBlueDataList = data.dataList;
      this.blueQtypes = data.blueQtypes;
    },
  },
};
</script>

<style lang="scss" scoped>
.question-type-statistics {
  position: fixed;
  top: 110px;
  left: 220px;
  right: 0;
  bottom: 0;
  padding: 0 15px 15px 15px;
  border-radius: 10px;
  background-color: #f2f3f5;
  z-index: 200;
  .page-content-main {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
</style>
