<script setup lang="ts">
import { ref } from 'vue'
import type { TnCommentListData } from 'tnuiv3p-tn-comment-list'

const commentList = ref<TnCommentListData>([
  {
    id: 1,
    avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/1.png',
    nickname: '图鸟用户1',
    date: '07-22',
    position: '广东',
    content: '这是一条来自图鸟用户1的评论',
    likeActive: false,
    likeCount: 0,
    dislikeActive: false,
    disabledReply: false,
    allowDelete: false,
    commentCount: 3,
  },
  {
    id: 2,
    avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/2.png',
    nickname: '图鸟用户2',
    date: '07-22',
    position: '广东',
    content: '这是一条来自图鸟用户2的评论',
    likeActive: true,
    likeCount: 1,
    dislikeActive: false,
    disabledReply: false,
    allowDelete: false,
    commentCount: 2,
  },
])
</script>

<template>
  <TnCommentList :data="commentList" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type {
  TnCommentListInstance,
  TnCommentListItem,
  TnShowMoreCommentParams,
} from 'tnuiv3p-tn-comment-list'
// ...列表数据定义...

const commentListRef = ref<TnCommentListInstance>()

const showMoreClickHandle = ({ id }: TnShowMoreCommentParams) => {
  // 通过id去请求该评论的回复列表
  // ...
  const commentData: TnCommentListItem = [
    {
      id: 3,
      avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/3.png',
      nickname: '图鸟用户3',
      date: '07-23',
      position: '广东',
      content: '这是一条来自图鸟用户3的评论',
      likeActive: false,
      likeCount: 0,
      dislikeActive: false,
      disabledReply: false,
      allowDelete: false,
      commentCount: 3,
      comment: [
        {
          id: 5,
          avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/5.png',
          nickname: '图鸟用户5',
          date: '07-23',
          position: '广东',
          content: '这是一条来自图鸟用户5的评论',
          likeActive: false,
          likeCount: 0,
          dislikeActive: false,
          disabledReply: false,
          allowDelete: false,
        },
      ],
    },
    {
      id: 4,
      avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/4.png',
      nickname: '图鸟用户4',
      date: '07-23',
      position: '广东',
      content: '这是一条来自图鸟用户4的评论',
      likeActive: false,
      likeCount: 0,
      dislikeActive: false,
      disabledReply: false,
      allowDelete: false,
    },
  ]
  commentListRef.value?.addCommentData(id, commentData)
}
</script>

<template>
  <TnCommentList :data="commentList" @show-more="showMoreClickHandle" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type {
  TnCommentListInstance,
  TnReplyCommentParams,
} from 'tnuiv3p-tn-comment-list'
// ...列表数据定义...

const commentListRef = ref<TnCommentListInstance>()

const replyClickHandle = ({ id }: TnReplyCommentParams) => {
  // 通过id添加评论到数据库中
  // ...
  commentListRef.value?.addCommentReply(id, {
    id: 10,
    avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/6.png',
    nickname: '图鸟用户6',
    date: '07-24',
    position: '广东',
    content: '这是一条来自图鸟用户6的评论',
    allowDelete: true,
  })
}
</script>

<template>
  <TnCommentList :data="commentList" @reply="replyClickHandle" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TnCommentListInstance } from 'tnuiv3p-tn-comment-list'
// ...列表数据定义...

const commentListRef = ref<TnCommentListInstance>()

const deleteClickHandle = (id: string | number) => {
  // 通过id从数据库中删除评论
  // ...
  commentListRef.value?.deleteCommentReply(id)
}
</script>

<template>
  <TnCommentList :data="commentList" @delete="deleteClickHandle" />
</template>