<template>
  <!--  学习记录-->
  <div class="app-warp">
    <div class="detail-structure">
      <el-page-header content="学习记录" @back="goBack"/>
      <div class="detail-container">
        <el-tabs v-model="TabsActive">
          <el-tab-pane label="学习记录" name="first">
            <div class="app-search">
              <el-form ref="searchFrom" :model="searchFrom" label-width="80px">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="课程名称" prop="CURRICULUMNAME">
                      <el-input v-model="searchFrom.CURRICULUMNAME" placeholder="请输入课程名称"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="小节名称" prop="CHAPTERNAME">
                      <el-input v-model="searchFrom.CHAPTERNAME" placeholder="请输入小节名称"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="学习状态" prop="STATE">
                      <el-select v-model="searchFrom.STATE" placeholder="请选择学习状态" style="width: 100%;">
                        <el-option label="未学习" value="-1"/>
                        <el-option label="学习中" value="0"/>
                        <el-option label="已完成" value="1"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item style="text-align: right">
                      <el-button type="primary" icon="el-icon-search" class="ml-10" @click="getList">
                        搜索
                      </el-button>
                      <el-button icon="el-icon-refresh" @click="goKeyReset">
                        重置
                      </el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="app-container">
              <el-table
                v-loading="listLoading"
                :data="varList"
                :header-cell-style="{
                  background:'#f5f7fa',
                  'font-weight': 'bold',
                  'color': '#000'
                }"
                tooltip-effect="dark"
                border
                fit
                highlight-current-row>
                <el-table-column type="index" label="序号" width="50" align="center"/>
                <el-table-column label="课程名称" prop="CURRICULUMNAME"/>
                <el-table-column label="小节名称" prop="CHAPTERNAME"/>
                <el-table-column label="学习情况" prop="STATE">
                  <template slot-scope="{row}">
                    <template v-if="row.FINISHTIME">已完成</template>
                    <template v-else-if="row.CREATTIME">学习中</template>
                    <template v-else>未学习</template>
                  </template>
                </el-table-column>
                <el-table-column label="开始学习时间" prop="CREATTIME"/>
                <el-table-column label="完成时间" prop="FINISHTIME"/>
                <el-table-column label="最近观看时间" prop="OPERATTIME"/>
              </el-table>
              <!--              <div class="page-btn-group">-->
              <!--                <div/>-->
              <!--                <pagination-->
              <!--                  :total="total"-->
              <!--                  :page.sync="listQuery.page"-->
              <!--                  :limit.sync="listQuery.limit"-->
              <!--                  @pagination="getList"/>-->
              <!--              </div>-->
            </div>
          </el-tab-pane>
          <el-tab-pane label="考试记录" name="second">
            <div class="app-search">
              <el-form ref="searchFrom" :model="searchFrom" label-width="80px">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="试卷名称" prop="KEYWORDS">
                      <el-input v-model="searchFrom.KEYWORDS" placeholder="请输入试卷名称"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label-width="10px">
                      <el-button type="primary" icon="el-icon-search" class="ml-10" @click="getList">
                        搜索
                      </el-button>
                      <el-button icon="el-icon-refresh" @click="goKeyReset">
                        重置
                      </el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="app-container">
              <el-table
                v-loading="listLoading"
                :data="varList"
                :header-cell-style="{
                  background:'#f5f7fa',
                  'font-weight': 'bold',
                  'color': '#000'
                }"
                tooltip-effect="dark"
                border
                fit
                highlight-current-row>
                <el-table-column type="index" label="序号" width="50" align="center"/>
                <el-table-column label="试卷名称" prop="EXAMNAME"/>
                <el-table-column label="成绩" prop="EXAMSCORE"/>
                <el-table-column label="是否通过" prop="RESULT">
                  <template slot-scope="{row}">
                    {{ row.RESULT == '0' ? '未通过' : '' }}
                    {{ row.RESULT == '1' ? '通过' : '' }}
                  </template>
                </el-table-column>
                <el-table-column label="正确题数" prop="EXAMQUESTIONRIGHT"/>
                <el-table-column label="错误题数" prop="EXAMQUESTIONWRONG"/>
                <el-table-column label="正确率(%)" prop="ACCURACY"/>
                <el-table-column label="考试时间">
                  <template slot-scope="{row}">
                    {{ row.EXAMTIMEBEGIN + '至' + row.EXAMTIMEEND }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80px">
                  <template slot-scope="{row}">
                    <el-button type="text" @click="examDetailsDialogShow(row.STAGEEXAM_ID)">考试详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="page-btn-group">
                <div/>
                <pagination
                  :total="total"
                  :page.sync="listQuery.page"
                  :limit.sync="listQuery.limit"
                  @pagination="getList"/>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog :visible.sync="examDetailsDialog.visible" title="考试详情" width="70%" append-to-body>
      <div class="level-title">
        <h1>考试学员信息</h1>
      </div>
      <div style="display: flex;justify-content: space-around;">
        <div>学员名字：{{ examDetailsDialog.info.USERNAME }}</div>
        <div>考试时间：{{ examDetailsDialog.info.EXAMTIMEBEGIN + '至' + examDetailsDialog.info.EXAMTIMEEND }}</div>
        <div>得分：{{ examDetailsDialog.info.EXAMSCORE }}</div>
      </div>
      <div class="level-title">
        <h1>试卷基本信息</h1>
      </div>
      <div style="display: flex;justify-content: space-around;">
        <div>试卷名称：{{ examDetailsDialog.info.EXAMNAME }}</div>
        <div>试卷总分：{{ examDetailsDialog.info.PAPEREXAMSCORE }}</div>
        <div>考试时长：{{ examDetailsDialog.info.ANSWERSHEETTIME }}分钟</div>
        <div>通过分数：{{ examDetailsDialog.info.PASSSCORE }}</div>
      </div>
      <div class="level-title" style="margin-top: 20px;">
        <h1>试卷内容信息</h1>
      </div>
      <div
        v-for="item in examDetailsDialog.varList"
        :key="item.PAPER_QUESTION_ID"
        style="display: flex;background-color: #fafafa;margin-top: 10px;padding: 10px;">
        <div style="color: #37bf77;background-color: #d9efe4;height: 30px;padding: 5px;">
          {{ item.QUESTIONTYPE === '1' ? '单选题' : '' }}
          {{ item.QUESTIONTYPE === '2' ? '多选题' : '' }}
          {{ item.QUESTIONTYPE === '3' ? '判断题' : '' }}
          {{ item.QUESTIONTYPE === '4' ? '填空题' : '' }}
        </div>
        <div style="flex: 1;margin-left: 10px">
          <div>{{ item.QUESTIONDRY }}</div>
          <div v-if="item.QUESTIONTYPE === '1' || item.QUESTIONTYPE === '2'" style="margin-top:10px;display: flex;justify-content: space-around;">
            <div>{{ 'A.' + item.OPTIONA }}</div>
            <div>{{ 'B.' + item.OPTIONB }}</div>
            <div>{{ 'C.' + item.OPTIONC }}</div>
            <div>{{ 'D.' + item.OPTIOND }}</div>
          </div>
          <div v-if="item.QUESTIONTYPE === '3'" style="margin-top:10px;display: flex;justify-content: space-around;">
            <div>{{ item.OPTIONA }}</div>
            <div>{{ item.OPTIONB }}</div>
          </div>
          <div style="margin-top:10px;">正确答案：{{ item.QUESTIONTYPE === '3'?(item.ANSWERRIGHT === 'A'?'正确':'错误'): item.ANSWERRIGHT }}</div>
          <div v-if="item.ANSWER !== '' " style="margin-top:10px;">学员答案：{{ item.QUESTIONTYPE === '3'?(item.ANSWER === 'A'?'正确':'错误'): item.ANSWER }}</div>
          <div v-else style="margin-top:10px;">学员答案：</div>
          <div style="margin-top:10px;">答案解析： {{ item.DESCR }}</div>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="examDetailsDialog.visible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { requestFN } from '@/utils/request'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      TabsActive: 'first',
      searchFrom: {
        CURRICULUMNAME: '',
        CHAPTERNAME: '',
        STATE: ''
      },
      listLoading: false,
      varList: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      examDetailsDialog: {
        visible: false,
        info: {},
        varList: []
      }
    }
  },
  inject: ['setActiveName', 'parentObj'],
  watch: {
    TabsActive: {
      handler() {
        this.listQuery.limit = 10
        this.listQuery.page = 1
        this.listLoading = true
        this.varList = []
        this.total = 0
        this.goKeyReset()
      },
      immediate: true
    }
  },
  methods: {
    getList() {
      let url = ''
      if (this.TabsActive === 'first') {
        url = '/coursestudyvideorecord/getAllByuserInfo'
      } else if (this.TabsActive === 'second') {
        url = `/stageexam/list?showCount=${this.listQuery.limit}&currentPage=${this.listQuery.page}`
      }
      requestFN(url, {
        STUDENT_ID: this.parentObj.STUDENT_ID,
        CLASS_ID: this.parentObj.CLASS_ID,
        ...this.searchFrom
      }).then(res => {
        this.listLoading = false
        this.varList = res.varList
        if (this.TabsActive === 'second') {
          this.total = res.page.totalResult
        }
      })
    },
    goKeyReset() {
      this.searchFrom = {
        CURRICULUMNAME: '',
        CHAPTERNAME: '',
        STATE: ''
      }
      this.getList()
    },
    examDetailsDialogShow(STAGEEXAM_ID) {
      requestFN('/stageexam/findExam', {
        STAGEEXAM_ID
      }).then(res => {
        this.examDetailsDialog.info = res.pd
        this.examDetailsDialog.varList = res.pd.QUESTIONLIST
        this.examDetailsDialog.visible = true
      })
    },
    goBack() {
      if (this.parentObj.TYPE === 'add') {
        this.setActiveName('StudentList')
      } else {
        this.setActiveName('ClassDetailsList')
      }
    }
  }
}
</script>

<style scoped>

</style>
