<template>
  <a-card :bordered="false" :loading="loading">
    <div class="table-page-search-wrapper">
      <SearchCom
        :form="queryParam"
        :list="queryOptions"
        @search="handleRefresh"
        @reset="
          () => {
            queryParam = {}
            handleRefresh()
          }
        "></SearchCom>
    </div>
    </br>
    <s-table
      ref="table"
      :pageSize="5"
      :columns="columns"
      :data="loadData"
      :alert="options.alert"
      :rowKey="record => record.id">
      <span slot="index" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <template slot="courseName" slot-scope="text, record, index">
        <a-button @click="handlerDetail(record)" type="link" >{{ record.courseName }}</a-button>
      </template>
      <span slot="status" slot-scope="text, record">
        <a-tag color="red">未开始</a-tag>
      </span>
      <template slot="progress" slot-scope="text, record">
        <a-progress :percent="30" />
      </template>
      <span slot="action" slot-scope="text, record, index">
        <a v-if="index % 3 == 1" @click="$refs.userForm.edit(record)">添加课程</a>
        <a v-if="index % 3 == 2" @click="$refs.userForm.edit(record)">继续学习</a>
        <a v-if="index % 3 == 0">已完成学习</a>
        <!-- <a-divider type="vertical"  />
        <a-dropdown v-if="hasPerm('sys:user:resetPwd') || hasPerm('sys:user:grantRole') || hasPerm('sys:user:del')">
            <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
            <a-menu slot="overlay">
            <a-menu-item v-if="hasPerm('sys:user:resetPwd')">
                <a-popconfirm placement="topRight" title="确认重置密码？" @confirm="() => resetPwd(record)">
                <a>重置密码</a>
                </a-popconfirm>
            </a-menu-item>
            <a-menu-item v-if="hasPerm('sys:user:grantRole')">
                <a @click="$refs.userRoleForm.userRole(record)">授权角色</a>
            </a-menu-item>
            <a-menu-item v-if="hasPerm('sys:user:delete')">
                <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
                <a>删除</a>
                </a-popconfirm>
            </a-menu-item>
            </a-menu>
        </a-dropdown> -->
      </span>
    </s-table>
    <MycourseDetail ref="aycourseDetail"></MycourseDetail>
  </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'
import MycourseDetail from './MycourseDetail.vue'
export default {
  components: {
    STable,
    SearchCom,
    MycourseDetail
    // UserForm,
    // UserRoleForm
  },
	data () {
		return {
			loading: true,
      queryParam: {
        classification: '' // 课程分类
      },
      queryOptions: [
        { type: 'input', placeholder: '课程名称', key: 'courseName' },
        { type: 'select-dic-tree', placeholder: '课程类别', key: 'courseType', options: [] }
      ],
      // 表头
      columns: [
        {
          title: '序号',
          width: '80px',
          scopedSlots: { customRender: 'index' },
          align: 'center'
        },
        {
          title: '课程名称',
          dataIndex: 'courseName',
          scopedSlots: { customRender: 'courseName' }
        },
        {
          title: '课程类别',
          dataIndex: 'courseTypeName'
        },
        {
          title: '学习时间',
          dataIndex: 'date'
        },
        {
          title: '课程状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          width: '120px'
        },
        {
          title: '课程进度',
          dataIndex: 'progress',
          scopedSlots: { customRender: 'progress' },
          width: '180px'
        },
        {
          title: '已休学时',
          dataIndex: 'yxxs',
          scopedSlots: { customRender: 'present' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getCourseList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      },
      selectedRows: [], // 选中行的数据
      options: {}
		}
	},
	created () {
    this.dictionaryDropDown()
    this.columns.push({
        title: '操作',
        width: '150px',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
    })
  },
	methods: {
		// 点击详情
    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>
