<template>
  <div class="reply-item">
    <div class="user">
      <img class="user-avatar" :src="avatar" />
      <div class="user-content">
        <div class="user-name">{{ data.observer.nickname }}</div>
        <div class="user-publishtime">{{ data.created_time }}</div>
      </div>
    </div>
    <div class="reply-content" v-html="contentHtml"></div>
    <div class="tools">
      <div class="right-txt" @click="toggleReply">
        <i class="el-icon-edit"></i> {{ $t('DiscussModule.DiscussDetail.reply') }}
      </div>
      <div class="right-txt" v-if="data.mine" @click="handleDelete(data.id)">
        <i class="el-icon-delete"></i> {{ $t('DiscussModule.DiscussDetail.delete') }}
      </div>
    </div>
    <div class="discuss-publish" v-if="visible">
      <el-input
        class="discuss-publish-textarea"
        resize="none"
        :placeholder="publishPholder"
        v-model="publishText"
        ref="input"
      ></el-input>
      <el-button type="primary" @click="handlePublish">{{ $t('DiscussModule.DiscussDetail.send') }}</el-button>
    </div>
  </div>
</template>
<script>
import * as api from '../api/index.js'
import defaultAvatar from '../assets/images/person-default.jpg'

export default {
  props: {
    isAnswer: { type: Boolean, default: false },
    data: { type: Object, default: () => {} },
    detail: { type: Object, default: () => {} }
  },
  data() {
    return {
      visible: false,
      publishText: ''
    }
  },
  computed: {
    avatar() {
      return this.data.observer.avatar || defaultAvatar
    },
    contentHtml() {
      return this.data.comments.replace(/\n/g, '<br />')
    },
    publishPholder() {
      return this.data.mine ? '回复' + this.data.observer.nickname + '：' : '评论'
    }
  },
  methods: {
    // 删除评论
    handleDelete(id) {
      api.deleteComment(id).then(json => {
        this.$emit('update')
        this.$message({ type: 'success', message: this.$t('DiscussModule.DiscussDetail.deleteSuccess') })
      })
    },
    // 回复
    toggleReply() {
      this.visible = !this.visible
      this.$nextTick(() => {
        this.visible && this.$refs.input.focus()
      })
    },
    // 发布
    handlePublish() {
      if (!this.publishText) {
        return this.$message.error('请输入内容')
      }
      const comments = `回复${this.data.observer.nickname}：${this.publishText}`
      const params = {
        semester_id: this.detail.semester_id,
        comments,
        to: this.data.observer.nickname
      }
      if (this.isAnswer) {
        params.answer_id = this.data.relate_id
        params.questionId = this.detail.id
      } else {
        params.question_id = this.detail.id
      }
      api.callbackComment(params).then(res => {
        this.visible = false
        this.publishText = ''
        this.$emit('update')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.reply-item + .reply-item {
  border-top: 1px solid #f6f6f6;
}
.reply-item {
  margin: 20px;
}
.discuss-publish {
  margin-top: 10px;
}
</style>
