<template>
  <container :title="$t('viewerWork.commentToMeTitle')">
    <template v-for="(item, index) in list">
      <div class="module-item" :key="index">
        <div class="module-item-hd">{{ $t('viewerWork.comment') }}{{ index + 1 }}:</div>
        <div class="module-item-bd">
          <show-more>
            <div v-html="item.comment"></div>
          </show-more>
        </div>
      </div>
    </template>
  </container>
</template>

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

export default {
  props: { id: { type: String } },
  components: { Container, showMore },
  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;
}
.module-item-bd {
  padding: 10px;
  border-radius: 8px;
  background-color: #fff;
  font-size: 12pt;
  line-height: initial;
  img {
    max-width: 100%;
  }
}
</style>
