<template>
  <div>
    <back-box>
      <template slot="title">
        <span>单卷分析</span>
      </template>
    </back-box>
    <div class="tips" v-if="paperModifyLog.modifiedTime">
      <p class="tips-p">
        <i class="fa fa-bell-o"></i>
        {{
          `${paperModifyLog.modifiedTime} ${paperModifyLog.realName}`
        }}修改了答案，是否重新记分？
      </p>
      <div class="btn-box">
        <el-button type="danger" round size="mini">重新计分</el-button>
        <el-button type="danger" round plain size="mini">暂时不计</el-button>
      </div>
    </div>
    <div class="page-content">
      <div class="tab-box">
        <span
          class="tab-item"
          :class="type == 1 ? 'active' : ''"
          @click="type = 1"
          >试题分析</span
        >
        <span
          class="tab-item"
          :class="type == 2 ? 'active' : ''"
          @click="type = 2"
          >成绩排名</span
        >
        <span
          class="tab-item"
          :class="type == 3 ? 'active' : ''"
          @click="type = 3"
          >小题分报表</span
        >
        <span
          class="tab-item"
          :class="type == 4 ? 'active' : ''"
          @click="type = 4"
          >作答明细表</span
        >
      </div>
      <el-table
        v-if="type == 1"
        :data="tableData"
        border
        style="width: 100%"
        :default-sort="{ prop: 'dadui', order: 'descending' }"
      >
        <el-table-column prop="questionIndex" label="题号" align="center"
          ><template slot-scope="scoped"
            >Q{{ scoped.row.questionIndex }}</template
          ></el-table-column
        >
        <el-table-column
          prop="questionType"
          label="题型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="manfen"
          label="满分值"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column
          prop="zuigao"
          label="班最高分"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column
          prop="zuidi"
          label="班最低分"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column
          prop="pingjun"
          label="班平均分"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column
          prop="defenlv"
          sortable
          label="班级得分率"
          align="center"
          ><template slot-scope="scoped"
            >{{ scoped.row.defenlv }}%</template
          ></el-table-column
        >
        <el-table-column
          prop="correctAnswer"
          label="答案"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="x1"
          label="选项1"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="x2"
          label="选项1"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="weida"
          label="未答"
          align="center"
        ></el-table-column>
      </el-table>
      <el-table
        v-if="type == 2"
        :data="tableData2"
        border
        style="width: 100%"
        :default-sort="{ prop: 'dadui', order: 'descending' }"
      >
        <el-table-column
          prop="xuehao"
          label="学号"
          align="center"
          fixed
        ></el-table-column>
        <el-table-column
          prop="xingming"
          label="姓名"
          fixed
          align="center"
        ></el-table-column>
        <el-table-column
          prop="totalScore"
          label="总分"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column
          prop="defenlv"
          label="得分率"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rank"
          label="班名"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column label="客观题" align="center">
          <el-table-column
            prop="defen1"
            label="得分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="defenlv1"
            label="得分率"
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="主观题" align="center">
          <el-table-column
            prop="defen2"
            label="得分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="defenlv2"
            label="得分率"
            align="center"
          ></el-table-column>
        </el-table-column>
      </el-table>
      <el-table
        v-if="type == 3"
        :data="tableData3"
        border
        style="width: 100%"
        :default-sort="{ prop: '', order: 'descending' }"
      >
        <el-table-column
          prop="xuehao"
          label="学号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="xingming"
          label="姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="totalScore"
          label="总分"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column label="分数组成" align="center">
          <el-table-column
            prop="keguan"
            label="客观题分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="zhuguan"
            label="主观题分"
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          v-for="(item, index) in questionList"
          :key="index"
          :label="item.title"

        >
          <template v-for="items in item.subQuestions">
            <el-table-column
              :key="items.questionIndex"
              :prop="'score' + items.questionIndex"
              :label="`${items.questionIndex}`"
              align="center"
            ></el-table-column>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-if="type == 4"
        :data="tableData4"
        border
        style="width: 100%"
        :default-sort="{ prop: '', order: 'descending' }"
      >
        <el-table-column
          prop="xuehao"
          label="学号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="xingming"
          label="姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="banji"
          label="班级"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="totalScore"
          label="总分"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          v-for="(item, index) in questionList"
          :key="index"
          :label="item.title"
        >
          <template v-for="items in item.subQuestions">
            <el-table-column
              :key="items.questionIndex"
              :prop="'daan' + items.questionIndex"
              :label="`${items.questionIndex}`"
              align="center"
            ></el-table-column>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      type: 1,
      paperModifyLog: {
        realName: "张老师",
        modifiedTime: "12-20",
      },
      tableData: [
        {
          questionIndex: 1,
          questionType: "单选题",
          manfen: 100,
          zuigao: 100,
          zuidi: 20,
          pingjun: 80,
          defenlv: 90,
          correctAnswer: "A",
          x1: "A",
          x2: "B",
          weida: "",
        },
        {
          questionIndex: 2,
          questionType: "单选题",
          manfen: 100,
          zuigao: 99,
          zuidi: 50,
          pingjun: 90,
          defenlv: 100,
          correctAnswer: "B",
          x1: "A",
          x2: "B",
          weida: "",
        },
      ],
      tableData2: [
        {
          xuehao: 1,
          xingming: "丁芳菲",
          totalScore: 5,
          defenlv: 50,
          rank: 1,
          defen1: 1,
          defenlv1: 1,
          defen2: 1,
          defenlv2: 1,
        },
      ],
      tableData3: [
        {
          xuehao: 1,
          xingming: "丁芳菲",
          totalScore: 5,
          rank: 1,
          keguan: 20,
          zhuguan: 20,
          score1: 1,
          score2: 2,
          score3: 3,
          score4: 4,
        },
      ],
      tableData4: [
        {
          xuehao: 1,
          xingming: "丁芳菲",
          banji: 'xx',
          totalScore: 5,
          daan1: 1,
          daan2: 2,
          daan3: 3,
          daan4: 4,
        },
      ],
      questionList: [{
        title:'大题1',
        subQuestions:[
          {questionIndex:1, daan:1},
          {questionIndex:2, daan:1},
        ]
      },{
        title:'大题2',
        subQuestions:[
          {questionIndex:3, daan:2},
          {questionIndex:4, daan:2},
        ]
      }],
    };
  },
  created() {
    this.id = this.$route.query.id;
    // this._QueryData()
  },
  methods: {
    async _QueryData() {
      let { data, info, status } = this.$request.quizDetail({
        id: this.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  padding: 20px 20px 0;
}
.tips {
  height: 48px;
  box-sizing: border-box;
  line-height: 48px;
  padding: 0 16px;
  border: 1px solid #fac7cc;
  border-radius: 5px;
  background-color: #ffebec;
  font-size: 14px;
  color: #fd9795;
  margin: 10px 20px 20px 20px;
  display: flex;
  &-p {
    flex: 1;
  }
  .fa-bell-o {
    font-size: 18px;
    margin-right: 5px;
  }
}
.tab-box {
  width: 800px;
  margin: 0 auto 12px;
  background: #f8f8f8;
  border-radius: 20px;
  display: flex;
  user-select: none;
  .tab-item {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #666;
    font-weight: 500;
    background: transparent;
    border-radius: 20px;
    cursor: pointer;
    &.active {
      background: #667ffd;
      color: #fff;
    }
  }
}
</style>