<template>
  <div>
    <div class="mx-report-summary">
      <span>知识点：{{summary.knowledge}}</span>
      <span>第{{questionNo}}题 (题目编号：{{quesitonId}})</span>
      <span>得分：{{(summary.score||0)}}分</span>
    </div>
    <mx-table :rows="dataList" :propDefines="propDefines">
      <template #column-duration="{value}">
        <span>{{formatDuration(value)}}</span>
      </template>
      <template #column-question="{row}">
        <span class="mx-detail" @click="showQuestionById(row)">查看详情>></span>
      </template>
    </mx-table>

    <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" width="60%" append-to-body>
      <analysis ref="question" :questionId="quesitonId" :customerCode="analysisCustomerCode" :examineeId="analysisExamineeId" :wrongMode="false" :lockAnswerInSolving="true">
      </analysis>
    </el-dialog>
  </div>
</template>

<script>
import {
  getQuestionExaminees
} from "@/api/webApi/report";
import {
  formatDuration
} from '@/utils/index'
import analysis from "@/views/evaluating/components/analysis";

export default {

  components: {
    analysis
  },
  props: {
    //
    evaluationClassId: {
      type: Number | String,
      default: ''
    },
    quesitonId: {
      type: Number | String,
      default: 0
    },
    // extra for display
    questionNo: {
      type: Number | String,
      default: ''
    },
    // 选填
    extraParam: {
      type: Object,
      default: _ => ({})
    }
  },
  data() {
    return {
      dialogVisible: false,
      analysisExamineeId: 0,
      analysisCustomerCode: '',
      summary: {},
      dataList: [],
      propDefines: {
        className: {
          label: "班级"
        },
        customerName: {
          label: "姓名"
        },
        score: {
          label: "得分"
        },
        scoreRate: {
          label: "得分率"
        },
        duration: {
          label: "答题时长",
          slot: "column-duration"
        },
        actions: {
          label: "操作",
          slot: "column-question",
          width: "120px",
        },
      }
    }
  },
  mounted() {
    this.loadReport()
  },
  methods: {
    loadReport() {
      getQuestionExaminees({
        ...this.extraParam,
        evaluationClassId: this.evaluationClassId,
        quesitonId: this.quesitonId,
      }).then(res => {
        console.log(res)
        this.summary = res.data.options
        this.dataList = res.data.rows
      })
    },
    showQuestionById(row) {
      this.analysisExamineeId = row.examineeId
      this.analysisCustomerCode = row.customerCode
      this.dialogVisible = true
    },
    loadCompletedAction() {
      document.getElementsByClassName('v-modal').click()
    },
    formatDuration(v) {
      return formatDuration(v)
    }
  }
}
</script>

<style scoped>
.mx-report-summary {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}

.mx-report-summary span {
  margin-left: 50px;
}

.mx-detail {
  text-decoration: underline;
  cursor: pointer;
  color: #47c6a2;
}
</style>
