<script lang="ts" setup>
import { ref, computed } from 'vue';
import { ElRate, ElInput, ElSelect, ElOption, ElButton, ElIcon, ElUpload, ElMessage, ElImageViewer } from 'element-plus';
import { Camera, Plus, Message } from '@element-plus/icons-vue';

// 评分等级映射
const ratingLevelMap = {
  1: '差',
  2: '较差',
  3: '一般',
  4: '良好',
  5: '优秀',
};

// 模拟评论数据
const comments = ref([
  {
    id: 1,
    username: '王凯',
    department: '当值经理',
    avatar: '',
    rating: 5,
    content: '问题及时处理，处理结果第一时间反馈，下一步需注重现场卫生',
    createdAt: '2025-11-07 19:42:05',
    images: ['https://picsum.photos/200/150?random=1'],
    showReply: false,
    replyContent: '',
    replies: [
      {
        username: '系统管理员',
        department: '管理部',
        content: '已收到您的反馈，我们会加强现场卫生管理，感谢您的建议！',
        createdAt: '2025-11-07 20:00:00',
      },
    ],
  },
  {
    id: 2,
    username: '张小明',
    department: '管理部',
    avatar: '',
    rating: 4,
    content: '整体不错，细节可以再优化一下',
    createdAt: '2025-11-06 16:30:00',
    images: [],
    showReply: false,
    replyContent: '',
    replies: [],
  },
]);

// 评分
const rating = ref(5);
// 评价内容
const commentContent = ref('');
// 抄送人
const ccPerson = ref('');
// 评论图片
const commentImages = ref<any[]>([]);

// 图片预览相关
const previewVisible = ref(false);
const previewImages = ref<string[]>([]);

// 处理评论图片上传
const handleCommentImageUpload = (options: any) => {
  // 模拟上传成功处理
  const fileData = {
    uid: options.file.uid,
    name: options.file.name,
    url: URL.createObjectURL(options.file),
    status: 'success',
    raw: options.file,
  };
  // 直接通过v-model:file-list绑定，无需手动添加
};

// 处理评论图片移除
const handleCommentImageRemove = (file: any, fileList: any[]) => {
  commentImages.value = fileList;
};

// 预览评论图片
const handleCommentImagePreview = (file: any) => {
  console.log('预览图片', file);
  // TODO: 实现图片预览功能
};

// 评论提交
const handleCommentSubmit = () => {
  if (!commentContent.value.trim() && commentImages.value.length === 0) {
    ElMessage.warning('请输入评论内容或上传图片');
    return;
  }
  console.log('提交评论', { rating: rating.value, content: commentContent.value, ccPerson: ccPerson.value, images: commentImages.value });
};

// 切换回复输入框
const toggleReply = (comment: any) => {
  comment.showReply = !comment.showReply;
};

// 取消回复
const cancelReply = (comment: any) => {
  comment.showReply = false;
  comment.replyContent = '';
};

// 提交回复
const submitReply = (comment: any) => {
  if (!comment.replyContent.trim()) {
    ElMessage.warning('请输入回复内容');
    return;
  }
  
  // 模拟提交回复
  const newReply = {
    username: '当前用户',
    content: comment.replyContent,
    createdAt: new Date().toLocaleString(),
  };
  
  // 添加到回复列表
  if (!comment.replies) {
    comment.replies = [];
  }
  comment.replies.push(newReply);
  
  // 清空回复内容并隐藏回复框
  comment.replyContent = '';
  comment.showReply = false;
  
  ElMessage.success('回复提交成功');
};

// 图片预览
const previewImage = (imageUrl: string) => {
  previewImages.value = [imageUrl];
  previewVisible.value = true;
};

// 关闭图片预览
const closePreview = () => {
  previewVisible.value = false;
};

// 获取评分等级
const getRatingLevel = (rating: number) => {
  return ratingLevelMap[rating as keyof typeof ratingLevelMap] || '';
};
</script>

