<template>
  <div class="app-container">
    <el-radio-group v-if="!isGradeMode" v-model="pageMode">
      <el-radio-button v-for="item in pageModeOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
    </el-radio-group>
    <template v-if="!isGradeMode&&!pageMode">
      <el-card class="box-card" style="margin-bottom: 30px">
        <el-row :gutter="24">
          <el-col :span="5">
            <div style="padding-right: 20px">
              {{ evaluation.name }}
            </div>
          </el-col>
          <el-col :span="5" style="text-align: right">
            <el-radio-group v-model="option" @change="onOptionChanged">
              <el-radio-button v-for="i in options" :key="i.value" :label="i.value" style="border-radius: 18px">{{ i.name }}</el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col :span="12" style="text-align: left">
            <el-radio-group style="margin-left: 30px" v-model="subOption" v-if="subOptions.length" @change="onSubOptionChanged">
              <el-radio-button v-for="i in subOptions" :key="i.value" :label="i.value" style="border-radius: 18px">{{ i.name }}</el-radio-button>
            </el-radio-group>
            <span v-if="subOptions.length == 0" v-html="'\u00a0'"></span>
          </el-col>
          <el-col :span="2" style="text-align: right">
            <el-button size="small" @click="back()" round>返回</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-table :key="objectiveRefreshKey" v-loading="loading" :data="dynamicRows" :span-method="spanMethod" style="width: 100%" v-if="isOptionObjective">
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column label="姓名" prop="studentName" align="center">
          <template slot-scope="scope">
            <table border="0" width="100%" bordercolor="#fff" bgcolor="#fff" v-if="scope.$index == dynamicRows.length - 1">
              <tr>
                <th :rowspan="option == 1 ? 1 : 2" style="border: none">
                  班级统计
                </th>
                <th v-if="option != 1">已掌握</th>
              </tr>
              <tr v-if="option != 1">
                <th>未掌握</th>
              </tr>
            </table>
            <span v-else>{{ scope.row.studentName }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="(header, idx) in dynamicHeaders" :key="idx" align="center">
          <template #header>
            <div v-if="header.score">
              <div>{{ header.name }}</div>
              <div>({{ header.score }}分)</div>
            </div>
            <span v-else>{{ header.name || header }}</span>
          </template>
          <template slot-scope="scope">
            <table border="0" width="100%" bordercolor="#fff" bgcolor="#fff" v-if="scope.$index == dynamicRows.length - 1">
              <tr>
                <th style="border: none; text-align: center" v-if="option == 1">
                  {{ dynamicStatistics[idx][0] }}
                </th>
              </tr>
              <tr v-if="option != 1">
                <th style="border: none; text-align: center" v-if="
                    dynamicStatistics[idx] && dynamicStatistics[idx].length > 0
                  ">
                  {{ dynamicStatistics[idx] && dynamicStatistics[idx][0] }}人
                </th>
              </tr>
              <tr v-if="option != 1">
                <th style="border: none; text-align: center" v-if="
                    dynamicStatistics[idx] && dynamicStatistics[idx].length > 1
                  ">
                  {{ dynamicStatistics[idx] && dynamicStatistics[idx][1] }}人
                </th>
              </tr>
            </table>
            <span v-else-if="dynamicRows[scope.$index].scores[idx] == ''" v-html="'\u00a0'"></span>
            <span v-else-if="option != 1">{{ scope.row.scores[idx] }}分</span>
            <span v-else-if="convertToBoolean(scope.row.scores[idx])" class="el-icon-circle-check" style="color: #67c23a; font-size: 24px"></span>
            <span v-else class="el-icon-circle-close" style="color: #f56c6c; font-size: 24px"></span>
          </template>
        </el-table-column>
        <el-table-column :label="option == 1 ? '个人统计' : '掌握比'" align="center">
          <template slot-scope="scope">
            <span v-if="scope.$index != dynamicRows.length - 1">{{
              dynamicRows[scope.$index].stats[0]
            }}</span>
            <span v-else v-html="'\u00a0'"></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.$index != dynamicRows.length - 1" type="text" icon="el-icon-view" @click="userDetail(scope.$index)">查看详情</el-button>
            <span v-else v-html="'\u00a0'"></span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <report-student-non-class v-else-if="isNonClassMode" :evaluationClassId="evaluation.evaluationClassId" :customerCode="currentUser.code" :name="evaluation.name"></report-student-non-class>
    <report-student v-else-if="isFrontStudent" :evaluationClassId="evaluation.evaluationClassId" :customerCode="currentUser.code" :name="evaluation.name"></report-student>
    <report-master v-else-if="isGradeMode" :studentGradeId="evaluation.studentGradeId" :evaluationId="evaluation.evaluationId" :name="evaluation.name" :gradeName="evaluation.studentGradeName"></report-master>
    <report-teacher v-else :evaluationClassId="evaluation.evaluationClassId" :name="evaluation.name" :className="evaluation.className"></report-teacher>
  </div>
</template>

<script>
import { getEvaluationQuestionTypes, getClassStat } from "@/api/webApi/front";
import { mapGetters } from "vuex";
import reportTeacher from "./reportTeacher.vue";
import ReportStudent from "./reportStudent.vue";
import ReportStudentNonClass from "./reportStudentNonClass.vue"
import ReportMaster from "./reportMaster.vue";

export default {
  components: { reportTeacher, ReportStudent, ReportStudentNonClass, ReportMaster },
  data() {
    return {
      loading: false,
      evaluation: {},
      queryParams: {
        evaluationClassId: "",
        questionType: "1",
        questionOptions: "0",
      },
      options: [],
      subOptions: [],
      option: "", // 1 客观题, 2 主观题
      subOption: "",
      isOptionObjective: true, // true：客观题, false: 主观题
      objectiveRefreshKey: "",
      subjectiveRefreshKey: "",
      dynamicHeaders: [],
      dynamicRows: [],
      dynamicStatistics: {},
      studentStatsKeyPrefix: "dynamicItem_stats_",

      // 报表
      pageMode: 1,
      pageModeOptions: [
        { label: "学情分析", value: 1 },
        { label: "测评数据", value: 0 },
      ],
    };
  },
  computed: {
    isNonClassMode: function () { return this.evaluation.catalogId && this.evaluation.catalogId != 1 },
    isGradeMode: function () { return eval(this.evaluation.isGradeMode) },
    ...mapGetters(["isFrontStudent", "currentUser"]),
  },
  created() {
    this.evaluation = this.$route.query;
    this.queryParams.evaluationClassId = this.evaluation.evaluationClassId;
    this.queryParams.evaluationId = this.evaluation.evaluationId;
    console.log('isNonClassMode isGradeMode', this.isNonClassMode, this.isGradeMode)
    this.getOptions();
  },
  methods: {
    back() {
      this.$router.back();
    },
    userDetail(idx) {
      const row = this.dynamicRows[idx];
      const nextParams = {
        evaluationName: this.evaluation.name,
        examineeId: row.examineeId,
        studentName: row.studentName,
      };
      this.$router.push({
        path: "/idc/EvaluationDatabase/statistics",
        query: nextParams,
      });
    },
    onOptionChanged(op) {
      this.subOptions = this.options.find((o) => o.value == op).options || [];
      if (this.subOptions.length > 0) {
        this.subOption = this.subOptions[0].value;
        this.onSubOptionChanged(this.subOption);
      }
    },
    onSubOptionChanged(op) {
      this.getList();
    },
    getOptions() {
      if (!this.evaluation.evaluationClassId) return
      getEvaluationQuestionTypes(this.evaluation.evaluationClassId).then(
        (rep) => {
          console.log("getEvaluationQuestionTypes rep =", rep);
          if (rep.code == 200 || rep.code == 0) {
            // // 将options的显示替换为字典配置
            // rep.data.forEach(
            //   (item) => (item.name = map[item.name] || item.name)
            // );
            this.options = rep.data;
            this.option = this.options[0].value;
            this.onOptionChanged(this.option);
          } else {
            this.msgError(rep.msg || "getEvaluationQuestionTypes请求异常");
          }
        }
      );
    },
    getList() {
      this.loading = true;
      this.queryParams.questionType = this.option;
      this.queryParams.questionOptions = this.subOption;
      getClassStat(this.queryParams).then((rep) => {
        console.log("getClassStat rep =", rep);
        if (rep.code == 200 || rep.code == 0) {
          this.resolveDynamicData(rep.data);
        } else {
          this.msgError(rep.msg || "getClassStat请求异常");
        }
        this.loading = false;
      });
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 数据最后一行，第1、2列合并
      if (rowIndex == this.dynamicRows.length - 1) {
        if (columnIndex == 0) return [0, 0];
        else if (columnIndex == 1) return [1, 2];
      }
      return [1, 1];
    },
    resolveDynamicData(data) {
      // 先解析主客观题类型
      this.isOptionObjective = !(
        data.datas.length > 0 && data.datas[0].stats.length > 2
      );
      console.log("isOptionObjective =", this.isOptionObjective);

      const randomKey = new Date().toString();
      if (this.isOptionObjective) this.objectiveRefreshKey = randomKey;
      else this.subjectiveRefreshKey = randomKey;

      this.dynamicHeaders = data.headers; // 开头的序号与姓名为固定列
      this.dynamicRows = data.datas;
      this.dynamicStatistics = data.stats;

      // 伪造一行，用行替换成统计行
      if (this.dynamicRows.length > 0) this.dynamicRows.push({});
      console.log(
        "resolveDynamicData this.dynamicHeaders,this.dynamicRows,this.dynamicStatistics",
        this.dynamicHeaders,
        this.dynamicRows,
        this.dynamicStatistics
      );
    },
    convertToBoolean(raw) {
      if (raw == "true" || raw == "True") return true;
      if (raw == "false" || raw == "False") return false;
      return !!raw;
    },
  },
};
</script>

<style>
</style>
