<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="box-justify">
      <div>
        <el-radio-group v-model="setType" @change="setTypeChange">
          <el-radio label="college">按考查学院</el-radio>
          <el-radio label="teacher">按任课老师</el-radio>
        </el-radio-group>
      </div>
      <el-select
        v-if="setType === 'college'"
        v-model="setting.collegeId"
        placeholder="选择考查学院"
        filterable
        @change="collegeChange"
      >
        <el-option
          v-for="item in inspectCollegeList"
          :key="item.inspectCollegeId"
          :value="item.inspectCollegeId"
          :label="item.inspectCollegeName"
        >
        </el-option>
      </el-select>
      <el-select
        v-else
        v-model="setting.teacherId"
        placeholder="选择任课老师"
        filterable
        @change="teacherChange"
      >
        <el-option
          v-for="item in teacherList"
          :key="item.teacherId"
          :value="item.teacherId"
          :label="item.teacherName"
        >
        </el-option>
      </el-select>
    </div>
    <div class="chart-box chart-ndspzd">
      <v-chart
        :option="curData.chartOption"
        v-if="curData.chartOption"
      ></v-chart>
    </div>
  </div>
</template>

<script>
import {
  courseSurveyTeacherQuestionAnswerView,
  teachQuery,
  inspectCollegeQuery
} from "../../api";
import { getDifficultyAnalyseOption } from "../../chartOption";

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

      let datas = {
        ...this.filter,
        ...this.setting
      };
      let dimensionConfig = [];
      if (this.setType === "college") {
        datas.teacherId = null;
        dimensionConfig = [
          { name: "全校", param: "schAvgScoreRate" },
          { name: "本院", param: "colAvgScoreRate" }
        ];
      } else {
        datas.collegeId = null;
        dimensionConfig = [
          { name: "全校", param: "schAvgScoreRate" },
          { name: "本教师", param: "teaAvgScoreRate" }
        ];
      }
      const data = await courseSurveyTeacherQuestionAnswerView(datas);
      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]);
      }
    },
    setTypeChange() {
      if (this.setType === "college") {
        this.getInspectColleges();
      } else {
        this.getTeacherList();
      }
    },
    async getInspectColleges() {
      if (!this.filter.examId || !this.filter.courseCode) return;

      if (!this.inspectCollegeList.length)
        this.inspectCollegeList = await inspectCollegeQuery({
          schoolId: this.$ls.get("schoolId"),
          examId: this.filter.examId,
          courseCode: this.filter.courseCode,
          absent: false,
          current: true
        });

      if (this.inspectCollegeList.length) {
        this.setting.collegeId = this.inspectCollegeList[0].inspectCollegeId;
        this.getData();
      }
    },
    async getTeacherList() {
      if (!this.filter.examId || !this.filter.courseCode) return;

      if (!this.teacherList.length)
        this.teacherList = await teachQuery({
          schoolId: this.$ls.get("schoolId"),
          examId: this.filter.examId,
          courseCode: this.filter.courseCode,
          inspectCollegeId: this.filter.inspectCollegeId,
          absent: false,
          current: true
        });

      if (this.teacherList.length) {
        this.setting.teacherId = this.teacherList[0].teacherId;
        this.getData();
      }
    },
    collegeChange() {
      if (!this.setting.collegeId) return;
      this.getData();
    },
    teacherChange() {
      if (!this.setting.teacherId) return;
      this.getData();
    },
    modChange(mod) {
      this.curData = mod || {};
    }
  }
};
</script>
