<template>
  <a-card :bordered="false" :loading="loading">
    <div class="table-page-search-wrapper">
      <div class="flex-center justify-between">
        <div style="flex: 1;">
          <SearchCom
            :form="queryParam"
            :list="queryOptions"
            @search="handleRefresh"
            @reset="
              () => {
                queryParam = {}
                handleRefresh()
              }
            "></SearchCom>
        </div>
        <div class="flex-center" style="flex: 0 0 300px;">
          <a-button @click="handlerGoMycollection(1)" type="link">我的收藏</a-button>
          <a-button @click="handlerGoMycollection(2)" type="link">错题集</a-button>
          <a-button @click="handlerGoMycollection(3)" type="link">答题记录</a-button>
        </div>
      </div>
    </div>
    </br>
    <a-card v-for="(item, index) in dataList" :key="index" :bordered="false" :bodyStyle="{paddingLeft: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}" >
      <template slot="title">
        <b>{{ item.title }}</b><span class="sub-txt">共{{ item.questionCount }}题</span>
      </template>
      <a-row :gutter="16">
        <a-col
          :span="6"
          :lg="4"
          :md="6"
          :sm="8"
          :xs="12"
          v-for="(j, k) in item.list"
          :key="`${index}-${k}`">
          <a-card hoverable style="width: 100%; margin-bottom: 15px;">
            <div class="flex-center"><h4>{{ j.courseName }}</h4></div>
            <div class="flex-center" style="margin-top: 10px;">
              <a-button @click="handlerStart(j)" type="primary" size="small" round>开始答题</a-button>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </a-card>
</template>

<script>
import _ from 'lodash'
import { SearchCom } from '@/components'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { dictToTree } from '@/utils/util'
import { practiceList } from '@/api/practice/practice'

export default {
  components: { SearchCom },
  data () {
    return {
      dataList: [],
      loading: true,
      queryParam: {
        courseType: '' // 课程分类
      },
      queryOptions: [
        { type: 'select-dic-tree', placeholder: '课程分类', key: 'courseType', options: [] }
      ]
    }
  },
  mounted () {
    this.dictionaryDropDown()
    this.initList()
  },
  methods: {
    async initList () {
      const result = await practiceList({ type: this.queryParam.courseType })
      let dataList = []
      if (result.code === 200 && result.data) {
        dataList = Object.keys(result.data).map(item => ({ title: item, list: result.data[item] }))
        dataList = dataList.map(item => ({ ...item, questionCount: _.sumBy(item.list, 'questionCount') }))
      }
      this.dataList = dataList
    },
    handleRefresh () {
      this.initList()
    },
    // 去我的收藏
    handlerGoMycollection (type) {
      console.log('12313')
      this.$router.push({
        path: '/mycollection',
        query: { type: type }
      })
    },
    // 开始答题
    handlerStart (item) {
      const _this = this
      const goExamDetail = function () {
        _this.$router.push({
          path: '/myexamDetail',
          query: { courseId: item.courseId, projectId: item.projectId, practiceType: 1, type: 'practice' }
        })
      }
      if (item.type == 2) {
        this.$confirm({
        title: '提示',
        content: '您上次的练习还未完成,是否继续上次答题?',
        okText: '继续答题',
        cancelText: '重新答题',
        onOk () {
          goExamDetail(2)
        },
        onCancel () {
          goExamDetail(1)
        }
      })
      } else {
          goExamDetail(1)
      }
    },
    dictionaryDropDown () {
      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
        const result = dictToTree(res.data, [], 0)
        this.queryOptions[0].options = result
				this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.sub-txt{
  color: #666;
  font-size: 12px;
  margin-left: 10px;
}
</style>
