<template>
  <div>
    <el-card>
      <div slot="header" style="cursor: pointer">
        <span style="font-size: 16px; font-weight: 800" @click="handleBack">
          <i class="el-icon-back" style="margin-right: 5px; font-size: 16px; font-weight: 800"></i>
          返回
        </span>
      </div>

      <el-row :gutter="20" class="row-item">
        <el-col :span="9">
          <div>任务主题名称：{{ formData.name }}</div>
        </el-col>
        <el-col :span="4">
          <div>创建人：{{ formData.userName }}</div>
        </el-col>
        <el-col :span="4">
          <div>培训级别：{{ formData.trainLevel }}</div>
        </el-col>
        <el-col :span="4">
          <div>教育类型：{{ formData.eduType }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="row-item">
        <el-col :span="24">
          <div>有效期：{{ formData.learningDate }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="row-item">
        <el-col :span="5">
          <div>学习进度：{{ formData.learningProgress }}%</div>
        </el-col>
        <el-col :span="5">
          <div>考试进度：{{ formData.examProgress || 0 }}/1</div>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 20px" header="课件学习">
      <el-table :data="coursewareData" fit highlight-current-row style="width: 100%">
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column
          v-for="(column, index) in coursewareHeader"
          show-overflow-tooltip
          :key="column.prop"
          :label="column.label"
          :prop="column.prop"
          align="center"
        >
          <template v-slot="scope" v-if="column.prop == 'studyProgress'">
            <el-progress :percentage="Number(scope.row.studyProgress)" :stroke-width="10"></el-progress>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleStudy(scope.row)">开始学习</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card style="margin-top: 20px" header="考试">
      <el-table :data="examData" fit highlight-current-row style="width: 100%">
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column
          v-for="(column, index) in examHeader"
          show-overflow-tooltip
          :key="column.prop"
          :label="column.label"
          :prop="column.prop"
          align="center"
        >
          <template v-slot="scope" v-if="column.prop == 'isPass'">
            <el-tag v-if="scope.row.score && Number(scope.row.score) >= Number(scope.row.passScore)" type="success">
              及格
            </el-tag>
            <el-tag v-if="scope.row.score && Number(scope.row.score) < Number(scope.row.passScore)" type="danger">
              不及格
            </el-tag>
            <el-tag v-if="!scope.row.score" type="info">未考</el-tag>
          </template>
          <template v-slot="scope" v-else-if="column.prop == 'score'">
            <span v-if="!scope.row.score">-</span>
            <span v-else>{{ scope.row.score }}分</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.score && Number(scope.row.score) >= Number(scope.row.passScore)"
              type="text"
              size="mini"
              @click="handleDetail(scope.row)"
            >
              查看
            </el-button>
            <el-button v-else type="text" size="mini" @click="handleExam(scope.row)">开始考试</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card style="margin-top: 20px" header="练习">
      <el-table :data="learnData" fit highlight-current-row style="width: 100%">
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column
          v-for="(column, index) in learnHeader"
          show-overflow-tooltip
          :key="column.prop"
          :label="column.label"
          :prop="column.prop"
          align="center"
        ></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="goExercise(scope.row)">开始练习</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 考前弹框 -->
    <BeforeExamDialog ref="beforeExamDialog" />
  </div>
</template>

<script>
import BeforeExamDialog from '../components/BeforeExamDialog'
import { getLearningDetails, getLearningFileList } from '@/api/educTrainLearn'
import { lookFile } from '@/utils/bonus'

export default {
  components: { BeforeExamDialog },
  name: 'learnTaskDetails',
  data() {
    return {
      proId: this.$store.state.user.thisIds.proId || '',
      userType: this.$store.state.user.userType,
      item: {},
      fileUrl: lookFile(),
      formData: {
        name: '', // 任务主题名称
        userName: '', // 创建人
        trainLevel: '', // 培训级别
        eduType: '', // 培训类型
        learningDate: '', // 有效期
        learningProgress: 0, // 进度
        examProgress: 0, // 考试进度
      },
      // 课件学习-表头
      coursewareHeader: [
        { label: '课件名称', prop: 'fileName' },
        { label: '时长', prop: 'duration' },
        { label: '学习进度', prop: 'studyProgress' },
      ],
      // 课件学习-数据
      coursewareData: [],
      // 考试-表头
      examHeader: [
        { label: '考试名称', prop: 'fileType' },
        { label: '试卷名称', prop: 'fileName' },
        { label: '试题数', prop: 'questionNum' },
        { label: '得分', prop: 'score' },
        { label: '是否及格', prop: 'isPass' },
      ],
      // 考试-数据
      examData: [],
      // 练习-表头
      learnHeader: [
        { label: '题库名称', prop: 'fileName' },
        { label: '试题数', prop: 'questionNum' },
      ],
      // 练习-数据
      learnData: [],
    }
  },
  created() {},
  methods: {
    handleBack() {
      this.$emit('handleBack')
    },
    handleStudy(row) {
      row.taskLength = this.coursewareData.length
      row.type = this.examData && this.examData.length > 0 ? '' : 1
      row.taskId = this.item.id
      console.log('🚀 ~ 开始学习-row', row)
      let isVideo = true
      if (row.url.includes('.mp4') || row.url.includes('.MP4')) {
        isVideo = true
      } else {
        isVideo = false
      }
      this.$emit('handleStudy', row, isVideo, this.item)
    },
    async getList(item) {
      this.item = item
      console.log('🚀 ~ 获取列表-学习详情')
      try {
        const params = {
          id: item.id,
          studyTaskId: item.id,
          userId: item.userId,
          proId: this.proId,
          userType: this.userType,
        }
        console.log('🚀 ~ handleCard ~ params:', params)
        const res = await getLearningDetails(params)
        console.log('🚀 ~ handleCard ~ 详情:', res)
        this.formData = res.data
        console.log('🚀 ~ getList ~ this.formData:', this.formData)
        const res2 = await getLearningFileList(params)
        console.log('🚀 ~ handleCard ~ 文件列表:', res2)
        res2.data.forEach(item => {
          item.url = item.filePath
        })
        // type='课件'
        this.coursewareData = res2.data.filter(item => item.type == '课件')
        // type='考试'
        this.examData = res2.data.filter(item => item.type == '考试')
        this.examData.forEach(item => {
          if (Number(item.score) >= Number(item.passScore)) {
            this.formData.examProgress = 1
          } else {
            this.formData.examProgress = 0
          }
        })
        // type='练习'
        this.learnData = res2.data.filter(item => item.type == '练习')
      } catch (error) {
        console.log('🚀 ~ handleCard ~ 错误:', error)
      }
    },
    // 考试
    handleExam(row) {
      row.isStudyTask = true
      row.type = this.coursewareData && this.coursewareData.length > 0 ? '' : 1
      row.examPaperId = row.id
      row.userId = this.item.userId
      row.taskId = this.item.id
      this.$refs.beforeExamDialog.openDialog(row)
    },
    // 练习
    goExercise(row) {
      console.log('🚀 ~ 练习', row)
      row.isStudyTask = true
      row.userId = this.item.userId
      this.$router.push({
        path: '/educTrainLearn/libertyLearn/exercise',
        query: { ...row },
      })
    },
    // 查看考试详情
    handleDetail(row) {
      console.log('🚀 ~ 查看考试详情', row)
      this.$router.replace({
        path: '/educTrainLearn/examTask/examDetails',
        query: {
          examPaperId: row.id,
          userId: this.item.userId,
          type: 1,
          isStudyTask: true,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.row-item {
  margin-bottom: 20px;
}
</style>
