<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';
import ConsultComponent from './consult.vue';
// 模拟评论数据
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 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 closePreview = () => {
  previewVisible.value = false;
};
</script>

<template>
  <div class="comment-container">
    <!-- 评价表单 -->
    <div class="comment-form">
      <div class="form-header">
        <div class="rating-section">
          <span class="rating-text">评价：</span>
          <el-rate
            v-model="rating"
            :texts="['1分', '2分', '3分', '4分', '5分']"
            show-text
          />
        </div>
      </div>
      <div class="form-content">
        <div class="input-section">
          <div class="rating-section">
            <span class="rating-text">评价：</span>
            <ElInput
              v-model="commentContent"
              type="textarea"
              :rows="2"
              placeholder="请对执行任务的情况进行点评，您的点评会帮助执行人更好的完善工作哦~"
              class="comment-input"
            />
          </div>
          <div class="rating-section">
            <span class="rating-text">照片：</span>
            <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>
        </div>
      </div>
      <el-button style="margin-top: 8px" type="primary">提交</el-button>
    </div>
    <div>
      <ConsultComponent />
    </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;
        white-space: nowrap;
      }

      .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>
