<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <SearchCom
        :form="queryParam"
        :list="queryOptions"
        @search="handleRefresh"
        @reset="
          () => {
            queryParam = {}
            handleRefresh()
          }
        "></SearchCom>
    </div>
    <template v-if="dataList && dataList.length>0">
      <a-card v-for="(item, index) in dataList" :key="index" style="margin-bottom: 15px;">
        <div class="flex-center" >
          <div style="flex: 1;">
            <h3>{{ item.name }}</h3>
            <div><span style="margin-right: 20px;">下载次数{{ item.rightQuestions }}次</span><span>预览次数：{{ item.submitTime }}次</span></div>
          </div>
          <div style="flex: 0 0 200px; text-align: right;">
            <div @click="handlerDown(item)" :span="24" style="margin-bottom: 10px;"><a-button type="primary" size="small" >下载</a-button></div>
            <div @click="handlerPreview(item)" :span="24"><a-button type="danger" size="small">预览</a-button></div>
          </div>
        </div>
      </a-card>
      <div class="flex-center">
        <a-pagination @change="changePagination" :default-current="params.pageNum" :total="total" />
      </div>
    </template>
    <template v-else>
      <a-empty style="margin: 30px 0;" />
    </template>

  </a-card>
</template>

<script>
import { Pagination, Empty } from 'ant-design-vue'
import { SearchCom } from '@/components'
import { dictToTree } from '@/utils/util'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { gerMyresource } from '@/api/myresource/index'

export default {
  components: { SearchCom, 'a-pagination': Pagination, 'a-empty': Empty },
  data () {
    return {
      dataList: [],
      total: 0,
      params: {
        pageSize: 10,
        pageNum: 1
      },
      queryParam: {
        name: '', // 课程分类
        trainWay: ''
      },
      queryOptions: [
        { type: 'select-dic-tree', placeholder: '课程类别', key: 'trainWay', options: [] }
      ]
    }
  },
  created () {
    this.dictionaryDropDown()
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      gerMyresource(this.params).then(res => {
        console.log('>>>>>>', res)
        this.dataList = res.rows
        this.total = res.total
      })
    },
    changePagination (page, size) {
      this.params.pageSize = size
      this.params.pageNum = page
      this.$nextTick(() => {
        this.getList()
      })
    },
    handlerDown () {

    },
    handlerPreview () {},
    handleRefresh () {
      this.getList()
    },
    // 获取数据词典
    dictionaryDropDown () {
      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
        this.queryOptions[1].options = dictToTree(res.data, [], 0)
				this.loading = false
      })
    }
  }
}
</script>

<style lang="less">

</style>
