<template>
  <div class="app-container">
    <form-search :searchformShow="searchFormShow" :validateRules="rules" ref="formSearch"
                 @handleQuery="handleQuery"></form-search>
    <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="knowledgeName" align="center"/>
      <el-table-column label="次数" prop="wrongCount" align="center"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-view" @click="userList(scope.$index)">查看详情</el-button>
          <template v-if="isFrontStudent">
            <el-button type="text" icon="el-icon-video-play" @click="handleAIVideo(scope.row)">AI匹配视频</el-button>
            <el-button type="text" icon="el-icon-edit" @click="handleAIQuestion(scope.row)">AI匹配试题</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                :page-size="20" @pagination="getList"/>
    <el-dialog title="AI匹配视频列表" :visible.sync="videoListVisible" width="600px">
      <ai-video :knowledges="videoKnowledge.knowledgeName"></ai-video>
    </el-dialog>
  </div>
</template>

<script>
import {
  getClassKnownledgeStats,
  getStudentKnownledgeStats
} from '@/api/webApi/front'
import { getApiPaperStatus } from '@/api/webApi/ai'
import { mapGetters } from 'vuex'
import { getDefaultDateRange } from '@/utils/index'
import AiVideo from '@/views/idc/mistakes/components/aiVideo'
import consts from '@/common/mx-const'
import transferMixin from '@/components/mx-transfer-mixin'

export default {
  mixins: [transferMixin],
  components: { AiVideo },
  data() {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        classId: '',
        beginTime: '',
        endTime: ''
      },
      loading: false,
      dataList: [],
      searchFormShow: {},
      rules: {},
      //isFrontStudent: true
      videoListVisible: false,
      videoKnowledge: {}
    }
  },
  computed: {
    isGradeMode: function() {
      return this.isFrontMaster && this.$route.name.includes('/grade-')
    },
    ...mapGetters(['isFrontStudent', 'isFrontMaster'])
  },
  created() {
    this.searchFormShow = this.isFrontStudent
      ? { subjectid: '', time: getDefaultDateRange() }
      : { class: '', clbum: '', time: getDefaultDateRange() }
    if (this.isGradeMode) this.searchFormShow = { studentGradeId: '', time: getDefaultDateRange() }
    this.rules = this.isFrontStudent
      ? {
        clbum: [{ required: true, message: ' ', trigger: 'blur' }],
        time: [{ required: true, message: ' ', trigger: 'blur' }],
        subjectid: [{ required: true, message: '请选择科目', trigger: 'blur' }]
      }
      : {
        clbum: [{ required: true, message: ' ', trigger: 'blur' }],
        time: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    if (this.isGradeMode) {
      this.rules = {
        studentGradeId: [{ required: true, message: ' ', trigger: 'blur' }],
        time: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
    this.$nextTick(() => {
      this.$refs.formSearch.validate((valid) => {
        if (valid) this.handleQuery()
      })
    })
  },
  methods: {
    userList(idx) {
      //const knownledgeId = this.dataList[idx].knownledgeId;
      const knownledgeName = this.dataList[idx].knowledgeName || ''
      const className = this.$refs.formSearch.getClassName(this.queryParams.classId)
      const nextParams = {
        ...this.queryParams,
        //knownledgeId: knownledgeId,
        knownledgeName: knownledgeName,
        className: className
      }
      delete nextParams.pageNum
      delete nextParams.pageSize
      const nextPath = this.isFrontStudent
        ? '/idc/mistakes/detail'
        : '/idc/mistakes/userList'
      this.$router.push({ path: nextPath, query: nextParams })
    },
    handleQuery(ctrlParams = {}) {
      this.queryParams.studentGradeId = ctrlParams.studentGradeId || ''
      this.queryParams.classId = ctrlParams.clbum || ''
      this.queryParams.beginTime = ctrlParams.time && ctrlParams.time[0]
      this.queryParams.endTime = ctrlParams.time && ctrlParams.time[1]
      this.queryParams.subjectId = ctrlParams?.subjectid || ''

      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.dataList = []
      this.handleQuery()
    },
    getList() {
      this.loading = true
      console.log('this.queryParams =', this.queryParams)
      const queryApi = this.isFrontStudent
        ? getStudentKnownledgeStats
        : getClassKnownledgeStats
      const queryApiName = this.isFrontStudent
        ? 'getStudentKnownledgeStats'
        : 'getClassKnownledgeStats'
      queryApi(this.queryParams).then((rep) => {
        console.log(queryApiName + ' rep =', rep)
        if (rep.code == 200 || rep.code == 0) {
          this.dataList = rep.rows || rep.data
          this.total = rep.total || 0
        } else {
          this.msgError(rep.msg || queryApiName + '请求异常')
        }
        this.loading = false
      })
    },
    handleAIVideo(row) {
      this.videoKnowledge = row
      this.videoListVisible = true
    },
    handleAIQuestion(row) {
      getApiPaperStatus({
        knowledge: row.knowledgeName
      }).then(res => {
        if (res.data.allowAnswer || res.data.allowScore) {
          const unfinishedType = res.data.allowAnswer ? '答题' : '阅卷'
          const confirmMsg = '发现历史匹配未完成' + unfinishedType
          this.$confirm(confirmMsg, '确认', {
            distinguishCancelAndClose: true,
            confirmButtonText: '继续' + unfinishedType,
            cancelButtonText: '重新匹配'
          }).then(() => {
            this.goQuestionPage(false, row)
          }).catch((action) => {
            if (action == 'cancel') this.goQuestionPage(true, row)
          })
        } else {
          this.goQuestionPage(true, row)
        }
      })
    },
    goQuestionPage(force, row) {
      const nextData = {
        knowledge: row.knowledgeName,
        force: force,
        examineeType: consts.enum.paper.examineeType.ai
      }
      this.transferTo('/idc/mistakes/aiPaper', nextData)
    }
  }
}
</script>

<style>
</style>
