<template>
  <div class="comment-list">
    <reply-item
      v-for="item in list"
      :isAnswer="isAnswer"
      :detail="detail"
      :data="item"
      :key="item.id"
      v-on="$listeners"
    ></reply-item>
    <!-- 评论框 -->
    <div class="comments-publish">
      <div class="discuss-publish">
        <el-input
          class="discuss-publish-textarea"
          resize="none"
          placeholder="写下你的评论……"
          v-model="publishText"
        ></el-input>
        <el-button type="primary" @click="handlePublish">{{ $t('DiscussModule.DiscussDetail.send') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '../api/index.js'
import replyItem from './replyItem.vue'
export default {
  components: { replyItem },
  props: {
    list: { type: Array, default: () => [] }, // 评论列表
    data: { type: Object, default: () => ({}) }, // 回答数据
    detail: { type: Object, default: () => ({}) } // 详情数据
  },
  data() {
    return {
      publishText: ''
    }
  },
  computed: {
    isAnswer() {
      return !!this.data.id
    }
  },
  methods: {
    // 发布评论
    handlePublish() {
      if (!this.publishText) {
        return this.$message.error('请输入内容')
      }
      const params = {
        answer_id: this.data.id,
        semester_id: this.detail.semester_id,
        comments: this.publishText
      }
      if (this.isAnswer) {
        params.questionId = this.detail.id
      } else {
        params.question_id = this.detail.id
      }
      api.callbackComment(params).then(res => {
        this.publishText = ''
        this.$emit('update')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-list {
  margin-top: 20px;
  border-radius: 4px;
  border: 1px solid #ebebeb;
  box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
}
.comments-publish {
  border-top: 1px solid #f6f6f6;
  padding: 20px;
}
</style>
