<template>
  <div class="xuxibiji">
    <div class="gap10">
      <div class="line_vertical"></div>
      <div class="font_size18 bold">{{$t('common.xuxibiji')}}</div>
    </div>
    <div class="addBtn flex-center gradient border_radius_10" @click="openAddDialog" v-if="info.courseId">
      <div class="gap10">
        <img :src="addIcon" alt="" style="width:30px;height:30px">
        <span class="font_size18">{{$t('common.add')}}{{$t('common.xuxibiji')}}</span>
      </div>
    </div>
    <div class="list_item padding16 border_radius_16 mt16 flex-center-between" 
    v-for="(item, index) in list" :key="index">
      <div class="flex_1">
        <div class="bold font_size18">{{item.noteTitle}}</div>
        <div class="gray999 mt5">{{$t('common.genxinyu')}} {{item.updateTime || item.createTime}}</div>
      </div>
      <div>
        <el-button type="primary" plain size="large" 
        :loading="isSubmiting"
        @click="openAddDialog(item)">
          <el-icon><EditPen /></el-icon>
          <span class="ml10">{{$t('common.edit')}}</span>
        </el-button>
        <el-button type="danger" plain size="large" @click="handleDelete(item)">
          <el-icon><Delete /></el-icon>
          <span class="ml10">{{$t('common.delete')}}</span>
        </el-button>
      </div>
    </div>
    <Pagination 
      :total="listTotal"
      :page-size="searchFom.pageSize"
      :current-page="searchFom.pageNum"
      @page-change="handlePageChange"
    />
    <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">
  .xuxibiji{
    .list_item{
      background: #F5F7FA;
    }
    .addBtn{
      cursor: pointer;
      margin-top: 20px;
      padding: 10px 20px;
      color: #fff;
    }

  }

</style>
