<template>
  <div class="note-section">
    <div class="section-header">
      <div class="header-line"></div>
      <h3 class="section-title">{{$t('common.xuxibiji')}}</h3>
    </div>
    
    <div 
      class="add-note-btn gradient" 
      @click="openAddDialog" 
      v-if="info.courseId"
    >
      <div class="btn-content">
        <img :src="addIcon" alt="" class="add-icon">
        <span class="btn-text">{{$t('common.add')}}{{$t('common.xuxibiji')}}</span>
      </div>
      <div class="btn-glow"></div>
    </div>
    
    <div class="note-list">
      <div 
        class="note-item" 
        v-for="(item, index) in list" 
        :key="index"
      >
        <div class="note-info">
          <h4 class="note-title">{{item.noteTitle}}</h4>
          <div class="note-meta">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="time-icon">
              <circle cx="12" cy="12" r="10"/>
              <polyline points="12 6 12 12 16 14"/>
            </svg>
            <span class="update-time">{{$t('common.genxinyu')}} {{item.updateTime || item.createTime}}</span>
          </div>
        </div>
        
        <div class="note-actions">
          <el-button 
            type="primary" 
            plain 
            size="large" 
            :loading="isSubmiting"
            @click="openAddDialog(item)"
            class="action-btn edit-btn"
          >
            <el-icon><EditPen /></el-icon>
            <span class="btn-label">{{$t('common.edit')}}</span>
          </el-button>
          
          <el-button 
            type="danger" 
            plain 
            size="large" 
            @click="handleDelete(item)"
            class="action-btn delete-btn"
          >
            <el-icon><Delete /></el-icon>
            <span class="btn-label">{{$t('common.delete')}}</span>
          </el-button>
        </div>
        
        <!-- <div class="note-indicator"></div> -->
      </div>
    </div>
    
    <div class="pagination-wrapper">
      <Pagination 
        :total="listTotal"
        :page-size="searchFom.pageSize"
        :current-page="searchFom.pageNum"
        @page-change="handlePageChange"
      />
    </div>
    
    <BlockNoteEditorDialog ref="blockNoteEditorDialogRef" @submit="submit"/>
  </div>
</template>
<script setup>
import addIcon from '@/assets/imgs/add.png'
import BlockNoteEditorDialog from '@/components/BlockNoteEditorDialog.vue'
import Pagination from '@/components/Pagination.vue'
import { getnoteList,noteAdd,noteEdit,noteDel, getnoteDetail } from '@/api/note.js'
import { openFullScreenLoading } from '@/utils/util.js'

import { ref, onMounted,reactive,watch,onActivated } from 'vue'
import DGTMessage from '@/utils/message'
import { ElMessageBox } from 'element-plus'
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');
  }
})

