<template>
  <view class="comment-list">
    <!-- 评论列表 -->
    <view v-for="comment in comments" :key="comment.id" class="comment-item">
      <!-- 一级评论 -->
      <view class="comment-main">
        <view class="user-info">
          <image 
            :src="comment.user.avatar || defaultAvatar" 
            class="avatar"
            mode="aspectFill"
          />
          <text class="username">{{ comment.user.name }}</text>
        </view>
        
        <view class="comment-content">
          <view class="content-html" v-html="comment.content"></view>
          
          <!-- 图片列表 -->
          <view v-if="comment.imgList && comment.imgList.length > 0" class="image-list">
            <image
              v-for="(img, imgIndex) in comment.imgList"
              :key="imgIndex"
              :src="img"
              class="comment-image"
              mode="aspectFill"
              @click="previewImage(img, comment.imgList)"
            />
          </view>
        </view>
        
        <view class="comment-actions">
          <text class="time">{{ comment.createTime }}</text>
          <view class="action-btns">
            <wd-button
              size="small"
              custom-class="action-btn"
              :type="comment.support ? 'primary' : 'default'"
              @click="handleLike(comment.id)"
            >
              <wd-icon name="thumb-up" />
              <text class="btn-text">{{ comment.supportCount || 0 }}</text>
            </wd-button>
            <wd-button
              size="small"
              custom-class="action-btn"
              @click="handleReply(comment)"
            >
              <wd-icon name="chat" />
              <text class="btn-text">回复</text>
            </wd-button>
          </view>
        </view>
      </view>
      
      <!-- 子评论列表 -->
      <view v-if="comment.Bchildren && comment.Bchildren.length > 0" class="sub-comments">
        <view v-for="subComment in comment.Bchildren" :key="subComment.id" class="sub-comment-item">
          <view class="sub-user-info">
            <image 
              :src="subComment.user.avatar || defaultAvatar" 
              class="sub-avatar"
              mode="aspectFill"
            />
            <text class="sub-username">{{ subComment.user.name }}</text>
          </view>
          
          <view class="sub-comment-content">
            <view class="content-html" v-html="subComment.content"></view>
            
            <!-- 子评论图片 -->
            <view v-if="subComment.imgList && subComment.imgList.length > 0" class="image-list">
              <image
                v-for="(img, imgIndex) in subComment.imgList"
                :key="imgIndex"
                :src="img"
                class="comment-image"
                mode="aspectFill"
                @click="previewImage(img, subComment.imgList)"
              />
            </view>
          </view>
          
          <view class="sub-comment-actions">
            <text class="time">{{ subComment.createTime }}</text>
            <view class="action-btns">
              <wd-button
                size="small"
                custom-class="action-btn"
                :type="subComment.support ? 'primary' : 'default'"
                @click="handleLike(subComment.id)"
              >
                <wd-icon name="thumb-up" />
                <text class="btn-text">{{ subComment.supportCount || 0 }}</text>
              </wd-button>
              <wd-button
                size="small"
                custom-class="action-btn"
                @click="handleReply(subComment)"
              >
                <wd-icon name="chat" />
                <text class="btn-text">回复</text>
              </wd-button>
            </view>
          </view>
        </view>
        
        <!-- 查看更多回复 -->
        <view 
          v-if="comment.children && comment.children.length > comment.Bchildren.length" 
          class="load-more-replies"
          @click="loadMoreReplies(comment)"
        >
          <text>查看更多回复 ({{ comment.children.length - comment.Bchildren.length }})</text>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <view v-if="hasMore" class="load-more-btn">
      <wd-button 
        @click="handleLoadMore" 
        :loading="loading"
        block
      >
        加载更多
      </wd-button>
    </view>
    
    <!-- 已加载全部 -->
    <view v-else-if="comments.length > 0" class="no-more">
      <wd-divider>已加载全部</wd-divider>
    </view>
    
    <!-- 暂无评论 -->
    <view v-else-if="!loading" class="no-comments">
      <text>暂无留言数据</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { IComment } from '@/types/comment'

interface Props {
  comments: IComment[]
  loading: boolean
  hasMore: boolean
  type: 'course' | 'book'
}

const props = defineProps<Props>()

const emit = defineEmits<{
  like: [commentId: number]
  reply: [comment: IComment]
  loadMore: []
}>()

const defaultAvatar = '/static/icon/default-avatar.png'

/**
 * 预览图片
 */
const previewImage = (current: string, urls: string[]) => {
  uni.previewImage({
    current,
    urls,
    longPressActions: {
      itemList: ['很抱歉，暂不支持保存图片到本地'],
    },
  })
}

/**
 * 点赞
 */
const handleLike = (commentId: number) => {
  emit('like', commentId)
}

/**
 * 回复
 */
const handleReply = (comment: IComment) => {
  emit('reply', comment)
}

/**
 * 加载更多
 */
const handleLoadMore = () => {
  emit('loadMore')
}

/**
 * 加载更多回复
 */
const loadMoreReplies = (comment: IComment) => {
  // 显示所有子评论
  comment.Bchildren = [...comment.children]
}
</script>

<style lang="scss" scoped>
.comment-list {
  padding: 20rpx;
  background-color: #fff;
}

.comment-item {
  margin-bottom: 30rpx;
  padding-bottom: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.comment-main {
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .username {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
  
  .comment-content {
    margin-left: 80rpx;
    margin-bottom: 20rpx;
    
    .content-html {
      font-size: 28rpx;
      line-height: 1.6;
      color: #666;
      word-break: break-all;
    }
    
    .image-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20rpx;
      gap: 10rpx;
      
      .comment-image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 8rpx;
      }
    }
  }
  
  .comment-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 80rpx;
    
    .time {
      font-size: 24rpx;
      color: #999;
    }
    
    .action-btns {
      display: flex;
      gap: 20rpx;
      
      .action-btn {
        display: flex;
        align-items: center;
        gap: 8rpx;
        
        .btn-text {
          font-size: 24rpx;
        }
      }
    }
  }
}

.sub-comments {
  margin-left: 80rpx;
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f7f8f9;
  border-radius: 8rpx;
  
  .sub-comment-item {
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .sub-user-info {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      
      .sub-avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-right: 15rpx;
      }
      
      .sub-username {
        font-size: 24rpx;
        color: #666;
      }
    }
    
    .sub-comment-content {
      margin-left: 55rpx;
      margin-bottom: 15rpx;
      
      .content-html {
        font-size: 26rpx;
        line-height: 1.5;
        color: #666;
        word-break: break-all;
      }
      
      .image-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 15rpx;
        gap: 10rpx;
        
        .comment-image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 8rpx;
        }
      }
    }
    
    .sub-comment-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 55rpx;
      
      .time {
        font-size: 22rpx;
        color: #999;
      }
      
      .action-btns {
        display: flex;
        gap: 15rpx;
        
        .action-btn {
          display: flex;
          align-items: center;
          gap: 6rpx;
          
          .btn-text {
            font-size: 22rpx;
          }
        }
      }
    }
  }
  
  .load-more-replies {
    text-align: center;
    padding: 15rpx 0;
    margin-top: 15rpx;
    
    text {
      font-size: 24rpx;
      color: #2979ff;
    }
  }
}

.load-more-btn {
  margin-top: 30rpx;
}

.no-more {
  margin-top: 30rpx;
}

.no-comments {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>
