<template>
  <a-card :bordered="false" title="自学档案">
    <template slot="extra">
      <a-button size="small" @click="close">返回</a-button>
    </template>
    <div class="table-page-search-wrapper">
      <SearchCom :form="queryParam" :list="queryOptions" @search="handleRefresh" @reset="() => {queryParam = {}, handleRefresh()}"></SearchCom>
    </div>
    <s-table ref="table" size="small" rowKey="id" :columns="columns" :data="loadData"></s-table>
  </a-card>
</template>

<script>
import { STable, SearchCom } from '@/components'
import { getArchivesUserSelfStudyList } from '@/api/archives/user'

export default {
  components: { STable, SearchCom },
  data() {
    return {
      queryParam: { userId: this.$route.query.userId, courseName: '' },
      columns: [
        { title: '课程名称', width: 'auto', align: 'center', dataIndex: 'courseName', key: 'courseName' },
        { title: '课时（分）', width: 'auto', align: 'center', dataIndex: 'classHour', key: 'classHour' },
        { title: '已学学时', width: 'auto', align: 'center', dataIndex: 'alreadyClassHour', key: 'alreadyClassHour' },
      ],
      loadData: parameter => { return getArchivesUserSelfStudyList(Object.assign(parameter, this.queryParam)).then(res => { return res }) }
    }
  },
  computed: {
    queryOptions: function () {
      return [
        { type: 'input', placeholder: '课程名称', key: 'courseName' },
      ]
    }
  },
  methods: {
    handleRefresh() {
      this.queryParam.userId = this.$route.query.userId;
      this.$refs.table.refresh(true)
    },
    // 返回 按钮
    close() {
      this.$router.push({
        path: '/archives/user/Index', query: {
          archivesUserName: this.$route.query.archivesUserName,
          archivesUserOrgId: this.$route.query.archivesUserOrgId,
          archivesUserPageNum: this.$route.query.archivesUserPageNum
        }
      });
    }
  }
}
</script>