onActivated(() => {
 if(props.info.courseId){
    getList('init');
  }
})

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

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
  }
  // 打开loading
  // const loading = openFullScreenLoading();
  const res = await getnoteList(searchFom)
  // 关闭loading
  // loading.close();
  if(res.code === 200){
    listTotal.value = res.total
    list.value = res.rows
  }
};
// 打开添加对话框
const blockNoteEditorDialogRef = ref(null)
const openAddDialog = (item={}) => {
  blockNoteEditorDialogRef.value.openDialog(item);
};
// 提交表单
const submit = (form) => {
  let params = {
    noteId: form.noteId,
    courseId: searchFom.courseId,
    noteTitle: form.noteTitle,
    noteContent: form.noteContent,
  }
  let req = noteAdd
  if(form.noteId){
    req = noteEdit
  }
  // 设置提交状态为true，禁用按钮
  isSubmiting.value = true
  req(params).then(res => {
    console.log(res)
    if(res.code === 200){
      DGTMessage.success(t('common.submitSuccess'))
      getList('init');
    }
  }).finally(() => {
    // 提交完成后，将提交状态设置为false，启用按钮
    setTimeout(() => {
      isSubmiting.value = false
    }, 1000)
  })
};
// 删除笔记
const handleDelete = (item) => {
  ElMessageBox.confirm(t('common.confirm')+t('common.delete')+'?', t('common.delete'), {
    confirmButtonText: t('common.confirm'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(() => {
    noteDel({id: item.noteId}).then(res => {
      if(res.code === 200){
        DGTMessage.success(t('common.delete')+t('common.success'))
        getList('init');
      }
    })
  }).catch(() => {
    DGTMessage.info(t('common.cancel')+t('common.delete'));
  });
};



</script>
<style scoped lang="scss">
.note-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;
    }
  }
  
  .add-note-btn {
    position: relative;
    cursor: pointer;
    margin-top: 8px;
    margin-bottom: 24px;
    padding: 14px 28px;
    color: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 
      0 4px 16px rgba(79, 70, 229, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
    &:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 
        0 12px 32px rgba(79, 70, 229, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
      
      .btn-glow {
        opacity: 1;
        animation: glow-pulse 2s ease-in-out infinite;
      }
      
      .add-icon {
        transform: rotate(90deg) scale(1.1);
      }
    }
    
    &:active {
      transform: translateY(-1px) scale(1);
    }
    
    .btn-content {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      
      .add-icon {
        width: 26px;
        height: 26px;
        filter: brightness(0) invert(1);
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      }
      
      .btn-text {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.02em;
      }
    }
    
    .btn-glow {
      position: absolute;
      top: -50%;
      left: -50%;
      right: -50%;
      bottom: -50%;
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.25), transparent 60%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
  }
  
  @keyframes glow-pulse {
    0%, 100% {
      opacity: 0.6;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
  }
  
  .note-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  
  .note-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.95), rgba(243, 244, 246, 0.95));
    border: 1px solid rgba(229, 231, 235, 0.6);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    
    // &::before {
    //   content: '';
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   right: 0;
    //   bottom: 0;
    //   background: linear-gradient(135deg, rgba(79, 70, 229, 0.03), rgba(124, 58, 237, 0.03));
    //   opacity: 0;
    //   transition: opacity 0.3s ease;
    // }
    
    &:hover {
      transform: translateY(-2px) translateX(4px);
      box-shadow: 
        0 12px 28px rgba(79, 70, 229, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      border-color: rgba(79, 70, 229, 0.2);
      
      &::before {
        opacity: 1;
      }
      
      .note-info {
        .note-title {
          color: #4f46e5;
          transform: translateX(4px);
        }
        
        // .time-icon {
        //   stroke: #4f46e5;
        //   transform: rotate(360deg);
        // }
      }
      
      .note-indicator {
        opacity: 1;
        transform: scaleY(1);
      }
    }
    
    .note-info {
      flex: 1;
      min-width: 0;
      transition: all 0.3s ease;
      
      .note-title {
        font-size: 16px;
        font-weight: 700;
        color: #1f2937;
        margin: 0 0 8px 0;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      .note-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        
        .time-icon {
          width: 14px;
          height: 14px;
          stroke: #9ca3af;
          flex-shrink: 0;
          transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        
        .update-time {
          font-size: 13px;
          color: #9ca3af;
          font-weight: 400;
        }
      }
    }
    
    .note-actions {
      display: flex;
      gap: 10px;
      flex-shrink: 0;
      
      .action-btn {
        padding: 8px 16px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.01em;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-width: 1.5px;
        
        .el-icon {
          margin-right: 0;
          transition: all 0.3s ease;
        }
        
        .btn-label {
          margin-left: 6px;
        }
        
        &.edit-btn {
          background: rgba(79, 70, 229, 0.08);
          border-color: rgba(79, 70, 229, 0.25);
          color: #4f46e5;
          
          &:hover:not(:disabled) {
            background: rgba(79, 70, 229, 0.15);
            border-color: rgba(79, 70, 229, 0.4);
            color: #4338ca;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
            
            // .el-icon {
            //   transform: rotate(-180deg);
            //   color: #4338ca;
            // }
          }
          
          &:active:not(:disabled) {
            transform: translateY(0);
          }
          
          &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
          }
        }
        
        &.delete-btn {
          background: rgba(239, 68, 68, 0.06);
          border-color: rgba(239, 68, 68, 0.2);
          color: #ef4444;
          
          &:hover:not(:disabled) {
            background: rgba(239, 68, 68, 0.12);
            border-color: rgba(239, 68, 68, 0.35);
            color: #dc2626;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
            
            // .el-icon {
            //   transform: rotate(-180deg);
            //   color: #dc2626;
            // }
          }
          
          &:active:not(:disabled) {
            transform: translateY(0);
          }
        }
      }
    }
    
    .note-indicator {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%) scaleY(0);
      width: 4px;
      height: 60%;
      background: linear-gradient(180deg, #4f46e5, #7c3aed);
      border-radius: 0 3px 3px 0;
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }
  
  .pagination-wrapper {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(229, 231, 235, 0.6);
  }
}

@media (max-width: 768px) {
  .note-section {
    padding: 20px;
    border-radius: 16px;
    
    .section-header {
      margin-bottom: 20px;
      
      .header-line {
        height: 20px;
      }
      
      .section-title {
        font-size: 16px;
      }
    }
    
    .add-note-btn {
      margin-bottom: 20px;
      padding: 12px 24px;
      border-radius: 10px;
      
      .btn-content {
        .add-icon {
          width: 24px;
          height: 24px;
        }
        
        .btn-text {
          font-size: 15px;
        }
      }
    }
    
    .note-list {
      gap: 12px;
    }
    
    .note-item {
      padding: 16px 18px;
      gap: 14px;
      border-radius: 14px;
      flex-direction: column;
      align-items: stretch;
      
      .note-info {
        .note-title {
          font-size: 15px;
        }
        
        .note-meta {
          .time-icon {
            width: 13px;
            height: 13px;
          }
          
          .update-time {
            font-size: 12px;
          }
        }
      }
      
      .note-actions {
        justify-content: flex-start;
        
        .action-btn {
          padding: 7px 14px;
          font-size: 12px;
          
          .btn-label {
            margin-left: 5px;
          }
        }
      }
    }
    
    .pagination-wrapper {
      margin-top: 20px;
      padding-top: 16px;
    }
  }
}

@media (max-width: 480px) {
  .note-section {
    padding: 16px;
    border-radius: 14px;
    
    .section-header {
      margin-bottom: 16px;
      
      .section-title {
        font-size: 15px;
      }
    }
    
    .add-note-btn {
      margin-bottom: 16px;
      padding: 11px 20px;
      border-radius: 10px;
      width: 100%;
      justify-content: center;
      
      .btn-content {
        .add-icon {
          width: 22px;
          height: 22px;
        }
        
        .btn-text {
          font-size: 14px;
        }
      }
    }
    
    .note-list {
      gap: 10px;
    }
    
    .note-item {
      padding: 14px 16px;
      border-radius: 12px;
      
      .note-info {
        .note-title {
          font-size: 14px;
        }
        
        .note-meta {
          .update-time {
            font-size: 11px;
          }
        }
      }
      
      .note-actions {
        flex-direction: column;
        gap: 8px;
        
        .action-btn {
          width: 100%;
          justify-content: center;
        }
      }
    }
    
    .pagination-wrapper {
      margin-top: 16px;
      padding-top: 14px;
    }
  }
}
</style>
