<template>
  <container :title="$t('viewerWork.commentTitle')">
    <chapter-work-comment-item
      v-for="(item, index) in list"
      :data="item"
      :key="item.id"
      :index="index"
      v-bind="$attrs"
      @update="getList"
    />
    <div class="more">
      <router-link :to="`${$route.path}/answers`" target="_blank">
        <el-button round>{{ $t('viewerWork.answerMoreButtonText') }}</el-button>
      </router-link>
    </div>
  </container>
</template>

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

export default {
  components: { Container, ChapterWorkCommentItem },
  data() {
    return {
      list: []
    }
  },
  computed: {
    // 学期ID
    sid() {
      return this.$route.params.sid
    },
    // 课程ID
    cid() {
      return this.$route.params.cid
    },
    // 当前页面的ID
    pid() {
      return this.$route.params.id
    }
  },
  methods: {
    getList() {
      api.getChapterHomeworkOther(this.sid, this.cid, this.pid).then(response => {
        this.list = response
      })
    }
  },
  beforeMount() {
    this.getList()
  }
}
</script>

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