<template>
  <div class="app-container">
    <evaluation-title
      :title="`${mxGlobal.TailingClassName(className)}${studentName}同学错题详情${mxGlobal.EvalTitleSeperator}${queryParams.knownledgeName}`"
      :navBackButton="true"></evaluation-title>
    <div>
      <el-radio-group v-model="queryParams.state" @change="onStateCheckChanged">
        <el-radio-button v-for="item in stateOptions" :key="item.value" :label="item.value">{{ item.label }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <div id="tbMistake" v-loading="loading">
      <el-table border v-for="(row, idx) in dataList" :key="idx" :data="[row, {}]" :span-method="spanMethod"
        style="width: 100%; margin-top: 10px">
        <el-table-column label="题目编号" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.$index == 0">{{ row.questionId }}</span>
            <div v-else class="mx-group-button-container">
              <el-button type="text" class="mx-group-button mx-group-button-primary" @click="onAnalysisClicked(row)">
                查看解析</el-button>
              <el-button type="text" class="mx-group-button mx-group-button-secondary" @click="onRedoClicked(row)"
                v-if="isFrontStudent">错题重做</el-button>
              <el-button type="text" class="mx-group-button mx-group-button-third" @click="onSimulateClicked(row)"
                v-if="isFrontStudent">举一反三</el-button>
              <el-button class="mx-group-button-video" @click="videoView(row.videoUrl, row.aliIdType)"
                icon="el-icon-video-camera-solid" v-if="row.videoUrl">观看视频</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="题目">
          <template slot-scope="scope">
            <div v-html="scope.row.title" style="padding: 15px 30px"></div>
          </template>
        </el-table-column>
        <el-table-column label="题型" prop="type" width="100px">
        </el-table-column>
        <el-table-column label="时间" prop="time" width="180px">
        </el-table-column>
        <el-table-column label="状态" prop="state" width="100px" :formatter="formatState">
        </el-table-column>
        <el-table-column label="来源" prop="source" width="250px">
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      :page-size="20" @pagination="getList" />
    <evaluation-empty v-if="total == 0" style="margin-top: 10px" />
    <el-dialog :title="dialogTitle" :visible.sync="analysisVisible" v-if="analysisVisible" width="60%">
      <analysis :questionId="analysisQuestionId" :wrongMode="analysisWrongMode" :customerCode="analysisCustomerCode"
        :displayQuestion="analysisQuestion" :showScore="analysisShowScore" :canScore="analysisCanScore"
        :lockAnswerInSolving="analysisLockAnswer" :initSolvingType="analysisSolvingType"
        @scoreWrongCompleted="scoreWrongCompleted"></analysis>
    </el-dialog>
    <el-dialog :title="dialogTitle" :visible.sync="redoVisible" v-if="redoVisible" width="60%">
      <redo :simulateMode="redoSimulateMode" :questionId="redoQuestionId" @redoCompleted="redoCompleted"
        @simulateCompleted="simulateCompleted"></redo>
    </el-dialog>
    <el-dialog title="查看视频" :visible.sync="videoVisible" width="60%">
      <mx-video v-if="videoVisible" :aliIdType="aliIdType" :src="videoUrl" controls></mx-video>
    </el-dialog>
  </div>
</template>

<script>
  import analysis from "@/views/evaluating/components/analysis";
  import redo from "@/views/evaluating/components/redo";
  import {
    getClassStudentQuestions,
    getStudentDetails,
  } from "@/api/webApi/front";
  import {
    mapGetters
  } from "vuex";

  export default {
    components: {
      analysis,
      redo,
    },
    data() {
      return {
        analysisVisible: false,
        analysisShowScore: true,
        analysisCanScore: false,
        analysisWrongMode: true,
        analysisLockAnswer: false,
        analysisQuestion: null,
        analysisSolvingType: "",
        analysisCustomerCode: "",
        redoEventName: "",
        redoVisible: false,
        redoQuestionId: 0,
        redoSimulateMode: true,
        videoUrl: "",
        aliIdType: '',
        videoVisible: false,
        dialogTitle: "",
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          state: ""
        },
        className: "",
        studentName: "",
        loading: false,
        dataList: [],
        filterWrong: false,
        filterResolvedWrong: false,
        stateOptions: [{
            label: "全部",
            value: ""
          },
          {
            label: "错题",
            value: "0"
          },
          {
            label: "已掌握错题",
            value: "1"
          },
        ],
        total: 0,
      };
    },
    computed: {
      ...mapGetters(["isFrontStudent", "nickName"]),
    },
    created() {
      this.queryParams = {
        ...this.$route.query,
        ...this.queryParams
      };
      this.queryParams.state = "";
      this.className = this.queryParams.className;
      delete this.queryParams.className;
      this.studentName = this.queryParams?.studentName || this.nickName;
      if (!this.isFrontStudent) delete this.queryParams.studentName;
      this.handleQuery();
    },
    methods: {
      onStateCheckChanged(val) {
        this.getList();
      },
      videoView(url, aliIdType) {
        this.videoUrl = url;
        this.aliIdType = aliIdType;
        this.videoVisible = true;
      },
      onAnalysisClicked(item) {
        this.analysisQuestionId = item.questionId;
        this.dialogTitle = "来源于" + item.source;
        this.analysisShowScore = true;
        this.analysisCanScore = false;
        this.analysisWrongMode = true;
        this.analysisLockAnswer = false;
        this.analysisQuestion = null;
        this.analysisSolvingType = "";
        this.analysisCustomerCode = this.isFrontStudent ?
          "" :
          this.queryParams.customerCode;

        this.analysisVisible = true;
      },
      onRedoClicked(item) {
        this.redoQuestionId = item.questionId;
        this.dialogTitle = "来源于" + item.source;
        this.redoSimulateMode = false;
        this.analysisCustomerCode = "";

        this.redoVisible = true;
      },
      onSimulateClicked(item) {
        this.redoQuestionId = item.questionId;
        this.dialogTitle = "来源于" + item.source;
        this.redoSimulateMode = true;
        this.analysisCustomerCode = "";

        this.redoVisible = true;
      },
      redoCompleted(redoQuestion) {
        this.redoVisible = false;
        this.analysisQuestionId = redoQuestion.questionId;
        this.analysisShowScore = false;
        this.analysisCanScore = true;
        this.analysisWrongMode = true; // 这里应该为false，但没有examineeId
        this.analysisLockAnswer = true;
        this.analysisQuestion = null;
        this.analysisSolvingType = 4;
        this.analysisCustomerCode = "";

        this.analysisVisible = true;
      },
      simulateCompleted(redoQuestion) {
        this.redoVisible = false;
        this.analysisQuestionId = redoQuestion.questionId;
        this.analysisShowScore = false;
        this.analysisCanScore = false;
        this.analysisWrongMode = true; // 这里应该为false，但没有examineeId
        this.analysisLockAnswer = true;
        this.analysisQuestion = redoQuestion;
        this.analysisSolvingType = "";
        this.analysisCustomerCode = "";

        this.analysisVisible = true;
      },
      scoreWrongCompleted() {
        this.analysisVisible = false;
        // 重新打分后,刷新页面
        this.getList();
      },
      formatState(row, column) {
        return this.stateOptions.find(opt => opt.value == row.state + '')?.label || '';
      },
      detail() {},
      handleQuery() {
        this.getList();
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      getList() {
        this.loading = true;
        const queryApi = this.isFrontStudent ?
          getStudentDetails :
          getClassStudentQuestions;
        const queryApiName = this.isFrontStudent ?
          "getStudentDetails" :
          "getClassStudentQuestions";
        queryApi(this.queryParams)
          .then((rep) => {
            console.log(queryApiName + " params&rep", this.queryParams, rep);
            if (rep.code == 200 || rep.code == 0) {
              this.dataList = rep.rows || rep.data;
              this.total = rep.total || 0;
              this.$nextTick(() => this.mxGlobal.MathQueue("tbMistake"));
            } else {
              this.msgError(rep.msg || queryApiName + "请求异常");
            }
            this.loading = false;
          })
          .catch((_) => (this.loading = false));
      },
      spanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (rowIndex == 0) return [1, 1];
        if (columnIndex == 0) return [1, 6]; // 合并第二行
        return [0, 0];
      },
    },
  };
</script>

<style scoped>
  .mx-group-button-container {
    display: flex;
    padding-left: 20px;
  }

  .mx-group-button {
    width: 88px;
    height: 32px;
    border-radius: 4px;
    margin: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mx-group-button-primary {
    background: #f5ab36;
    color: white;
  }

  .mx-group-button-secondary {
    background: #47c6a2;
    color: white;
  }

  .mx-group-button-third {
    border: 1px solid #47c6a2;
    color: #47c6a2;
  }

  /deep/.mx-group-button-video {
    margin: 0 10px;
    width: 108px;
    height: 32px;
    background: linear-gradient(103deg, #61ff29 0%, #00b8ff 100%);
    border-radius: 16px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>>

</style>
