<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../css/iview.css" rel="stylesheet" />
    <link href="../css/mobile.min.css" rel="stylesheet" />
    <script src="../js/vue.min.js"></script>
    <script src="../js/iview.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/mobile_config.js"></script>
    <script src="../js/mobile.min.js"></script>

    <style type="text/css">
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
    <div class="outter" id="vueContent-divs" v-cloak>
        <div class="app-header">
            <div id="wx-header">
                <div class="other">
                    <span onclick="openPageMenu('examRecord.html')"> << </span>
                </div>
                <div class="center" id="app-header-info">
                    <span><b>{{page_model_item.extenKey1}}</b></span>
                </div>
            </div>
        </div>
        <div class="app-content">
            <div class="ware_study_info_div" style="width:100%;text-align:left;padding:0.6rem 0.4rem 0.6rem 0.4rem; ">
                <ul>
                    <li class="title" style="width: 100%;">试卷总分：{{curren_total_score}}分</li>
                    <li class="title" style="width: 100%;">考试得分：{{page_model_item.score}}分</li>
                    <li class="title" style="width: 100%;">是否及格：{{convertExamRecordStatToText(page_model_item.state,page_model_item.isPass)}}</li>
                    <li class="title" style="width: 100%;">答题用时：{{page_model_item.duration}}分钟</li>
                    <li class="title" style="width: 100%;">参考时间：{{formatMsgTime(page_model_item.createTime)}}</li>
                    <li class="title" style="width: 100%;">共答题{{page_model_item.answerCount}}道，其中{{page_model_item.passCount}}道正确，{{page_model_item.errorCount}}道错误，{{(page_model_item.answerCount-page_model_item.passCount-page_model_item.errorCount)}}道未知</li>
                    <li class="title" style="width: 100%;text-align:right;"> <span id="bgDaohangBtn" style="color:#39f;" @click="event_showDaohang_clicke">隐藏导航</span></li>
                </ul>
            </div>
            <div class="exam_examina_nav_div" id="bgDaohangDiv" style="width:100%;text-align:left;padding:0.6rem 0.4rem 0.6rem 0.4rem; ">
                <ul>
                    <li v-for="itCount in page_question_list_items.length" @click="event_exchange_question(itCount-1)" style="">
                        <span v-if="itCount==(curren_pq_index+1)" style="color:#39f;font-weight:700;"> {{itCount}}</span>
                        <span v-else> {{itCount}}</span>
                    </li>
                </ul>
            </div>
            <div class="ware_study_info_div" style="width:100%;text-align:left;padding:0.6rem 0.4rem 0.6rem 0.4rem; ">
                <template v-for="(qt_item, qt_index) in page_question_type_items">
                    <template v-for="(q_item,q_index) in getPaperQuestion_items(qt_item.Type,page_question_list_items)">
                        <div class="miidy_examina_page_nav">
                            <div class="paperViewPaperDiv">{{convertPaperQuestionTypeToText(qt_item,qt_index)}}</div>
                            <div class="paperViewPaperDiv_title" :id="'bg_nav_'+qt_index+'_'+q_index">{{(q_index+1)}}、<span v-html="q_item.Context"></span> （{{q_item.ExtenKey1}} 分）</div>
                            <template v-if="qt_item.Type<=2">
                                <div class="paperViewPaperDiv_content" v-html="q_item.Items">
                                </div>
                            </template>
                            <!--选项与输入面板-->
                            <div class="paperViewPaperDiv_content" style="margin-bottom:10px;">
                                <Radio-Group v-model="q_item.ExtenKey4" v-if="qt_item.Type==1 || qt_item.Type==3">
                                    <Radio :label="convertQuestionOption(it,qt_item.Type)" v-for="(it,i) in q_item.SolutNum">{{convertQuestionOption(it,qt_item.Type)}}选项</Radio>
                                </Radio-Group>
                                <Checkbox-Group v-model="q_item.Solution_Checkboxs" v-if="qt_item.Type==2">
                                    <Checkbox :label="convertQuestionOption(it,qt_item.Type)" v-for="(it,i) in q_item.SolutNum">{{convertQuestionOption(it,qt_item.Type)}}选项</Checkbox>
                                </Checkbox-Group>
                                <i-Input v-model.trim="q_item.ExtenKey4" style="margin-bottom:10px;" rows="5" type="textarea" :placeholder="qt_item.Type==4?'多个填空的答案之间按顺序用|分隔，如“填空A的答案|填空B的答案|填空C的答案”':'请输入您的答案吧'" v-if="qt_item.Type>=4"></i-Input>
                            </div>
                            <div class="paperViewPaperDiv_content" style="margin-bottom:1rem;border:0.1rem solid #f9ebeb;background:#f9ebeb;border-radius:0.6rem;padding-top:0.6rem;padding-bottom:0.6rem">
                                <p>
                                    评判结果：
                                    <span style="font-size:1.2rem; font-weight:bold;color:#124DFF;" v-if="q_item.ExtenKey2=='1'">√ 正确</span>
                                    <span style="font-size:1.2rem; font-weight:bold; color:red;" v-if="q_item.ExtenKey2=='2'">X 错误</span>
                                </p>
                                <p>本题得分：{{q_item.ExtenKey3}}分 </p>
                                <p v-if="page_model_item.extenKey5">正确答案：<span v-html="q_item.Solution"></span> </p>
                                <p>老师评语：{{q_item.ExtenKey5}} </p>
                            </div>
                        </div>
                    </template>
                </template>
            </div>
            <div class="clear"></div>
        </div>
        <div class="app-footer">
            <div id="wx-nav">
                <dl>
                    <i-Button style="width:30%;margin-bottom:0.3rem;margin-right:1rem;" @click="event_page_exam_up_click">上一题</i-Button>
                    <i-Button style="width:30%;margin-bottom:0.3rem;margin-left:1rem;" @click="event_page_exam_next_click">下一题</i-Button>
                    <!--<i-Button style="width:30%;margin-bottom:0.3rem;" @click="event_page_exam_submit_click">提交答卷</i-Button>-->
                </dl>

            </div>
        </div>
    </div>
    <script type="text/javascript">
        var menu_vue = new Vue({
            el: '#vueContent-divs',
            data: {
                //当前题索引
                curren_pq_index:0,
                
                //当前试卷的总分
                current_examRecordId: null,
                curren_total_score: 0,
                page_model_item: [],
                page_question_type_items: [],
                page_question_list_items: [],

            },
            mounted: function () {
                hashLogin();
                this.init_page();
            },
            methods: {
                //初始化页面
                init_page: function () {
                    var then = this;
                    then.current_examRecordId = getUrlParam('examRecordId');
                    then.init_examRecord_info();
                },
                //获取考试信息
                init_examRecord_info: function () {
                    var then = this;
                    var url = "ExamRecord/GetDataByUser";
                    var data = {
                        "examRecordId": then.current_examRecordId
                    };
                    then.loadingCustom();
                    httpRequestByObjectAsync(url, "get", data, false, function (result) {
                        if (result.code == 200) {
                            then.page_model_item = result.jsonValue;
                            if (result.textValue != null && result.textValue != '') {
                                var items = JSON.parse(result.textValue);
                                if (items.length <= 0)
                                    return;
                                //整理数据
                                var arr_items = new Array();
                                $.each(items, function (mtx, model) {
                                    if (arr_items.indexOf(model.Type) < 0) {
                                        then.page_question_type_items.push({
                                            Type: model.Type,
                                            Count: 1,
                                            Score: Number(model.ExtenKey1)
                                        });
                                        arr_items.push(model.Type);
                                    } else {
                                        $.each(then.page_question_type_items, function (mtc, qt_model) {
                                            if (qt_model.Type == model.Type) {
                                                qt_model.Count = qt_model.Count + 1;
                                                qt_model.Score = qt_model.Score + Number(model.ExtenKey1);
                                            }
                                        });
                                    }
                                    //做特殊处理,用于双向绑定Checkbox复选框，将用户的答案绑定到控件中去
                                    if (model.Type == 2 && model.ExtenKey4 != '' && model.ExtenKey4 != null)
                                        model.Solution_Checkboxs = model.ExtenKey4.split(',');
                                    then.curren_total_score = then.curren_total_score + Number(model.ExtenKey1);
                                });
                                //题型排序
                                then.page_question_type_items = sortKey(then.page_question_type_items, 'Type');
                                //将试题放到集合中
                                then.page_question_list_items = items;

                                //处理是否打乱题序,如果不为true/开启，则自动乱序，否则则按试题入库的顺序排序
                                if (then.page_model_item.ExtenKey5 == 'false')
                                    then.page_question_list_items = sortKey(then.page_question_list_items, 'CreateTime');
                            }
                            
                            //激活计时器                          
                            then.$nextTick(function () {
                                $('.miidy_examina_page_nav').eq(0).show();
                            });
                        } else {
                            then.page_model_item = [];
                        }
                        then.$Spin.hide();
                    });

                },
                //显示加载中
                loadingCustom: function () {
                    this.$Spin.show({
                        render: (h) => {
                            return h('div', [
                                h('Icon', {
                                    'class': 'demo-spin-icon-load',
                                    props: {
                                        type: 'ios-loading',
                                        size: 20
                                    }
                                }),
                                h('div', '努力处理中…')
                            ]);
                        }
                    });
                },
                event_page_exam_up_click: function () {      
                    this.curren_pq_index = this.curren_pq_index - 1;
                    if (this.curren_pq_index <= -1) {
                        this.curren_pq_index = 0;
                        this.$Message.error({
                            content: '已经到极限了，没有上一题了！',
                            duration: 5,
                            closable: true
                        });
                        return;
                    }
                    $('.miidy_examina_page_nav').hide();
                    $('.miidy_examina_page_nav').eq(this.curren_pq_index).show();
                },
                event_page_exam_next_click: function () {
                    this.curren_pq_index = this.curren_pq_index + 1;
                    if (this.curren_pq_index >= this.page_question_list_items.length) {
                        this.curren_pq_index = this.page_question_list_items.length-1;
                        this.$Message.error({
                            content: '已经到极限了，没有下一题了！',
                            duration: 5,
                            closable: true
                        });
                        return;
                    }
                    $('.miidy_examina_page_nav').hide();
                    $('.miidy_examina_page_nav').eq(this.curren_pq_index).show();
                },
                event_exchange_question: function (index) {
                    $('.miidy_examina_page_nav').hide();
                    $('.miidy_examina_page_nav').eq(index).show();
                    this.curren_pq_index = index;
                },
                event_showDaohang_clicke: function () {
                    if ($('#bgDaohangDiv').is(':hidden')) {
                        $('#bgDaohangDiv').show();
                        $('#bgDaohangBtn').text('隐藏导航');
                    } else {
                        $('#bgDaohangDiv').hide();
                        $('#bgDaohangBtn').text('显示导航');
                    }
                }
            }
        });
    </script>

</body>
</html>
