const types = ['', '公共基础必修课', '公共选修课', '学科基础课', '专业必修课', '专业选修课', '集中性实践教学环节']
const majors = ['', '软件工程', '空间信息', '大数据'];
let courses;

new Vue({
    el: "#course-list-vue",
    data: {
        courses: [],
        types: types,
        majors: majors,
        path: path
    },
    mounted(){
        $.ajax({
            url: path+"/courseAction/list",
            method: "GET",
            success: (data, status, xhr) =>{
                this.courses = data;
            }
        });
    },
    method: {
        edit: ()=>{}
    }
});

function getCourses(){
    $.ajax({
        url:        path+"/courseAction/list",
        method:     "GET",
        success: (data, status, xhr)=>{
            const course_list = document.getElementById('course-list');
            console.log(xhr.status);
            course_list.innerHTML = "<tr class=\"tr-head\"><td class=\"tr-head\" colspan=\"6\">课程信息列表</td></tr> <tr> <td>名称</td> <td>性质</td> <td>学分</td> <td>开设年级</td> <td>开设专业</td> </tr>"
            courses = data;
            for (let i in data){
                const course_tr = document.createElement('tr');
                course_tr.innerHTML="<td>"+ data[i].name +"</td>" +
                    "<td>"+types[data[i].type]+"</td>" +
                    "<td>"+ data[i].credit +"</td>" +
                    "<td>"+ data[i].grade + "</td>" +
                    "<td>"+ majors[data[i].major]+"</td>" +
                    "<td><a class='blue' onclick=\"editCourse("+ i + ")\" " +
                    ">编辑</a> <a class='red' href=\""+path+"/courseAction/delete?id=" +
                    data[i].id+"\">删除</a></td>";
                course_list.appendChild(course_tr);
            }
            const end_tr = document.createElement('tr');
            end_tr.innerHTML="<td><a href=\"#\" class='blue' onclick=\"addCourse()\">添加</a></td><td></td><td></td><td></td><td>" +
                "<a href=\"#\" class='blue' onclick=\"getCourses()\">刷新数据列表</a></td><td></td>";
            course_list.appendChild(end_tr);
        },
        error: ()=>{
            window.location=path+"/login/login.jsp";
        }
    });
}
$(document).ready(getCourses);

function editCourse(i){
    $(".course-editor").load(path+"/course/course_edit.jsp", ()=>{
        const form = document.querySelector('.course-edit');
        form.action = path+"/courseAction/update";
        form.method = "POST";
        const idInput = document.getElementById('id-input');
        idInput.value = courses[i].id;
        const nameInput = document.getElementById('name-input');
        nameInput.value = courses[i].name;
        const typeInput = document.getElementById('type-input');
        typeInput.value = courses[i].type;
        const creditInput = document.getElementById('credit-input');
        creditInput.value = courses[i].credit;
        const yearInput = document.getElementById('grade-input');
        yearInput.value = courses[i].grade;
        const majorInputs = form.querySelectorAll('input[name="major"]');
        majorInputs.forEach((input) => {
            if (parseInt(input.value) === courses[i].major) {
                input.checked = true;
            }
        });

        const noteInput = form.querySelector('#detail-input');
        noteInput.value = courses[i].detail;

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            const gradeInput = document.getElementById('grade-input');
            if (!/^20\d{2}$/.test(gradeInput.value)) {
                alert('请输入合法的四位年份');
                return;
            }

            const nameInput = document.getElementById('name-input');
            console.log(nameInput.value.length)
            console.log(nameInput.value)
            if (nameInput.value.length < 5 || nameInput.value.length > 20){
                alert('请输入5~20位字符');
                return;
            }
            const detailInput = document.getElementById('detail-input');
            if (detailInput.value.length > 200){
                alert('备注超长');
                return;
            }
            $(".course-edit").submit();
        });
    });
}

function addCourse(){
    $(".course-editor").load(path+"/courseAction/course_edit.jsp", ()=>{
        const form = document.querySelector('.course-edit');
        form.action = path+"/course/add";
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            const gradeInput = document.getElementById('grade-input');
            if (!/^20\d{2}$/.test(gradeInput.value)) {
                alert('请输入合法的四位年份');
                return;
            }

            const nameInput = document.getElementById('name-input');
            console.log(nameInput.value.length)
            console.log(nameInput.value)
            if (nameInput.value.length < 5 || nameInput.value.length > 20){
                alert('请输入5~20位字符');
                return;
            }
            const detailInput = document.getElementById('detail-input');
            if (detailInput.value.length > 200){
                alert('备注超长');
                return;
            }
            $(".course-edit").submit();
        });
    });
}

function closeEdit(){
    const editor = document.querySelector('.course-editor');
    editor.innerHTML = "";
}