<template>
  <div class="app-container">
    <el-row :gutter="24" class="mb8">
      <el-col :span="12">
        <div style="
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 20px;
          ">
          {{ queryParams.evaluationName }}--------{{
            queryParams.studentName
          }}同学数据统计
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center">
        总分：{{ score }}分
      </el-col>
      <el-col :span="4" style="text-align: center">
        排名：{{ ranking }}
      </el-col>
      <el-col :span="4" style="text-align: right">
        <el-button @click="$router.go(-1)" size="small" round>返回</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="dataList" style="width: 100%">
      <el-table-column label="序号" type="index" align="center" width="100" />
      <el-table-column label="题号" prop="seq" align="center" width="100" />
      <el-table-column label="题目编号" prop="questionId" align="center"></el-table-column>
      <el-table-column label="知识点" prop="knowledgeName" align="center" />
      <el-table-column label="答题用时" prop="type" align="center" :formatter="formatDuration" />
      <el-table-column label="得分" prop="score" align="center" />
      <el-table-column label="得分率" prop="scoreRate" align="center" />
      <el-table-column label="视频" align="center">
        <template slot-scope="scope">
          <div style="cursor: pointer" @click="videoView(scope.row.videoUrl, scope.row.aliIdType)" v-if="scope.row.videoUrl">
            <i class="el-icon-video-camera-solid" style="color: #46a6ff; margin-right: 10px; font-size: 22px"></i>视频
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-view" @click="questionView(scope.$index)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="查看视频" :visible.sync="dialogVideo" width="60%">
      <mx-video v-if="dialogVideo" :aliIdType="aliIdType" :src="videoUrl" controls></mx-video>
    </el-dialog>
    <el-dialog :title="'来源于'+queryParams.evaluationName" :visible.sync="dialogVisible" v-if="dialogVisible" width="60%">
      <analysis :questionId="analysisQuestionId" :examineeId="queryParams.examineeId" :wrongMode="false"
        :lockAnswerInSolving="true"></analysis>
    </el-dialog>
  </div>
</template>

<script>
  import analysis from "@/views/evaluating/components/analysis";
  import {
    getExamineeQuestions,
    getExaminee
  } from "@/api/webApi/front";
  import {
    formatDuration
  } from "@/utils/index";

  export default {
    components: {
      analysis,
    },
    data() {
      return {
        dialogVideo: false,
        videoUrl: "",
        aliIdType: '',
        dialogVisible: false,
        loading: false,
        queryParams: {},
        dataList: [],
        analysisQuestionId: 0,
        score: '',
        ranking: '',
      };
    },
    created() {
      this.queryParams = this.$route.query;
      this.getScoreAndRanking();
      this.getList();
    },
    methods: {
      formatDuration(row) {
        return formatDuration(row.duration)
      },
      videoView(url, aliIdType) {
        this.videoUrl = url;
        this.aliIdType = aliIdType;
        this.dialogVideo = true;
      },
      questionView(idx) {
        const item = this.dataList[idx];
        this.analysisQuestionId = item.questionId;
        this.dialogVisible = true;
      },
      getScoreAndRanking() {
        getExaminee({
          examineeId: this.queryParams.examineeId
        }).then(
          (rep) => {
            console.log('getExaminee rep=', rep)
            if (rep.code == 200 || rep.code == 0) {
              this.score = rep.data.score
              this.ranking = rep.data.ranking
            } else {
              this.msgError(rep.msg || 'getExaminee 请求异常')
            }
          }
        )
      },
      getList() {
        this.loading = true;
        getExamineeQuestions({
          examineeId: this.queryParams.examineeId
        }).then(
          (rep) => {
            console.log("getExamineeQuestions rep =", rep);
            if (rep.code == 200 || rep.code == 0) {
              this.dataList = rep.data;
              this.loading = false;
            } else {
              this.msgError(rep.msg || "getExamineeQuestions 请求异常");
            }
          }
        );
      },
    },
  };
</script>

<style>
</style>
