<template>
  <div class="comment-section">
    <div class="section-header">
      <div class="header-line"></div>
      <h3 class="section-title">{{$t('common.pinglun')}} <span class="comment-count">({{listTotal}})</span></h3>
    </div>
    
    <div class="comment-input-area">
      <div class="avatar-wrapper">
        <el-avatar :size="40" :src="appStore.avatarDefault" class="user-avatar" />
      </div>
      
      <div class="input-container">
        <div class="input-wrapper">
          <el-input 
            type="textarea" 
            v-model="comments" 
            :placeholder="$t('common.pleaseInputCommentContent')"  
            :rows="2"
            autosize
            show-word-limit
            maxlength="500" 
            class="comment-input"
            resize="none"
          />
          <el-button 
            type="primary" 
            :loading="isSubmiting"
            @click="handleSend" 
            class="submit-btn gradient"
          >
            <span v-if="!isSubmiting">{{$t('common.send')}}</span>
            <span v-else>{{$t('common.sending')}}</span>
          </el-button>
        </div>
      </div>
    </div>
    
    <div class="comment-list">
      <div 
        class="comment-item" 
        v-for="(item, index) in list" 
        :key="index"
      >
        <div class="avatar-wrapper">
          <el-avatar :size="40" :src="item.userAvatar || appStore.avatarDefault" class="user-avatar" />
        </div>
        
        <div class="comment-content">
          <div class="comment-header">
            <span class="username">{{item.nickName}}</span>
            <span class="comment-time">{{item.createTime}}</span>
          </div>
          
          <div class="comment-text">
            {{item.content}}
          </div>
          
          <!-- <div class="comment-actions">
            <button class="action-btn like-btn">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="action-icon">
                <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>
              </svg>
            </button>
            
            <button class="action-btn reply-btn">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="action-icon">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
              </svg>
            </button>
          </div> -->
        </div>
      </div>
    </div>
    
    <div class="pagination-wrapper">
      <Pagination 
        :total="listTotal"
        :page-size="searchFom.pageSize"
        :current-page="searchFom.pageNum"
        @page-change="handlePageChange"
      />
    </div>
  </div>
</template>
<script setup>
import DGTMessage from '@/utils/message'
import Pagination from '@/components/Pagination.vue'
import { getCommentList,commentAdd } from '@/api/comment.js'
import { ref, onMounted,reactive,watch, onActivated } from 'vue'
import { useI18n } from 'vue-i18n' 
const { t } = useI18n() 
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore()

const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  }
})
// 防止重复提交的加载状态
const isSubmiting = ref(false)

//监听props.info.courseId变化
watch(() => props.info.courseId, (newVal, oldVal) => {
  if(newVal !== oldVal){
    // 课程ID变化时，重置分页参数
    searchFom.courseId = newVal
    getList('init');
  }
})


const comments = ref('');
const listTotal = ref(0);
const searchFom = reactive({
  courseId: props.info.courseId,
  pageNum: 1,
  pageSize: 10,
})
const list = ref([]);


onActivated(() => {
 if(props.info.courseId){
    getList('init');
  }
})
const handlePageChange = (page, pageSize) => {
  searchFom.pageNum = page;
  if(pageSize)searchFom.pageSize = pageSize;
  // 这里可以添加获取数据的逻辑
  console.log('当前页:', page);
  getList();
}
// 查询寻找工作流列表
const getList = async (type) => {
  if(type === 'init'){
    searchFom.pageNum = 1
  }
  const res = await getCommentList(searchFom)
  if(res.code === 200){
    listTotal.value = res.total
    list.value = res.rows
  }
};
// 发送评论
const handleSend = async () => {
  if(!comments.value){
    DGTMessage.warning(t('common.pleaseInputCommentContent'))
    return
  }
  // 设置提交状态为true，禁用按钮
  isSubmiting.value = true
  const res = await commentAdd({
    courseId: props.info.courseId,
    content: comments.value
  })
  if(res.code === 200){
    DGTMessage.success(t('common.commentSuccess'))
    comments.value = ''
    getList();
  }
  // 提交完成后，将提交状态设置为false，启用按钮
  setTimeout(() => {
    isSubmiting.value = false
  }, 1000)
};



