useStudyComments.js 5.06 KB
import { ref, watch } from 'vue';
import { getGroupCommentListAPI, addGroupCommentAPI, addGroupCommentLikeAPI, delGroupCommentLikeAPI } from '@/api/course';

/**
 * 学习评论跟踪器
 * @param {*} course 课程对象
 * @returns 学习评论跟踪器对象,包含 commentCount、commentList、newComment、showCommentPopup、popupComment、popupCommentList、popupLoading、popupFinished、popupLimit、popupPage、refreshComments、toggleLike、submitComment 等方法
 */
export const useStudyComments = (course) => {
    const commentCount = ref(0);
    const commentList = ref([]);

    const newComment = ref('');

    const showCommentPopup = ref(false);
    const popupComment = ref('');

    const popupCommentList = ref([]);
    const popupLoading = ref(false);
    const popupFinished = ref(false);
    const popupLimit = ref(5);
    const popupPage = ref(0);

    const refreshComments = async () => {
        if (!course.value?.group_id || !course.value?.id) return;

        const comment = await getGroupCommentListAPI({
            group_id: course.value.group_id,
            schedule_id: course.value.id
        });
        if (comment.code) {
            commentList.value = comment.data.comment_list;
            commentCount.value = comment.data.comment_count;
        }
    };

    const toggleLike = async (comment) => {
        try {
            if (!comment.is_like) {
                const { code } = await addGroupCommentLikeAPI({ i: comment.id });
                if (code) {
                    comment.is_like = true;
                    comment.like_count += 1;
                }
            } else {
                const { code } = await delGroupCommentLikeAPI({ i: comment.id });
                if (code) {
                    comment.is_like = false;
                    comment.like_count -= 1;
                }
            }
        } catch (error) {
            console.error('点赞操作失败:', error);
        }
    };

    const submitComment = async () => {
        if (!newComment.value.trim()) return;
        if (!course.value?.group_id || !course.value?.id) return;

        try {
            const { code } = await addGroupCommentAPI({
                group_id: course.value.group_id,
                schedule_id: course.value.id,
                note: newComment.value
            });

            if (code) {
                await refreshComments();
                newComment.value = '';
            }
        } catch (error) {
            console.error('提交评论失败:', error);
        }
    };

    const onPopupLoad = async () => {
        if (!course.value?.group_id || !course.value?.id) {
            popupLoading.value = false;
            return;
        }

        const nextPage = popupPage.value;
        try {
            const res = await getGroupCommentListAPI({
                group_id: course.value.group_id,
                schedule_id: course.value.id,
                limit: popupLimit.value,
                page: nextPage
            });
            if (res.code) {
                const newComments = res.data.comment_list;
                const existingIds = new Set(popupCommentList.value.map(item => item.id));
                const uniqueNewComments = newComments.filter(item => !existingIds.has(item.id));
                popupCommentList.value = [...popupCommentList.value, ...uniqueNewComments];
                popupFinished.value = res.data.comment_list.length < popupLimit.value;
                popupPage.value = nextPage + 1;
            }
        } catch (error) {
            console.error('加载评论失败:', error);
        }
        popupLoading.value = false;
    };

    const submitPopupComment = async () => {
        if (!popupComment.value.trim()) return;
        if (!course.value?.group_id || !course.value?.id) return;

        try {
            const { code, data } = await addGroupCommentAPI({
                group_id: course.value.group_id,
                schedule_id: course.value.id,
                note: popupComment.value
            });

            if (code) {
                popupCommentList.value = [];
                popupPage.value = 0;
                popupFinished.value = false;
                await onPopupLoad();

                commentCount.value = data.comment_count;
                await refreshComments();
                popupComment.value = '';
            }
        } catch (error) {
            console.error('提交评论失败:', error);
        }
    };

    watch(showCommentPopup, async (newVal) => {
        if (!newVal) return;
        if (!course.value?.group_id || !course.value?.id) return;

        popupCommentList.value = [];
        popupPage.value = 0;
        popupFinished.value = false;
        popupLoading.value = true;

        await refreshComments();
        onPopupLoad();
    });

    return {
        commentCount,
        commentList,
        newComment,
        showCommentPopup,
        popupComment,
        popupCommentList,
        popupLoading,
        popupFinished,
        refreshComments,
        toggleLike,
        submitComment,
        onPopupLoad,
        submitPopupComment
    };
};