<template>
  <div class="app-container">
    <el-row>
      <el-col :span="16">
        <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>
            <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>

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

    <!-- 弹框 -->
    <el-dialog title="提示" :visible.sync="showDialog" width="40%">
      <h3
        class="dia-title"
        v-if="Number(dialogData.correctNum) + Number(dialogData.errorNum) == 0 && !dialogData.lastPracticeQuestionId"
      >
        是否开始练习?
      </h3>
      <div v-else>
        <h3 class="dia-title">练习结果</h3>
        <div class="dia-item">
          <div>练习数: {{ Number(dialogData.correctNum) + Number(dialogData.errorNum) }}</div>
          <div>正确数: {{ dialogData.correctNum }}</div>
          <div>错误数: {{ dialogData.errorNum }}</div>
          <div>上次练习用时: {{ dialogData.practiceTime2 }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="showDialog = false">取 消</el-button> -->
        <el-button
          v-if="Number(dialogData.correctNum) + Number(dialogData.errorNum) == 0 && !dialogData.lastPracticeQuestionId"
          type="primary"
          @click="handleStudy(dialogData, '2')"
        >
          开始练习
        </el-button>
        <el-button v-if="dialogData.lastPracticeQuestionId" type="primary" @click="handleStudy(dialogData, '1')">
          继续练习
        </el-button>
        <el-button
          v-if="Number(dialogData.correctNum) + Number(dialogData.errorNum) > 0 || dialogData.lastPracticeQuestionId"
          type="primary"
          @click="handleStudy(dialogData, '2')"
        >
          重新练习
        </el-button>
        <el-button v-if="Number(dialogData.errorNum) > 0" type="primary" @click="handleStudy(dialogData, '3')">
          错题练习
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CardModule from '../components/CardModule'
import { getSelfDirectedExerciseList } from '@/api/educTrainLearn'

export default {
  components: { CardModule },
  name: 'libertyLearn',
  data() {
    return {
      showDialog: false,
      queryParams: {
        userId: this.$store.state.user.id || '',
        keyWord: '',
      },
      allNum: 20, // 全部
      finishNum: 10, // 已完成
      unFinishNum: 5, // 未完成
      overdueNum: 5, // 逾期
      dataList: [],
      dialogData: {},
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleQuery() {
      this.getList()
    },
    handleReset() {
      this.$refs.queryForm.resetFields()
      this.$tab.refreshPage()
    },
    // 获取列表
    async getList() {
      console.log('🚀 ~ 获取列表-参数', this.queryParams)
      try {
        const res = await getSelfDirectedExerciseList(this.queryParams)
        console.log('🚀 ~ getList ~ 自主练习:', res)
        this.dataList = res.data.data
      } catch (error) {
        console.log('🚀 ~ getList ~ error:', error)
      }
    },
    openDialog(item) {
      console.log('🚀 ~ 打开弹框', item)
      if (item.practiceTime) {
        const time = item.practiceTime
        const hour = Math.floor(time / 3600)
          .toString()
          .padStart(2, '0')
        const minute = Math.floor((time % 3600) / 60)
          .toString()
          .padStart(2, '0')
        const second = (time % 60).toString().padStart(2, '0')
        item.practiceTime2 = `${hour}:${minute}:${second}`
      } else {
        item.practiceTime2 = '00:00:00'
      }
      this.dialogData = item
      this.showDialog = true
    },
    // 练习
    handleStudy(data, type) {
      console.log('🚀 ~ 开始练习', data)
      console.log('🚀 ~ 开始学习-type', type)
      this.$router.push({
        path: '/educTrainLearn/libertyLearn/exercise',
        query: {
          ...data,
          practiceType: type,
        },
      })
    },
  },
}
</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;
}
.dia-title {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.dia-item {
  display: flex;
  justify-content: space-around;
}
</style>
