<template>
  <div>
    <div class="ask">
      <div class="user-1">
        <img class="img-1" :src="avatar" />
        <div class="right-1">
          <div class="name-1">{{data.replier.nickname}}</div>
          <div class="time-1">{{data.created_time}}</div>
        </div>
      </div>
      <div class="text" v-html="data.contents"></div>
      <div class="user">
        <template v-if="data.mine">
          <div
            class="right-txt"
            @click="deleteAnswer(data.id)"
          >{{ $t('pages.learn.discussDetail.delete') }}</div>
        </template>
        <div class="right-txt" @click="$emit('reply', {answer_id: data.id})">{{ $t('pages.learn.discussDetail.reply') }}</div>
        <div
          class="right-txt"
          @click="commentVisible = !commentVisible"
        >{{ $t('pages.learn.discussDetail.discuss') }}({{data.comments.length}})</div>
        <div class="right-txt" @click="$emit('btnlike', {tagId: data.tag ? data.tag.id : null, ansId: data.id})">点赞({{data.tag_count}})</div>
      </div>
      <template v-if="commentVisible">
        <!-- 评论列表 -->
        <template v-for="item in data.comments">
          <reply-item v-on="$listeners" :data="item" :dataId="data.id" :key="item.id"></reply-item>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import * as api from '../api/index.js'
import replyItem from './replyItem.vue'
export default {
  components: { replyItem },
  props: {
    data: { type: Object, default: () => {} }
  },
  data() {
    console.log(this.data)
    return {
      commentVisible: false
    }
  },
  computed: {
    avatar() {
      return this.data.replier.avatar || '../assets/images/person-default.jpg'
    }
  },
  methods: {
    deleteAnswer (id) {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      api.deleteAnswer(id).then(json => {
        this.$emit('updateList')
        this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    }
  }
}
</script>

<style lang="sass" scoped>
</style>
