<template>
  <div>
    <chapter-work-answer-item :data="data" :index="index" :key="data.id" v-bind="$attrs">
      <h3 class="comment-title">{{ $t('viewerWork.commentMyTitle') }}</h3>
      <v-editor v-model="data.comment" :disabled="disabled"></v-editor>
    </chapter-work-answer-item>
    <chapter-work-comment-and-reply :data="data" v-on="$listeners" :show-first="false" :title="nickname" />
  </div>
</template>

<script>
// componets
import ChapterWorkAnswerItem from './chapterWorkAnswerItem.vue'
import VEditor from '@/components/tinymce'
import chapterWorkCommentAndReply from './chapterWorkCommentAndReply.vue'

export default {
  props: { data: { type: Object, default: () => ({}) }, disabled: { type: Boolean }, index: { type: Number } },
  components: { ChapterWorkAnswerItem, VEditor, chapterWorkCommentAndReply },
  data() {
    return {}
  },
  computed: {
    nickname() {
      const name = this.data.personal_name
      return name ? name + this.$t('viewerWork.student') : this.$t('viewerWork.student') + (this.index + 1)
    }
  }
}
</script>

<style lang="scss">
.comment-title {
  margin: 10px 0;
  font-size: 14px;
  font-weight: normal;
}
</style>
