let form, layer;
let idx = -1; // 默认选中题目的下标
let dataList = []; // 题目数组
let user = getUser();

function setParams(){
    layui.use(['form', 'layer'], function () {
        form = layui.form;
        layer = layui.layer;
        getTopicsAjax(); // 加载考试题目
    })
}

// 初始化题目数据
function initDayExamData(data) {
    dataList.splice(0, dataList.length);
    if (data && data.length > 0) {
        $.each(data,function(index,item){
            // 答案加密
            item.topicAnswer = encrypt(item.topicAnswer);
            dataList.push(item);
        })
        // 加载题目
        renderQuestion(0);
        // 加载答题卡
        setAnswerSheet(data);
        // 交卷状态
        let handPaperStatus = data[0].handPaperStatus;
        if(handPaperStatus === 0){
            $('#operBtn').empty().append('<button class="submit-btn" onclick="handPaper()">我要交卷</button>');
        }else{
            $('#operBtn').empty().append('<button class="submit-btn submitted">已交卷</button>');
        }
    }else{
        $('#topicJump').empty();
    }

    function setAnswerSheet(dataList) {
        idx = dataList && dataList.length > 0 ? 0 : -1; // 默认选中第一个
        $('#currentNum').html(Number(dataList.length > 0));
        $('#totalNum').html(dataList.length || 0);
        renderAnswerSheet();
    }

}

// 初始化答题卡
function renderAnswerSheet(checkIdx) {
    let html = '';
    if (dataList && dataList.length > 0) {
        $.each(dataList, function (index, item) {
            if (item.chooseAnswer && item.chooseAnswer!=='未作答') {
                html += '<div class="circle2 layout answeredQuestions">' + (index + 1) + '</div>'
            } else {
                html += '<div class="circle2 layout">' + (index + 1) + '</div>'
            }
        });
    }
    $('#questionNumber').empty().append(html);
    // 默认选中第一个
    if (html && !checkIdx) {
        setCheckCircleStyle(0);
    } else if (html && checkIdx) {
        setCheckCircleStyle(checkIdx);
    }
    // 设置题号选中样式
    document.querySelectorAll('.circle2').forEach(function (item) {
        item.onclick = function () {
            document.querySelectorAll('.circle2').forEach(function (c) {
                c.classList.remove('selected');
                c.classList.remove('selected2');
            });
            if (this.classList.contains('answeredQuestions')) {
                this.classList.add('selected');
            } else {
                this.classList.add('selected2');
            }
            let number = parseInt($(this).html());
            $('#currentNum').html(number);
            // 设置题目下标
            let direction = number - 1 > idx ? 'right' : 'left';
            if (number - 1 !== idx) {
                idx = number - 1;
                renderQuestion(idx, direction);
            }
        }
    });
}

// 渲染题目
function renderQuestion(idx, direction) {
    const contentDiv = document.getElementById('topic');
    // 1. 先加淡出动画
    if (direction) {
        contentDiv.classList.add(direction === 'left' ? 'fade-out-left' : 'fade-out-right');
        setTimeout(() => {
            // 2. 切换内容
            setTopicData(idx)
            // 3. 移除淡出，加淡入动画
            contentDiv.className = 'question-content ' + (direction === 'left' ? 'fade-in-right' : 'fade-in-left');
            setTimeout(() => {
                contentDiv.className = 'question-content';
            }, 500);
        }, 500);
    } else {
        // 首次渲染
        setTopicData(idx)
        contentDiv.className = 'question-content';
    }
}

