<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item label="关键字" prop="keyWord">
            <el-input
              v-model="queryParams.keyWord"
              placeholder="请输入关键字"
              clearable v-no-whitespace
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="考试日期范围" prop="timeRange">
            <el-date-picker
              v-model="queryParams.timeRange"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="是否及格" prop="isPass">
            <el-select v-model="queryParams.isPass" placeholder="请选择" clearable>
              <el-option label="及格" value="1"></el-option>
              <el-option label="不及格" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-left: 30px">
      <el-col :span="20">
        <el-tag class="tag-item" @click="handleQuery('')">全部（{{ totalNum }}）</el-tag>
        <el-tag class="tag-item" type="success" @click="handleQuery(1)">已考（{{ finishNum }}）</el-tag>
        <el-tag class="tag-item" type="info" @click="handleQuery(2)">待考（{{ unFinishNum }}）</el-tag>
        <el-tag class="tag-item" type="danger" @click="handleQuery(3)">缺考（{{ overdueNum }}）</el-tag>
      </el-col>
    </el-row>

    <div class="card-wrapper">
      <div class="card-item" v-for="(item, index) in dataList" :key="index">
        <CardModule :isExam="true" :dataObj="item" />
      </div>
      <el-divider v-if="dataList.length == 0">暂无数据</el-divider>
    </div>
  </div>
</template>

<script>
import CardModule from '../components/CardModule'
import { getMyWebExamList, getWebExamStatusCount } from '@/api/educTrainLearn'

export default {
  components: { CardModule },
  name: 'examTask',
  data() {
    return {
      proId: this.$store.state.user.thisIds.proId || '',
      userType: this.$store.state.user.userType,
      queryParams: {
        keyWord: '',
        isPass: '',
        timeRange: [],
        startTime: '',
        endTime: '',
      },
      totalNum: 0, // 总数
      finishNum: 0, // 已考
      unFinishNum: 0, // 待考
      overdueNum: 0, // 缺考
      dataList: [],
      examStatus: '',
    }
  },
  created() {
    this.getList()
    this.getExamStatusNum()
  },
  methods: {
    handleQuery(examStatus) {
      this.examStatus = examStatus
      this.getList()
      this.getExamStatusNum()
    },
    handleReset() {
      this.$refs.queryForm.resetFields()
      this.queryParams = {
        keyWord: '',
        timeRange: [],
        startTime: '',
        endTime: '',
      }
      this.examStatus = ''
      this.getList()
      this.getExamStatusNum()
    },
    // 获取列表
    async getList() {
      this.dataList = []
      try {
        if (this.queryParams.timeRange && this.queryParams.timeRange.length > 0) {
          this.queryParams.startTime = this.queryParams.timeRange[0]
          this.queryParams.endTime = this.queryParams.timeRange[1]
        } else {
          this.queryParams.startTime = ''
          this.queryParams.endTime = ''
        }
        console.log('🚀 ~ 获取列表-参数', this.queryParams)
        const params = {
          proId: this.proId,
          userType: this.userType,
          practiceType: 3,
          examStatus: this.examStatus,
          ...this.queryParams,
        }
        console.log('🚀 ~ 获取列表-参数', params)
        const res = await getMyWebExamList(params)
        console.log('🚀 ~ 获取列表 ~ 考试列表', res)
        this.dataList = res.data.data
        this.dataList.forEach(item => {
          const endTime = new Date(item.time.split(' ~ ')[1]).getTime()
          item.isStudyTask = false
          item.fileName = item.name
          item.statement = item.examStatement
          if (item.score || item.score == '0') {
            item.finish = true
            item.overdue = false
            item.unFinish = false
          } else if (!item.score && item.score != '0' && item.time && endTime < new Date().getTime()) {
            item.finish = false
            item.overdue = true
            item.unFinish = false
          } else {
            item.finish = false
            item.overdue = false
            item.unFinish = true
          }
        })
        // this.finishNum = this.dataList.filter(item => item.finish).length
        // this.overdueNum = this.dataList.filter(item => item.overdue).length
        // this.unFinishNum = this.dataList.filter(item => item.unFinish).length
      } catch (error) {
        console.log('🚀 ~ 获取列表 ~ error', error)
      }
    },
    // 获取任务状态数量
    async getExamStatusNum() {
      try {
        const params = {
          proId: this.proId,
          userType: this.userType,
        }
        const res = await getWebExamStatusCount(params)
        console.log('🚀 ~ 获取任务状态数量 ~ res', res)
        this.totalNum = res.data.totalNum
        this.finishNum = res.data.finishNum
        this.unFinishNum = res.data.unFinishNum
        this.overdueNum = res.data.overdueNum
      } catch (error) {
        console.log('🚀 ~ 获取任务状态数量 ~ error', error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.card-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .card-item {
    width: 33.33%;
    margin: 20px;
  }
}
.tag-item {
  margin-right: 10px;
  cursor: pointer;
}
</style>
