<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 })">
          {{ $t('pages.learn.discussDetail.like') }}({{ 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'
import defaultAvatar from '../assets/images/person-default.jpg'
export default {
  components: { replyItem },
  props: {
    data: { type: Object, default: () => {} }
  },
  data() {
    return {
      commentVisible: false
    }
  },
  computed: {
    avatar() {
      return this.data.replier.avatar || defaultAvatar
    }
  },
  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') })
        })
        .finally(() => {
          loading.close()
        })
    }
  }
}
</script>

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