<template>
  <div class="item-list">
    <div class="user">
      <div class="name">{{data.observer.nickname}}</div>
      <div class="time">{{data.created_time}}</div>
      <template v-if="data.mine">
        <div
          class="right-txt"
          @click="deleteComment(data.id)"
        >{{ $t('pages.learn.discussDetail.delete') }}</div>
      </template>
      <div class="right-txt" @click="reply({answer_id: dataId, to: data.observer.nickname})">{{ $t('pages.learn.discussDetail.reply') }}</div>
    </div>
    <div class="text" v-html="data.comments"></div>
  </div>
</template>
<script>
import * as api from '../api/index.js'
export default {
  props: {
    data: { type: Object, default: () => {} },
    dataId: { type: String, default: () => {} }
  },
  data() {
    return {}
  },
  methods: {
    reply (param) {
      this.$parent.$parent.replyComposeParam(param)
    },
    deleteComment (id) {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      api.deleteComment(id).then(json => {
        this.$parent.$parent.updateList()
        this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    }
  }
}
</script>