<template>
  <div class="comment-container">
    <!-- 评价表单 -->
    <div class="comment-form">
      <div class="form-header">
        <div class="rating-section">
          <span class="rating-text">总体评价：</span>
          <ElRate v-model="rating" class="rating-stars" />
        </div>
      </div>
      <div class="form-content">
        <div class="input-section">
          <!-- 使用ElUpload组件实现多图片上传 -->
          <div class="upload-section">
            <ElUpload
              v-model:file-list="commentImages"
              action="#"
              accept=".jpg,.jpeg,.png,.gif"
              list-type="picture-card"
              show-file-list
              :auto-upload="true"
              :drag="false"
              :limit="10"
              :multiple="true"
              :http-request="handleCommentImageUpload"
              :on-remove="handleCommentImageRemove"
              :on-preview="handleCommentImagePreview"
              class="mb-2"
            >
              <div class="flex h-full w-full items-center justify-center">
                <ElIcon class="el-upload__icon">
                  <Plus size="18" />
                </ElIcon>
              </div>
            </ElUpload>
          </div>
          <ElInput
            v-model="commentContent"
            type="textarea"
            :rows="2"
            placeholder="请对执行任务的情况进行点评，您的点评会帮助执行人更好的完善工作哦~"
            class="comment-input"
          />
          <div class="form-footer">
            <div class="footer-left">
              <ElSelect v-model="ccPerson" placeholder="请选择抄送人" class="cc-select">
                <ElOption label="测试抄送人" value="test" />
              </ElSelect>
              <ElButton type="primary" size="small" class="comment-btn" @click="handleCommentSubmit">
                评论
              </ElButton>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论列表 -->
    <div class="comment-list">
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-header">
          <div class="username-section">
            <span class="username">{{ comment.username }}</span>
            <span class="department">({{ comment.department }})</span>
            <div class="rating-section">
              <ElRate v-model="comment.rating" disabled class="rating-stars" />
              <span class="rating-level">{{ getRatingLevel(comment.rating) }}</span>
            </div>
          </div>
        </div>
        <div class="comment-content">
          {{ comment.content }}
        </div>
        <!-- 评论图片 -->
        <div v-if="comment.images && comment.images.length > 0" class="comment-images">
          <img
            v-for="(image, index) in comment.images"
            :key="index"
            :src="image"
            alt="评论图片"
            class="comment-image"
            @click="previewImage(image)"
          />
        </div>
        <!-- 评论时间 -->
        <div class="comment-time">{{ comment.createdAt }}</div>
        <!-- 评论操作 -->
        <div class="comment-footer">
          <div class="comment-actions">
            <ElIcon class="reply-icon">
              <Message class="h-4 w-4" />
            </ElIcon>
            <span class="reply-btn" @click="toggleReply(comment)">回复</span>
          </div>
        </div>
        
        <!-- 回复输入框 -->
        <div v-if="comment.showReply" class="reply-form">
          <ElInput
            v-model="comment.replyContent"
            type="textarea"
            :rows="2"
            placeholder="请输入回复内容"
            class="reply-input"
          />
          <div class="reply-footer">
            <ElButton type="default" size="small" @click="cancelReply(comment)">取消</ElButton>
            <ElButton type="primary" size="small" @click="submitReply(comment)">提交</ElButton>
          </div>
        </div>
        
        <!-- 回复信息 -->
        <div v-if="comment.replies && comment.replies.length > 0" class="reply-list">
          <div v-for="(reply, index) in comment.replies" :key="index" class="reply-item">
            <div class="reply-header">
              <span class="reply-username">{{ reply.username }}</span>
              <span v-if="reply.department" class="reply-department">({{ reply.department }})</span>
            </div>
            <div class="reply-content">{{ reply.content }}</div>
            <div class="reply-time">{{ reply.createdAt }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 图片预览组件 -->
  <ElImageViewer
    v-if="previewVisible"
    :url-list="previewImages"
    @close="closePreview"
  />
</template>

<style scoped lang="scss">
.comment-container {
  width: 100%;
  font-size: 14px;

  .comment-form {
    margin-bottom: 24px;
    padding: 16px 0;
    
    .form-header {
      margin-bottom: 12px;
    }

    .rating-section {
      display: flex;
      align-items: center;
      
      .rating-text {
        color: var(--text-color-secondary);
        font-size: 14px;
        margin-right: 8px;
      }
      
      .rating-stars {
        margin-right: 0;
      }
    }

    .form-content {
      .input-section {
        width: 100%;
        
        .upload-section {
          margin-bottom: 12px;
          
          :deep(.el-upload--picture-card) {
            width: 60px;
            height: 60px;
          }
          
          :deep(.el-upload-list--picture-card .el-upload-list__item) {
            width: 60px;
            height: 60px;
          }
        }
        
        .comment-input {
          margin-bottom: 12px;
          
          :deep(.el-textarea__inner) {
            border-radius: 4px;
            resize: none;
          }
        }
        
        .form-footer {
          .footer-left {
            display: flex;
            align-items: center;
            
            .cc-select {
              width: 200px;
              margin-right: 12px;
            }
            
            .comment-btn {
              padding: 4px 12px;
            }
          }
        }
      }
    }
  }

  .comment-list {
    .comment-item {
      margin-bottom: 20px;
      padding: 0;
      background-color: transparent;
      border: none;
      font-size: 14px;

      .comment-header {
        margin-bottom: 8px;
        
        .username-section {
          display: flex;
          align-items: center;
          
          .username {
            font-weight: 500;
            color: var(--text-color-primary);
            margin-right: 8px;
          }
          
          .department {
            color: var(--text-color-secondary);
            font-size: 13px;
            margin-right: 16px;
          }
          
          .rating-section {
            display: flex;
            align-items: center;
            
            .rating-stars {
              margin-right: 8px;
            }
            
            .rating-level {
              color: #f7ba2a;
              font-size: 13px;
            }
          }
        }
      }

      .comment-content {
        color: var(--text-color-primary);
        line-height: 1.5;
        margin-bottom: 12px;
        padding-right: 20px;
      }

      .comment-images {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;
        
        .comment-image {
          width: 60px;
          height: 60px;
          border-radius: 4px;
          object-fit: cover;
          cursor: pointer;
          transition: transform 0.2s;
          
          &:hover {
            transform: scale(1.05);
          }
        }
      }
      
      /* 评论时间样式 */
      .comment-time {
        font-size: 12px;
        color: #999999;
        margin-top: 8px;
      }
      
      /* 评论操作样式 */
      .comment-footer {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 4px;
        
        .comment-actions {
          display: flex;
          align-items: center;
          
          .reply-icon {
            margin-right: 4px;
            color: #409eff;
            font-size: 12px;
          }
          
          .reply-btn {
            color: #409eff;
            font-size: 12px;
            cursor: pointer;
            
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
      
      /* 回复表单样式 */
      .reply-form {
        margin-top: 12px;
        padding: 12px;
        background-color: var(--bg-color-light);
        border-radius: 4px;
        border: 1px solid var(--border-color);
        
        .reply-input {
          margin-bottom: 12px;
          
          :deep(.el-textarea__inner) {
            border-radius: 4px;
            resize: none;
          }
        }
        
        .reply-footer {
          display: flex;
          justify-content: flex-end;
          gap: 8px;
          
          :deep(.el-button) {
            padding: 4px 12px;
          }
        }
      }
      
      /* 回复列表样式 */
      .reply-list {
        margin-top: 12px;
        margin-left: 40px;
        
        .reply-item {
          margin-bottom: 12px;
          padding: 8px 12px;
          background-color: var(--bg-color-light);
          border-radius: 4px;
          border-left: 3px solid #409eff;
          
          .reply-header {
            margin-bottom: 4px;
            
            .reply-username {
              font-weight: 500;
              color: var(--text-color-primary);
              font-size: 13px;
              margin-right: 4px;
            }
            
            .reply-department {
              color: var(--text-color-secondary);
              font-size: 13px;
            }
          }
          
          .reply-content {
            color: var(--text-color-primary);
            font-size: 13px;
            line-height: 1.4;
            margin-bottom: 4px;
          }
          
          .reply-time {
            font-size: 12px;
            color: #999999;
            text-align: left;
          }
        }
      }
    }
  }
}
</style>
