RongGiuangKT/js/indexDetail.js

document.addEventListener('DOMContentLoaded', function () {
    // 学科名称映射
    const subjectMap = {
        'live': '生活',
        'language': '语文',
        'math': '数学'
    };

    // 年级名称映射
    const gradeNames = ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'];

    // 学期名称
    const semesterNames = ['上册', '下册'];

    // 当前视图状态
    let currentView = {
        mode: 'semester', // 'semester' | 'courses'
        subject: null,
        grade: null,
        semester: null
    };

    // 根据学科、年级、学期动态生成图片路径的函数
    function getCourseImagePath(subject, gradeIndex, semesterIndex) {
        const subjectPrefix = {
            'math': 'math',
            'language': 'chinese', // 如果有语文图片的话
            'live': 'life' // 如果有生活图片的话
        };

        const gradeNumber = gradeIndex + 1; // 转换为1-6
        const semesterText = semesterIndex === 0 ? '上' : '下';

        const prefix = subjectPrefix[subject] || subject;
        return `../asset/course_img/${prefix}${gradeNumber}${semesterText}.png`;
    }

    // 当前选中的筛选条件
    let currentFilters = {
        subject: 'math', // 默认选中数学
        grade: 1 // 默认选中二年级 (索引1)
    };

    // 生成学科标签
    function generateSubjectTags() {
        const container = document.getElementById('subject-tags');
        const courseList = GLOBAL_CONFIG.courseList;

        Object.keys(courseList).forEach((subject, index) => {
            const tag = document.createElement('div');
            tag.className = 'filter-tag';
            tag.textContent = subjectMap[subject] || subject;
            tag.dataset.subject = subject;

            if (subject === currentFilters.subject) {
                tag.classList.add('active');
            }

            tag.addEventListener('click', function () {
                container.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                currentFilters.subject = subject;

                // 重置视图状态
                currentView.mode = 'semester';
                updateCourseDisplay();
            });

            container.appendChild(tag);
        });
    }

    // 生成类别标签
    function getCate() {
        const container = document.getElementById('Category');

        if (!container) {
            console.warn('Category container not found');
            return;
        }

        const cates = ['培智学校'];
        container.innerHTML = '';

        cates.forEach((category, index) => {
            const tag = document.createElement('div');
            tag.className = 'filter-tag';
            tag.textContent = category;
            tag.dataset.category = category;

            if (index === 0) {
                tag.classList.add('active');
                if (typeof currentFilters !== 'undefined') {
                    currentFilters.category = category;
                }
            }

            tag.addEventListener('click', function () {
                container.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');

                if (typeof currentFilters !== 'undefined') {
                    currentFilters.category = category;
                }

                // 重置视图状态
                currentView.mode = 'semester';
                updateCourseDisplay();
            });

            container.appendChild(tag);
        });
    }

    // 生成年级标签
    function generateGradeTags() {
        const container = document.getElementById('grade-tags');

        gradeNames.forEach((gradeName, index) => {
            const tag = document.createElement('div');
            tag.className = 'filter-tag';
            tag.textContent = gradeName;
            tag.dataset.grade = index;

            if (index === currentFilters.grade) {
                tag.classList.add('active');
            }

            tag.addEventListener('click', function () {
                container.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                currentFilters.grade = index;

                // 重置视图状态
                currentView.mode = 'semester';
                updateCourseDisplay();
            });

            container.appendChild(tag);
        });
    }

    // 创建返回按钮
    function createBackButton() {
        const backBtn = document.createElement('div');
        backBtn.className = 'back-button';
        backBtn.innerHTML = `
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="m12 19-7-7 7-7"/>
                <path d="m19 12H5"/>
            </svg>
            返回学期选择
        `;

        backBtn.addEventListener('click', function () {
            currentView.mode = 'semester';
            updateCourseDisplay();
        });

        return backBtn;
    }

    // 显示学期卡片
    function displaySemesterCards() {
        const container = document.getElementById('materials-container');
        const courseList = GLOBAL_CONFIG.courseList;

        // 清空现有内容
        container.innerHTML = '';
        container.className = 'materials-grid'; // 重置为学期卡片样式

        // 为上册和下册分别创建卡片
        semesterNames.forEach((semesterName, semesterIndex) => {
            const courses = courseList[currentFilters.subject]?.[currentFilters.grade]?.[semesterIndex] || [];
            const bookImage = getCourseImagePath(currentFilters.subject, currentFilters.grade, semesterIndex);

            const card = document.createElement('div');
            card.className = 'material-card';

            if (courses.length === 0) {
                card.innerHTML = `
                    <div class="material-cover">
                        <div class="material-image" style="background-image: url('${bookImage}');"></div>
                        <div class="material-info">
                            <h3>${subjectMap[currentFilters.subject]} ${gradeNames[currentFilters.grade]} ${semesterName}</h3>
                            <div class="material-meta">
                                <span style="color: #666; font-size: 14px;">暂无课程内容</span>
                            </div>
                            <div class="course-stats">
                                此册正在筹备中...
                            </div>
                        </div>
                    </div>
                `;
            } else {
                card.innerHTML = `
                    <div class="material-cover">
                        <div class="material-image" style="background-image: url('${bookImage}');"></div>
                        <div class="material-info">
                            <h3>${subjectMap[currentFilters.subject]} ${gradeNames[currentFilters.grade]} ${semesterName}</h3>
                            <div class="material-meta">
                                <span style="color: #666; font-size: 14px;">共${courses.length}个课程</span>
                            </div>
                            <div class="course-stats">
                                点击进入章节学习
                            </div>
                        </div>
                    </div>
                `;

                // 添加点击事件
                card.addEventListener('click', function () {
                    currentView.mode = 'courses';
                    currentView.subject = currentFilters.subject;
                    currentView.grade = currentFilters.grade;
                    currentView.semester = semesterIndex;
                    updateCourseDisplay();
                });
            }

            container.appendChild(card);
        });
    }

    // 显示课程列表
    function displayCourseList() {
        const container = document.getElementById('materials-container');
        const courseList = GLOBAL_CONFIG.courseList;
        const classObject = GLOBAL_CONFIG.classObject;

        // 清空现有内容
        container.innerHTML = '';
        container.className = 'course-grid'; // 使用课程卡片样式

        // 添加返回按钮
        const backBtn = createBackButton();
        container.appendChild(backBtn);

        // 获取当前学期的课程
        const courses = courseList[currentView.subject]?.[currentView.grade]?.[currentView.semester] || [];

        if (courses.length === 0) {
            const emptyCourse = document.createElement('div');
            emptyCourse.className = 'empty-course';
            emptyCourse.innerHTML = `
                <div class="empty-content">
                    <h3>暂无课程</h3>
                    <p>该学期的课程正在筹备中...</p>
                </div>
            `;
            container.appendChild(emptyCourse);
            return;
        }

        // 创建课程卡片
        courses.forEach((course, index) => {
            const courseData = classObject[currentView.subject]?.[course.id];

            const courseCard = document.createElement('div');
            courseCard.className = 'course-card';

            // 生成课程图片路径 - 根据实际的命名规则
            function getCourseSpecificImagePath(subject, grade, semester, courseIndex) {
                const subjectPrefix = {
                    'math': 'math',
                    'language': 'chinese',
                    'live': 'life'
                };

                const gradeNumber = grade + 1;
                const semesterText = semester === 0 ? '上' : '下';
                const prefix = subjectPrefix[subject] || subject;

                // 课程编号从1开始，所以是 courseIndex + 1
                return `../asset/course_img/${prefix}${gradeNumber}${semesterText}${courseIndex + 1}.png`;
            }

            const courseImage = getCourseSpecificImagePath(currentView.subject, currentView.grade, currentView.semester, index);

            courseCard.innerHTML = `
                <div class="course-cover">
                    <div class="course-image" style="background-image: url('${courseImage}');"></div>
                    <div class="course-info">   
                        <h4>${course.name}</h4>
                        <p class="course-description">${course.des}</p>
                        <div class="course-action">
                            ${courseData ? '开始学习' : '课程筹备中'}
                        </div>
                    </div>
                </div>
            `;

            // 如果有课程数据，添加点击事件
            if (courseData) {
                courseCard.addEventListener('click', function () {
                    // 这里可以跳转到具体的课程页面
                    console.log('进入课程:', course.id);
                    // window.location.href = `course.html?id=${course.id}`;
                    window.open(`./courseHome.html?id=${course.id}`);
                });
                courseCard.style.cursor = 'pointer';
            } else {
                courseCard.classList.add('disabled');
            }

            container.appendChild(courseCard);
        });
    }

    // 更新课程显示
    function updateCourseDisplay() {
        if (currentView.mode === 'semester') {
            displaySemesterCards();
        } else if (currentView.mode === 'courses') {
            displayCourseList();
        }
    }

    // 侧边栏菜单交互
    document.querySelectorAll('.sidebar-menu a').forEach(link => {
        link.addEventListener('click', function () {
            document.querySelectorAll('.sidebar-menu li').forEach(li => li.classList.remove('active'));
            this.parentElement.classList.add('active');
        });
    });

    // 初始化页面
    generateSubjectTags();
    generateGradeTags();
    updateCourseDisplay();
    getCate();

    // 1、导航条切换
    const navItems = document.querySelectorAll('.container-header-nav > div');

    navItems.forEach(function (item) {
        item.addEventListener('click', function () {
            // 移除所有 div 元素的 active 类
            navItems.forEach(function (navItem) {
                navItem.classList.remove('active');
            });

            // 为当前点击的 div 元素添加 active 类
            this.classList.add('active');

            // 打开对应的数据 URL 页面
            const url = this.getAttribute('data-url');
            window.open(`./${url}.html`);
        });
    });
});