<template>
  <div class="part-box part-box-pad question-difficult-score-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>
              1.题目难易度是以参加本次考试的学生平均得分率为指标，与参加本次考试的学生水平有关。因此，这里计算出来的题目难度大小，只是对本次考试测评的学生相对而言的难易度评估。
            </p>
            <p>
              2.可按照考查学院、任课教师应届学生维度，分别与全校应届考生平均水平相比；
            </p>
            <p>
              3.难题：难度值在[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.moduleName }}
        </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-nddfqk">
      <v-chart
        :option="curData.chartOption"
        v-if="curData.chartOption"
      ></v-chart>
    </div>
    <div class="chart-table">
      <el-table
        ref="TableList"
        :data="dioList"
        border
        @sort-change="sortChange"
      >
        <el-table-column
          prop="dimensionCode"
          label="编号"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="moduleName"
          label="模块"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="dimensionName"
          label="一级分析维度"
        ></el-table-column>
        <el-table-column
          prop="totalCount"
          label="题数"
          sortable="custom"
          width="75"
        ></el-table-column>
        <el-table-column
          prop="degree"
          label="难度"
          sortable="custom"
          width="75"
        ></el-table-column>
        <el-table-column
          prop="colScoreRate"
          label="得分率"
          sortable="custom"
          width="90"
        >
          <span slot-scope="scope"
            >{{
              setType === "college"
                ? scope.row.colScoreRate
                : scope.row.teaScoreRate
            }}%</span
          >
        </el-table-column>
      </el-table>
      <div
        v-if="dioList.length"
        class="table-more"
        @click="showMoreDifficultList"
      >
        <i class="el-icon-plus"></i>查看更多数据
      </div>
      <p class="report-tips">提示：上表为全校试题难度得分情况分析数据</p>
    </div>

    <!-- PreviewMoreDifficultListDialog -->
    <PreviewMoreDifficultListDialog
      ref="PreviewMoreDifficultListDialog"
      :datas="curData.dioList"
    />
  </div>
</template>

<script>
import {
  courseSurveyTeacherQuestionView,
  teachQuery,
  inspectCollegeQuery
} from "../../api";
import { getAnswerAnalyseOption } from "../../chartOption";
import PreviewMoreDifficultListDialog from "./PreviewMoreDifficultListDialog";

export default {
  name: "question-difficult-score-analysis",
  components: { PreviewMoreDifficultListDialog },
  data() {
    return {
      filter: {},
      setting: {
        collegeId: "",
        teacherId: ""
      },
      setType: "college",
      dataList: [],
      dioList: [],
      curData: { dioList: [] },
      inspectCollegeList: [],
      teacherList: []
    };
  },
  methods: {
    initData(filter) {
      this.filter = { ...filter };
      this.inspectCollegeList = [];
      this.teacherList = [];
      this.setTypeChange();
    },
    async getData() {
      this.curData.chartOption = null;
      this.dioList = [];
      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: "schScoreRate" },
          { name: "本院", param: "colScoreRate" }
        ];
      } else {
        datas.collegeId = null;
        dimensionConfig = [
          { name: "全校", param: "schScoreRate" },
          { name: "本教师", param: "teaScoreRate" }
        ];
      }
      const data = await courseSurveyTeacherQuestionView(datas);

      const dimensionOrder = { 知识: 1, 能力: 2 };
      data.dimensionAnalyzeList.sort((a, b) => {
        return dimensionOrder[a.moduleName] - dimensionOrder[b.moduleName];
      });
      this.dataList = data.dimensionAnalyzeList.map((item, index) => {
        const answerAnalyse = dimensionConfig.map(conf => {
          item.dioList.sort((a, b) =>
            a.dimensionCode > b.dimensionCode ? 1 : -1
          );
          let dioList = item.dioList.map(elem => {
            return {
              name: elem.dimensionCode,
              value: elem[conf.param] * 1
            };
          });

          return {
            name: conf.name,
            datas: dioList
          };
        });
        item.id = `dimension${index}`;
        item.chartOption = getAnswerAnalyseOption(answerAnalyse);
        item.dioList.forEach(element => {
          element.moduleName = item.moduleName;
        });
        return item;
      });

      if (this.curData.moduleName) {
        const curMode = this.dataList.find(
          mod => mod.moduleName === this.curData.moduleName
        );
        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 || { dioList: [] };
      this.dioList = this.curData.dioList.slice(0, 5);
    },
    sortChange({ prop, order }) {
      if (!order) {
        this.curData.dioList.sort((a, b) =>
          a["dimensionCode"] > b["dimensionCode"] ? 1 : -1
        );
      } else {
        const num = order === "ascending" ? 1 : -1;
        this.curData.dioList.sort((a, b) =>
          a[prop] * 1 > b[prop] * 1 ? num : -num
        );
      }
      this.dioList = this.curData.dioList.slice(0, 5);
    },
    showMoreDifficultList() {
      this.$refs.PreviewMoreDifficultListDialog.open();
    }
  }
};
</script>
