<template>
  <div class="main" v-if="detail.id">
    <!-- 当前评论 -->
    <div class="comment-detail">
      <h2>当前评论</h2>
      <comment-item
        relatedType="1"
        :data="detail"
        :activityId="activityId"
        :hasReply="false"
        :hasRemove="false"
        :clickDisabled="true"
      ></comment-item>
    </div>
    <!-- 全部回复 -->
    <comment-list
      title="全部回复"
      relatedType="2"
      :showLength="false"
      :hasReply="false"
      :clickDisabled="true"
      :data="detail.comments"
      :activityId="activityId"
      :related="detail"
      @update="getDetail"
    ></comment-list>
  </div>
</template>

<script>
import CommentList from '@/components/CommentList'
import CommentItem from '@/components/CommentItem'
import * as api from '@/api/index'

export default {
  components: { CommentList, CommentItem },
  data() {
    return {
      detail: { comments: [] }
    }
  },
  computed: {
    pid() {
      return this.$route.params.commentId
    },
    activityId() {
      return this.$route.params.id
    }
  },
  methods: {
    getDetail() {
      const toast = this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      api
        .getComment(this.activityId, {
          reply_id: this.pid,
          activity_id: this.activityId
        })
        .then(response => {
          this.detail = response
          toast.clear()
        })
        .catch(toast.clear)
    }
  },
  beforeMount() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.comment-detail {
  padding-top: 20px;
  h2 {
    font-size: 18px;
    font-weight: normal;
  }
  .card {
    border: 0;
  }
}
</style>
