<template>
  <div class="app-container">
    <evaluation-title
      :title="`${evaluationName}${mxGlobal.EvalTitleSeperator}${mxGlobal.TailingClassName(className)}错题排名表`"
      :navBackButton="true"></evaluation-title>
    <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 label="知识点" prop="knowledgeName" align="center" />
      <el-table-column label="错误人数" prop="wrongCount" 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 {
    getEvaluationKnownledge
  } from "@/api/webApi/front";
  import {
    mapGetters
  } from 'vuex'

  export default {
    data() {
      return {
        dialogVideo: false,
        videoUrl: "",
        aliIdType: '',
        queryParams: {},
        evaluationName: "",
        className: "",
        loading: false,
        dataList: [],
      };
    },
    computed: {
      ...mapGetters(['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.handleQuery();
    },
    methods: {
      detail(row) {
        const nextParams = {
          ...this.queryParams,
          questionId: row.questionId,
          evaluationName: this.evaluationName,
          className: this.className,
        };
        this.$router.push({
          path: "/idc/mistakesOnce/detail",
          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;
        getEvaluationKnownledge(this.queryParams).then((rep) => {
          console.log("getEvaluationKnownledge rep =", rep);
          if (rep.code == 200 || rep.code == 0) {
            this.dataList = rep.data;
          } else {
            this.msgError(rep.msg || "getEvaluationKnownledge 请求异常");
          }
          this.loading = false;
        });
      }
    },
  };
</script>

<style scoped>
</style>
