<template>
  <container :title="$t('viewerWork.submittedAssignments')">
    <chapter-work-answer-item v-for="item in list" :data="item" :key="item.id" />
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page.sync="page.currentPage"
      :page-size="page.limit"
      :total="page.total"
      :hide-on-single-page="true"
      @current-change="handleCurrentChange"
      style="margin: 0 auto; padding: 40px 0; text-align: center"
    ></el-pagination>
  </container>
</template>

<script>
// api
import * as api from '../../api'
// componets
import Container from '../common/container.vue'
import chapterWorkAnswerItem from './chapterWorkAnswerItem.vue'

export default {
  components: { Container, chapterWorkAnswerItem },
  data() {
    return {
      list: [],
      page: {
        offset: 0,
        total: 0,
        currentPage: 1,
        limit: 10
      }
    }
  },
  computed: {
    // 学期ID
    sid() {
      return this.$route.params.sid
    },
    // 课程ID
    cid() {
      return this.$route.params.cid
    },
    // 当前页面的ID
    pid() {
      return this.$route.params.id
    }
  },
  methods: {
    getList() {
      const params = { offset: this.page.offset, limit: this.page.limit }
      api.getChapterHomeworkOtherAll(this.sid, this.cid, this.pid, params).then(response => {
        this.list = response.data
        this.page.total = parseInt(response.count)
      })
    },
    handleCurrentChange() {
      this.page.offset = (this.page.currentPage - 1) * this.page.limit
      this.getList()
    }
  },
  beforeMount() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.more {
  text-align: center;
  padding-top: 40px;
}
</style>