</script>
<style lang="scss">
.comment-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 
    0 8px 32px rgba(79, 70, 229, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  
  .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    
    .header-line {
      width: 4px;
      height: 24px;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      border-radius: 2px;
      box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 700;
      color: #1f2937;
      margin: 0;
      letter-spacing: -0.02em;
      
      .comment-count {
        font-size: 16px;
        color: #6b7280;
        font-weight: 500;
      }
    }
  }
  
  .comment-input-area {
    display: flex;
    gap: 14px;
    margin-bottom: 28px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.03), rgba(124, 58, 237, 0.03));
    border: 1px solid rgba(79, 70, 229, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
    
    &:focus-within {
      border-color: rgba(79, 70, 229, 0.25);
      box-shadow: 
        0 4px 20px rgba(79, 70, 229, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    
    .avatar-wrapper {
      flex-shrink: 0;
      
      .user-avatar {
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
        border: 2px solid rgba(255, 255, 255, 0.9);
      }
    }
    
    .input-container {
      flex: 1;
      min-width: 0;
      
      .input-wrapper {
        display: flex;
        gap: 12px;
        align-items: flex-end;
        
        .comment-input {
          flex: 1;
          
          :deep(.el-textarea__inner) {
            min-height: 44px !important;
            max-height: 120px;
            padding: 12px 16px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            font-size: 14px;
            line-height: 1.6;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.95);
            
            &::placeholder {
              color: #9ca3af;
            }
            
            &:hover {
              border-color: #d1d5db;
            }
            
            &:focus {
              border-color: #4f46e5;
              box-shadow: 
                0 0 0 3px rgba(79, 70, 229, 0.1),
                0 2px 8px rgba(79, 70, 229, 0.08);
            }
          }
          
          :deep(.el-textarea__inner:focus) {
            outline: none;
          }
        }
        
        .submit-btn {
          height: 44px;
          padding: 0 24px;
          border-radius: 10px;
          font-weight: 600;
          font-size: 14px;
          letter-spacing: 0.02em;
          white-space: nowrap;
          flex-shrink: 0;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          background: linear-gradient(135deg, #4f46e5, #7c3aed);
          border: none;
          box-shadow: 
            0 4px 12px rgba(79, 70, 229, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
          
          &:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 
              0 8px 20px rgba(79, 70, 229, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
          }
          
          &:active:not(:disabled) {
            transform: translateY(0);
          }
          
          &:disabled {
            opacity: 0.7;
            cursor: not-allowed;
          }
        }
      }
    }
  }
  
  .comment-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 4px;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(79, 70, 229, 0.15);
      border-radius: 3px;
      
      &:hover {
        background: rgba(79, 70, 229, 0.25);
      }
    }
  }
  
  .comment-item {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: rgba(249, 250, 251, 0.6);
    border: 1px solid rgba(229, 231, 235, 0.5);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    
    &:hover {
      background: rgba(249, 250, 251, 0.9);
      border-color: rgba(79, 70, 229, 0.15);
      box-shadow: 0 4px 16px rgba(79, 70, 229, 0.08);
      transform: translateX(4px);
      
      .comment-content {
        .username {
          color: #4f46e5;
        }
      }
    }
    
    .avatar-wrapper {
      flex-shrink: 0;
      
      .user-avatar {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 2px solid rgba(255, 255, 255, 0.9);
      }
    }
    
    .comment-content {
      flex: 1;
      min-width: 0;
      
      .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        gap: 12px;
        
        .username {
          font-size: 15px;
          font-weight: 600;
          color: #374151;
          transition: color 0.3s ease;
        }
        
        .comment-time {
          font-size: 12px;
          color: #9ca3af;
          white-space: nowrap;
        }
      }
      
      .comment-text {
        font-size: 14px;
        line-height: 1.7;
        color: #4b5563;
        word-break: break-word;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .comment-actions {
        display: flex;
        gap: 12px;
        
        .action-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          border: none;
          background: transparent;
          cursor: pointer;
          border-radius: 8px;
          transition: all 0.3s ease;
          padding: 0;
          
          .action-icon {
            width: 16px;
            height: 16px;
            stroke: #9ca3af;
            transition: all 0.3s ease;
          }
          
          &:hover {
            background: rgba(79, 70, 229, 0.08);
            
            .action-icon {
              stroke: #4f46e5;
              transform: scale(1.1);
            }
          }
          
          &.like-btn:hover .action-icon {
            stroke: #ef4444;
          }
          
          &.reply-btn:hover .action-icon {
            stroke: #4f46e5;
          }
        }
      }
    }
  }
  
  .pagination-wrapper {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(229, 231, 235, 0.6);
  }
}

@media (max-width: 768px) {
  .comment-section {
    padding: 20px;
    border-radius: 16px;
    
    .section-header {
      margin-bottom: 20px;
      
      .header-line {
        height: 20px;
      }
      
      .section-title {
        font-size: 16px;
        
        .comment-count {
          font-size: 14px;
        }
      }
    }
    
    .comment-input-area {
      padding: 14px;
      gap: 12px;
      margin-bottom: 24px;
      border-radius: 14px;
      
      .avatar-wrapper {
        .user-avatar {
          :deep(.el-avatar) {
            width: 36px !important;
            height: 36px !important;
          }
        }
      }
      
      .input-container {
        .input-wrapper {
          flex-direction: column;
          gap: 10px;
          align-items: stretch;
          
          .submit-btn {
            width: 100%;
            height: 40px;
          }
        }
      }
    }
    
    .comment-list {
      gap: 12px;
      max-height: 400px;
    }
    
    .comment-item {
      padding: 14px;
      gap: 12px;
      border-radius: 12px;
      
      .avatar-wrapper {
        .user-avatar {
          :deep(.el-avatar) {
            width: 36px !important;
            height: 36px !important;
          }
        }
      }
      
      .comment-content {
        .comment-header {
          .username {
            font-size: 14px;
          }
          
          .comment-time {
            font-size: 11px;
          }
        }
        
        .comment-text {
          font-size: 13px;
          line-height: 1.6;
        }
        
        .comment-actions {
          gap: 10px;
          
          .action-btn {
            width: 30px;
            height: 30px;
            
            .action-icon {
              width: 15px;
              height: 15px;
            }
          }
        }
      }
    }
    
    .pagination-wrapper {
      margin-top: 20px;
      padding-top: 16px;
    }
  }
}

@media (max-width: 480px) {
  .comment-section {
    padding: 16px;
    border-radius: 14px;
    
    .section-header {
      margin-bottom: 16px;
      
      .section-title {
        font-size: 15px;
      }
    }
    
    .comment-input-area {
      padding: 12px;
      flex-direction: column;
      align-items: center;
      text-align: center;
      
      .avatar-wrapper {
        margin-bottom: 8px;
      }
      
      .input-container {
        width: 100%;
      }
    }
    
    .comment-item {
      flex-direction: column;
      padding: 12px;
      
      .avatar-wrapper {
        align-self: flex-start;
      }
      
      .comment-content {
        .comment-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
        }
        
        .comment-text {
          -webkit-line-clamp: 3;
        }
      }
    }
  }
}
</style>
