{% extends "bee_django_course/user_base.html" %}
{% load bootstrap3 %}
{% load static %}
{% load bee_django_course_filter %}
{% block styles %}
    <style>

        .question_view_div {
            margin: 10px;
            padding: 10px;
        }

        .question_answer_worng {
            background-color: #FFFAE4;

        }

    </style>
{% endblock %}
{% block content %}

    <div id="questions">
        <question-answer v-for="question in questions" :key="question.id"
                         :question="question"></question-answer>
    </div>
    <div id="submit_answers">

        {% verbatim %}

        <div v-if="result==false">
            <button @click="check_answers()">提交</button>
        </div>
        <div v-else>恭喜你！全答对啦</div>
        <div v-if="url">
            <a :href="String(url)">返回</a>
        </div>
        <div v-if="error_message">{{ error_message }}</div>
        {% endverbatim %}
    </div>



{% endblock %}

{% block scripts %}
    <script src="{% static 'bee_django_course/vue/vue.js' %}"></script>
    <script src="{% static 'bee_django_course/axios/axios.min.js' %}"></script>
    {% verbatim %}

    <script type="text/x-template" id="question-answer-template">
        <div class="question_view_div">
            <div> {{ question.question }}

            </div>
            <div id="question">
                <div v-for="option in question.options" :key="option.id">
                    <input type="radio" :value="option.id" v-model="answer" @change="submit_answer">{{
                    option.option}}
                </div>


            </div>
            <div>
                <div style="color: green" v-if="question.result == 'correct' ">{{ question.tip_correct }}</div>
                <div style="color: red" v-if="question.result == 'wrong' ">{{ question.tip_wrong }}</div>
            </div>
        </div>

    </script>

    {% endverbatim %}
    <script type="text/javascript">

        var section_id = '{{ucs.id}}';
        var ucs_id = '{{ucs.id}}';
        var url = '{{ url }}';

        $(document).ready(function () {

            load_questions()
        });

        function load_questions() {
            var url = "{{ ex_url}}" + '/course/section/question/list_json/' + section_id + "/";
            axios.get(url).then(function (resp) {
                if (resp.data.error == 0) {
                    var question_list = resp.data.question_list;
                    question_list = JSON.parse(question_list);
                    for (var i = 0; i < question_list.length; i++) {
                        question_list[i]["result"] = ""
                    }
                    questions_vm.questions = question_list;
                }

            });
        }


        {#===回答问题区===#}
        var question_answer_cp = Vue.component('question-answer', {
                    props: {
                        question: Object
                    },
                    data: function () {
                        return {answer: ""}
                    },
                    template: '#question-answer-template',
                    methods: {
                        submit_answer: function () {
                            this.question.answers = [this.answer];

                        }
                    }

                })
                ;
        var questions_vm = new Vue({
            el: '#questions',
            data: {
                questions: []
            }

        });
        {#===回答问题区完===#}

        {#===验证答案区===#}
        var submit_answers = new Vue({
            el: '#submit_answers',
            data: {result: false, url: null, error_message: null},
            components: {
                "question_answer_cp": question_answer_cp
            },
            methods: {
                check_answers: function () {
                    var rc = true;
                    var questions = questions_vm.questions;
                    for (var i = 0; i < questions.length; i++) {
                        var res = check_answers(questions[i]);
                        if (!res) {
                            rc = false
                        }
                    }

                    if (rc) {
                        this.error_message = "网络错误，请重新提交";
                        {#向服务器提交结果#}
                        var url = '{{ ex_url }}' + '/ucs_question_passed/' + ucs_id;
                        var params = new FormData();
                        params.append("ucs_id", ucs_id);
                        axios.defaults.xsrfCookieName = 'csrftoken';
                        axios.defaults.xsrfHeaderName = 'X-CSRFToken';
                        var _this = this;
                        axios.post(url, params).then(function (resp) {
                            _this.url = resp.data.return_link;
                            _this.result = rc;
                            _this.error_message = null;
                        })

                    }
                }
            }

        });

        function check_answers(question) {
            var options = question.options;
            var answers = question.answers;
            if (!question.answers) {
                question["result"] = 'wrong';

                return;
            }
            if (answers.length == 0) {
                question["result"] = "wrong";
                return;
            }
            var correct_answers = [];
            for (var i = 0; i < options.length; i++) {
                if (options[i].is_correct) {
                    correct_answers.push(options[i].id)
                }
            }
            if (correct_answers.length != answers.length) {
                question["result"] = 'wrong';
                return;
            }
            for (var j = 0; j < correct_answers.length; j++) {
                var index = $.inArray(correct_answers[j], answers);
                if (index < 0) {
                    question["result"] = 'wrong';
                    return;
                }
            }
            question["result"] = 'correct';
            return true


        }
        {#===验证答案区完===#}


    </script>


{% endblock %}