<template>
  <a-card
    :bordered="false"
    :loading="loading"
  >
    <a-row :gutter="16">
      <a-col
        :span="6"
        :md="4"
        :sm="6"
        v-for="(item, index) in 8"
        :key="index">
        <a-card hoverable style="width: 100%; margin-bottom: 15px;">
          <img
            slot="cover"
            alt="example"
            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
          />
          <div>
            <h4>建筑安全施工生产注意事项</h4>
            <div class="flex-center justify-between">
              <div>课时: 24小时</div>
              <div>选修课</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { userPage, userDel, passwordReset } from '@/api/security/user'
import { getCourseList, deleteCourse } from '@/api/course/course'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { dictToTree } from '@/utils/util'
import { STable, SearchCom } from '@/components'
export default {
  components: {
    STable,
    SearchCom
  },
	data () {
		return {
      dataList: [],
      activeTab: '1',
			loading: true,
      queryParam: {
        classification: '' // 课程分类
      },
      queryOptions: [
        { type: 'input', placeholder: '课程名称', key: 'courseName' },
        { type: 'select-dic-tree', placeholder: '请选择课程类别', key: 'courseType', options: [] }
      ],
      // 表头
      columns: [
        {
          title: '课程名称',
          dataIndex: 'courseName',
          scopedSlots: { customRender: 'courseName' }
        },
        {
          title: '课程类别',
          dataIndex: 'courseTypeName'
        },
        {
          title: '学习时间',
          dataIndex: 'date'
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getCourseList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      },
      selectedRows: [], // 选中行的数据
      options: {}
		}
	},
	created () {
    this.dictionaryDropDown()
  },
	methods: {
    tabChange (key) {
      console.log('key', key)
    },
		// 点击详情
    handlerDetail () {
      this.$refs.aycourseDetail.visible = true
    },
    // 获取数据词典
    dictionaryDropDown () {
      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
        this.queryOptions[1].options = dictToTree(res.data, [], 0)
				this.loading = false
      })
    },
    classificationChange (value) {
      this.queryParam.classification = value
    },
    // 获取列表
    handleRefresh () {

    },
    sysUserDelete (param) {
      userDel(param)
        .then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.$refs.table.refresh()
          } else {
            this.$message.error('删除失败：' + res.msg)
          }
        })
        .catch(err => {
          this.$message.error('删除错误：' + err.msg)
        })
    },
    handleOk () {
      this.$refs.table.refresh()
    }
	}
}
</script>

<style lang="less" scoped>
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
</style>
