<template>
  <!-- 评论 -->
  <div class="flex py-2.5 border-b border-border-lighter">
    <!-- 头像 -->
    <div class="w-8 h-8">
      <app-icon
        icon-name="avator"
        class-name="w-8 h-8"
      />
    </div>
    <!-- 内容 -->
    <div class="cotent ml-1">
      <!-- 名称/title -->
      <div class="flex items-center">
        <div class="text-xs text-text-secondary mr-1">{{ comment.name }}</div>
        <c-tag
          v-if="['creator', 'participator'].indexOf(comment.type) > -1"
          :label="comment.type === 'creator' ? '负责人' : '参与人'"
          :color="comment.type === 'creator' ? 'primary' : 'orange'"
        />
      </div>
      <!-- 评论内容 -->
      <div class="my-1 flex text-sm" @click="clickComment(comment)">
        <div v-if="comment.replyTo" class="text-text-secondary">回复{{ comment.replyTo }}：</div>
        <div class="">{{ comment.content }}</div>
      </div>
      <!-- 评论时间 -->
      <div class="text-text-secondary text-xs">{{ comment.time }}</div>
      <!-- 回复 -->
      <div v-if="comment.reply && comment.reply.length > 0"  class="reply">
        <div
          v-for="r in comment.reply"
          :key="r.id"
          class=""
        >
          <comment
            class="last:border-0 last:pb-1"
            :comment="r"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from "vue"
import { Comment } from '@/DTO/comment'

export default Vue.extend({
  name: "Comment",
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-tag': () => import('@/components/common/c-tag.vue')
  },
  props: {
    comment: {
      type: Object as PropType<Comment>,
      default() {
        return {}
      }
    }
  },
  methods: {
    clickComment(comment: Comment) {
      this.$emit('click-comment', comment)
    }
  }
})
</script>

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