<template>
  <container :title="$t('viewerWork.commentToMeTitle')">
    <template v-for="(item, index) in list">
      <div class="module-item" :key="index">
        <div class="module-item-hd"><div>{{ $t('viewerWork.comment') }}{{ index + 1 }}:</div><div class="time">{{ item.created_time }}</div></div>
        <div class="module-item-bd">
          <chapter-work-comment-and-reply
            :data="item"
            :title="$t('viewerWork.comment') + (index + 1)"
            :key="item.id"
            @update="getList"
          />
        </div>
      </div>
    </template>
  </container>
</template>

<script>
// api
import * as api from '../../api'
// componets
import Container from '../common/container.vue'
import showMore from '@/components/showMore'
import chapterWorkCommentAndReply from './chapterWorkCommentAndReply.vue'
export default {
  props: { id: { type: String } },
  components: { Container, showMore, chapterWorkCommentAndReply },
  data() {
    return {
      list: []
    }
  },
  computed: {},
  methods: {
    getList() {
      api.getChapterHomeworkComment({ homework_id: this.id }).then((response) => {
        this.list = response
      })
    }
  },
  beforeMount() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.module-item {
  margin-bottom: 20px;
}
.module-item + .module-item {
  margin-top: 10px;
}
.module-item-hd {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .time {
    font-size: 12px;
    color: #999;
  }
}
</style>
