<template>
  <div class="app-container">
    <el-card class="box-card" style="margin-bottom: 30px">
      <el-row :gutter="24">
        <el-col :span="16">
          <div style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-right: 20px;
            ">
            {{ evaluationName }}--------{{mxGlobal.TailingClassName(className)}}错题详情
          </div>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <el-button @click="$router.go(-1)" size="small" round>返回</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-table v-loading="loading" :data="dataList" :span-method="spanMethod" :row-class-name="rowClassName"
      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 label="姓名" prop="customerName" align="center" />
      <el-table-column label="知识点" prop="knowledgeName" 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="detail(scope.row)">查看详情</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>
  </div>
</template>

<script>
  import {
    getEvaluationStudent
  } from "@/api/webApi/front";
  import {
    mapGetters
  } from "vuex";

  export default {
    data() {
      return {
        dialogVideo: false,
        videoUrl: "",
        aliIdType: '',
        queryParams: {},
        evaluationName: "",
        className: "",
        loading: false,
        dataList: [],
        // 置顶用户数据
        matchingEnable: false,
        matchingCode: "",
        matchingName: "",
        mathcingDoFake: false,
      };
    },
    computed: {
      ...mapGetters(["isFrontStudent", "currentUser"]),
    },
    created() {
      this.queryParams = this.$route.query;
      this.evaluationName = this.queryParams.evaluationName;
      this.className = this.queryParams.className;
      delete this.queryParams.evaluationName;
      delete this.queryParams.className;
      this.initMatchingData();
      this.handleQuery();
    },
    methods: {
      initMatchingData() {
        // 初始化置顶数据条件
        // 学生身份进入此页, 或者老师身份选中学生进入时
        this.matchingEnable = this.isFrontStudent || this.customerCode;
        this.matchingCode =
          (this.isFrontStudent ? this.currentUser.code : this.customerCode) || "";
        this.matchingName =
          (this.isFrontStudent ? this.currentUser.nickName : this.studentName) ||
          "";
      },
      popupMatchingRowByNeed() {
        if (!this.matchingEnable) return;
        var matchingIdx = this.dataList.findIndex(this.isRowMatching);
        var row = matchingIdx > -1 ? this.dataList[matchingIdx] : null;
        if (!row && this.mathcingDoFake) {
          row = {
            customerCode: this.matchingCode,
            customerName: this.matchingName,
            knowledgeName: "该生无记录",
            isFakeRow: true,
          };
        }
        if (matchingIdx > -1) this.dataList.splice(matchingIdx, 1);
        if (row) this.dataList = [row, ...this.dataList];
      },
      rowClassName({
        row,
        rowIndex
      }) {
        if (this.matchingEnable && this.isRowMatching(row))
          return "highlight-row";
        return "";
      },
      spanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (!row.isFakeRow) return [1, 1];
        if (columnIndex < 4) return [1, 1];
        if (columnIndex == 4) return [1, 3];
        return [0, 0];
      },
      isRowMatching(row) {
        return row.customerCode == this.matchingCode;
      },
      detail(row) {
        const nextParams = {
          evaluationName: this.evaluationName,
          examineeId: row.examineeId || "",
          studentName: row.customerName,
        };
        this.$router.push({
          path: "/idc/EvaluationDatabase/statistics",
          query: nextParams,
        });
      },
      videoView(url, aliIdType) {
        this.videoUrl = url;
        this.aliIdType = aliIdType
        this.dialogVideo = true;
      },
      handleQuery() {
        this.getList();
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      getList() {
        this.loading = true;
        getEvaluationStudent(this.queryParams).then((rep) => {
          console.log("getEvaluationStudent rep =", rep);
          if (rep.code == 200 || rep.code == 0) {
            this.dataList = rep.data;
            this.popupMatchingRowByNeed();
          } else {
            this.msgError(rep.msg || "getEvaluationStudent 请求异常");
          }
          this.loading = false;
        });
      },
    },
  };
</script>

<style scoped>
</style>
