<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 type="link">我的收藏</a-button>
          <a-button type="link">错题集</a-button>
          <a-button type="link">答题记录</a-button>
        </div>
      </div>
    </div>
    </br>
    <a-card v-for="(item, index) in 6"  :key="index" :bordered="false" :bodyStyle="{paddingLeft: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}" >
      <template slot="title">
        <b>安全生产法律法规</b><span class="sub-txt">共999题</span>
      </template>
      <a-row :gutter="16">
        <a-col
          :span="6"
          :lg="4"
          :md="6"
          :sm="8"
          :xs="12"
          v-for="(item, index) in 8"
          :key="index">
          <a-card hoverable style="width: 100%; margin-bottom: 15px;">
            <div class="flex-center"><h4>建筑工程相关安全生产法律</h4></div>
            <div class="flex-center" style="margin-top: 10px;">
              <a-button type="primary" size="small" round>开始答题</a-button>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </a-card>
</template>

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

export default {
  components: { SearchCom },
  data () {
    return {
      loading: true,
      queryParam: {
        classification: '' // 课程分类
      },
      queryOptions: [
        { type: 'select-dic-tree', placeholder: '课程分类', key: 'courseType', options: [] }
      ]
    }
  },
  mounted(){
    this.dictionaryDropDown()
  },
  methods: {
    handleRefresh () {

    },
    dictionaryDropDown () {
      dictionaryDropDown({ dictionaryCode: '0009' }).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>