function setTopicData(idx) {
    let html = '';
    const q = dataList[idx];
    // 题目
    html += '<div class="question-title" id="question-title">' + (`第${idx + 1}题（<span style="color:#2196f3">${parseInt(q.topicType) === 1 ? '单选题' : '多选题'}</span>）：<br><br>${q.topic}`) + '</div>'
    // 选项
    html += '<div class="options" id="options">'
    let topicOptionArr = q.topicOption.split('|');
    $.each(topicOptionArr, function (index, item) {
        let option = item.split('-')[0];
        if (parseInt(q.topicType) === 1) { // 单选题
            html += "<div class='option' onclick='checkData(this," + JSON.stringify(q) + ")'>" +
                setChooseData(q, item) +
                "<span style='width:calc(100% - 40px);margin-left:16px;' value='" + option + "'>" + item.replace('-', '.') + "</span>" +
                "</div>";
        } else { // 多选题
            html += "<div class='option' onclick='checkData(this," + JSON.stringify(q) + ")'>" +
                setChooseData(q, item) +
                "<span style='width:calc(100% - 40px);margin-left:16px;' value='" + option + "'>" + item.replace('-', '.') + "</span>" +
                "</div>";
        }

    })
    html += '</div>'
    $('#topic').html(html);
    setAnswerData(q);

    // 是否答完题目 赋值
    function setChooseData(q, item) {
        let option = item.split('-')[0];
        let topicAnswer = decrypt(q.topicAnswer), chooseAnswer = q.chooseAnswer, 
            topicType = parseInt(q.topicType);
        let html = "", classValue = "", value = "";
        if (topicType === 1 && !chooseAnswer) { // 单选题-未答题
            html += "<input type='radio' name='option'>";
        } else if (topicType === 2 && !chooseAnswer) { // 多选题-未答题
            html += "<input type='checkbox' name='option'>";
        } else if (topicType === 1 && chooseAnswer) { // 单选题-已答题
            if (topicAnswer === option || chooseAnswer === topicAnswer === option) { // 选择正确
                classValue = "circle correct layout", value = "✔";
            } else if (topicAnswer !== option && option === chooseAnswer) { // 选择错误
                classValue = "circle error layout", value = "×";
            } else {
                classValue = "circle";
            }
            html += "<span class='" + classValue + "'>" + value + "</span>";
        } else if (topicType === 2 && chooseAnswer) { // 多选题-已答题
            if (topicAnswer.indexOf(option) > -1 || (chooseAnswer.indexOf(option) > -1 && topicAnswer.indexOf(option) > -1)) { // 选择正确
                classValue = "square correct layout", value = "✔";
            } else if ((topicAnswer.indexOf(option) > -1 && chooseAnswer.indexOf(option) === -1)
                || (topicAnswer.indexOf(option) === -1 && chooseAnswer.indexOf(option) > -1)) { // 选择错误
                classValue = "square error layout", value = "×";
            } else {
                classValue = "square";
            }
            html += "<span class='" + classValue + "'>" + value + "</span>";
        }
        return html;
    }
}

// 答案赋值
function setAnswerData(q) {
    let html = "", topicType = parseInt(q.topicType);
    if (q.chooseAnswer) { // 选择答案
        html += "<div class='answer-box layout'>" +
            "<div class='answer layout'>" +
            "<p>正确答案</p>" +
            "<p>" + decrypt(q.topicAnswer) + "</p>" +
            "</div>" +
            "<div class='answer layout'>" +
            "<p>我的答案</p>" +
            "<p>" + q.chooseAnswer + "</p>" +
            "</div>" +
            "</div>";
    } else { // 未选择答案
        if (topicType === 2) {
            html += "<div class='save-answer-btn layout'>" +
                "<button class='submit-btn' onclick='saveAnswer(2," + JSON.stringify(q) + ")'>保存答案</button>" +
                "</div>";
        }
    }
    $('#answer').html(html);

}

// 点击选项 选中答案
function checkData(that, q) {
    if (!q.chooseAnswer && q.handPaperStatus === 0) {
        if (parseInt(q.topicType) === 1) { // 单选
            $(that).find('input[name="option"]').attr('checked', true);
            saveAnswer(1, JSON.stringify(q));
        } else if (parseInt(q.topicType) === 2) { // 多选
            let checked = $(that).find('input[name="option"]').attr('checked');
            $(that).find('input[name="option"]').attr('checked', checked ? false : true);
        }
    }
}

// 题目跳转 上一题/下一题
function topicJump(type) {
    if (dataList && dataList.length === 0) {
        return;
    }
    let currentIdx = -1;
    if (type === 1) { // 上一题
        currentIdx = idx - 1
        if (currentIdx < 0) {
            return layer.msg('已经是第一题啦', { icon: 7 });
        }
    } else if (type === 2) { // 下一题
        currentIdx = idx + 1
        if (currentIdx > dataList.length - 1) {
            return layer.msg('已经是最后一题啦', { icon: 7 });
        }
    }
    idx = currentIdx;
    renderQuestion(idx, type === 1 ? 'left' : 'right');
    setCheckCircleStyle(idx);
    $('#currentNum').html(idx + 1);
}

// 设置答题卡选中样式
function setCheckCircleStyle(idx) {
    document.querySelectorAll('.circle2').forEach(function (c) {
        c.classList.remove('selected');
        c.classList.remove('selected2');
    });
    let q = dataList[idx];
    if (q.chooseAnswer && q.chooseAnswer!=='未作答') {
        $('.circle2').eq(idx).addClass('selected');
    } else {
        $('.circle2').eq(idx).addClass('selected2');
    }
}