{extend name="public/container" /}
{block name="title"}{$titles}{/block}
{block name="style"}
<style>
    .question-detail .el-breadcrumb {
        width: 1200px;
        margin: 30px auto 24px;
    }

    .question-detail .main {
        display: flex;
        width: 1200px;
        margin: 0 auto 40px;
    }

    .question-detail .sheet {
        width: 290px;
        margin-right: 20px;
    }

    .question-detail .sheet-inner {
        position: relative;
        width: 290px;
    }

    .question-detail .sheet-inner.fixed {
        position: fixed;
        top: 0;
        z-index: 2;
    }

    .question-detail .timer {
        padding: 22px 25px;
        border-radius: 4px;
        margin-bottom: 20px;
        background-color: #FFFFFF;
    }

    .question-detail .timer-head {
        text-align: center;
        font-size: 14px;
        line-height: 19px;
        color: #282828;
    }

    .question-detail .timer-head .iconfont {
        margin-right: 12px;
        font-size: 15px;
        color: #FF6B00;
    }

    .question-detail .timer-body {
        height: 44px;
        border-radius: 4px;
        margin-top: 14px;
        background-color: #F2F8FF;
        text-align: center;
        font-size: 24px;
        line-height: 44px;
        color: #2C8EFF;
    }

    .question-detail .sheet .answer {
        border-radius: 4px;
        margin-bottom: 20px;
        background-color: #FFFFFF;
    }

    .question-detail .sheet .answer-head {
        padding: 20px 0 40px;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        line-height: 21px;
        color: #282828;
    }

    .question-detail .sheet .answer-body {
        height: 377px;
        padding-left: 19px;
        overflow: auto;
    }

    .question-detail .sheet .answer-body ul {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .question-detail .sheet .answer-body li {
        width: 40px;
        height: 40px;
        border: 1px solid #AAAAAA;
        border-radius: 4px;
        margin: 0 13px 14px 0;
        background-color: #F5F5F5;
        text-align: center;
        font-size: 16px;
        line-height: 40px;
        color: #999999;
    }

    .question-detail .sheet .answer-body li.active {
        border-color: #2C8EFF;
        background-color: #F2F8FF;
        color: #2C8EFF;
    }

    .question-detail .sheet .answer-body li.ok {
        border-color: #52A452;
        background-color: #EBF9EB;
        color: #52A452;
    }

    .question-detail .sheet .answer-body li.no {
        border-color: #FF6B00;
        background-color: #FFF0E5;
        color: #FF6B00;
    }

    .question-detail .sheet .answer-foot {
        position: relative;
        display: flex;
        align-items: center;
        padding: 12px 20px;
    }

    .question-detail .sheet .answer-foot::before {
        content: " ";
        position: absolute;
        top: 0;
        right: 20px;
        left: 20px;
        z-index: 2;
        height: 1px;
        border-top: 1px dashed #EEEEEE;
        color: #EEEEEE;
    }

    .question-detail .sheet .answer-foot .wrap {
        margin-right: 18px;
        font-size: 12px;
        line-height: 16px;
        color: #282828;
    }

    .question-detail .sheet .answer-foot .wrap::before {
        content: " ";
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 1px solid #AAAAAA;
        border-radius: 2px;
        margin-right: 8px;
        background-color: #F5F5F5;
        vertical-align: text-bottom;
    }

    .question-detail .sheet .answer-foot .wrap.wrap1::before {
        border-color: #2C8EFF;
        background-color: #F2F8FF;
    }

    .question-detail .sheet .answer-foot .wrap.wrap2::before {
        border-color: #52A452;
        background-color: #EBF9EB;
    }

    .question-detail .sheet .answer-foot .wrap.wrap3::before {
        border-color: #FF6B00;
        background-color: #FFF0E5;
    }

    .question-detail .sheet button {
        width: 100%;
        height: 42px;
        border: none;
        border-radius: 4px;
        background-color: #2C8EFF;
        font-size: 14px;
        color: #FFFFFF;
    }

    .question-detail .paper {
        flex: 1;
        min-width: 0;
        border-radius: 4px;
        background-color: #FFFFFF;
    }

    .question-detail .paper-title {
        padding: 25px 30px;
        border-bottom: 1px solid #DDDDDD;
        font-size: 16px;
        line-height: 21px;
        color: #282828;
    }

    .question-detail .paper-title span {
        font-size: 12px;
        color: #999999;
    }

    .question-detail .questions {
        padding: 0 30px;
    }

    .question-detail .question {
        padding: 30px 0;
        border-bottom: 1px dashed #E2E2E2;
    }

    .question-detail .question:last-child {
        border-bottom: none;
    }

    .question-detail .question-title {
        display: flex;
        margin-bottom: 28px;
        word-break: break-all;
        font-size: 16px;
        line-height: 21px;
        color: #282828;
    }

    .question-detail .question-title span {
        display: inline-block;
        height: 20px;
        padding: 0 10px;
        border-radius: 10px;
        background-color: #F2F8FF;
        font-size: 12px;
        line-height: 20px;
        color: #2C8EFF;
    }

    .question-detail .question-image {
        height: 380px;
    }

    .question-detail .question-image img {
        max-width: 100%;
        height: 100%;
    }

    .question-detail .options .option {
        display: flex;
        margin-bottom: 22px;
        font-size: 14px;
        line-height: 19px;
        color: #666666;
    }

    .question-detail .options .option:last-child {
        margin-bottom: 0;
    }

    .question-detail .options .option label {
        margin-right: 10px;
    }

    .question-detail .options .option input+span {
        display: block;
        width: 28px;
        height: 28px;
        border: 1px solid #BBBBBB;
        border-radius: 50%;
        text-align: center;
        font-size: 14px;
        line-height: 28px;
        color: #999999;
    }

    .question-detail .options .option input:checked+span {
        border-color: #2C8EFF;
        background-color: #2C8EFF;
        color: #FFFFFF;
    }

    .question-detail .options .option div {
        flex: 1;
        margin-top: 5px;
        word-break: break-all;
        font-size: 14px;
        line-height: 19px;
        color: #666666;
    }

    .question-detail .images {
        display: flex;
        flex-wrap: wrap;
        width: 450px;
    }

    .question-detail .images .option {
        width: 205px;
        margin: 0 20px 25px 0;
    }

    .question-detail .images .option img {
        display: block;
        width: 205px;
        height: 144px;
    }

    .question-detail .images .option label {
        display: block;
        width: 28px;
        height: 28px;
        margin: 12px auto 0;
    }

    .question-detail .images .option input+span {
        display: block;
        width: 28px;
        height: 28px;
        border: 1px solid #BBBBBB;
        border-radius: 50%;
        text-align: center;
        font-size: 14px;
        line-height: 28px;
        color: #999999;
    }

    .question-detail .images .option input:checked+span {
        border-color: #2C8EFF;
        background-color: #2C8EFF;
        color: #FFFFFF;
    }

    .question-detail .question button {
        height: 30px;
        padding: 0 14px;
        border: 1px solid #2C8EFF;
        border-radius: 3px;
        margin-top: 25px;
        background-color: #2C8EFF;
        font-size: 12px;
        line-height: 30px;
        color: #FFFFFF;
    }

    .question-detail .question button:disabled {
        border-color: #AAAAAA;
        background-color: #F5F5F5;
        color: #999999;
        cursor: not-allowed;
    }

    .question-detail .analysis {
        padding: 20px;
        margin-top: 20px;
        background-color: rgba(255, 107, 0, 0.04);
    }

    .question-detail .analysis .upper {
        font-size: 16px;
        line-height: 22px;
        color: #FF6B00;
    }

    .question-detail .analysis .upper .iconfont {
        margin-right: 10px;
        vertical-align: bottom;
        font-size: 22px;
    }

    .question-detail .analysis .answer,
    .question-detail .analysis .degree {
        margin-top: 16px;
        font-size: 14px;
        line-height: 19px;
        color: #282828;
    }

    .question-detail .analysis .answer .value {
        margin-left: 11px;
        color: #52A452;
    }

    .question-detail .analysis .checked .value {
        color: #2C8EFF;
    }

    .question-detail .analysis .degree .iconfont {
        margin-left: 5px;
        font-size: 10px;
        color: #FF6B00;
    }

    .question-detail .analysis .degree .iconfont:first-child {
        margin-left: 11px;
    }

    .question-detail .analysis .content {
        display: flex;
        margin-top: 16px;
        font-size: 14px;
        line-height: 22px;
        color: #676767;
    }

    .question-detail .analysis .content .value {
        flex: 1;
        min-width: 0;
        margin-left: 11px;
        word-break: break-all;
        color: #282828;
    }

    .question-detail .analysis .content img {
        display: block;
        width: 100%;
    }

    .question-detail .analysis .special {
        padding-top: 20px;
        border-top: 1px dashed rgba(255, 107, 0, 0.3);
        margin-top: 20px;
        font-size: 14px;
        line-height: 19px;
        color: #676767;
    }

    .question-detail .analysis .special .value {
        margin-top: 9px;
    }

    .question-detail .analysis .special .item {
        display: inline-block;
        max-width: 200px;
        margin-right: 28px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #282828;
    }

    .question-detail .analysis .special .item:hover {
        color: #2C8EFF;
    }

    .question-detail .analysis.correct {
        background-color: rgba(82, 164, 82, 0.05);
    }

    .question-detail .analysis.correct .upper {
        color: #52A452;
    }

    .question-detail .analysis.correct .special {
        border-color: rgba(82, 164, 82, 0.3);
    }
</style>
{/block}
{block name="app"}
<div v-cloak id="app" class="question-detail">
    <base-header :public-data="publicData" :user-info="userInfo"></base-header>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item><a :href="$router.home">首页</a></el-breadcrumb-item>
        <el-breadcrumb-item><a :href="$router.question_category + '?type=2'">考试列表</a></el-breadcrumb-item>
        <el-breadcrumb-item>{{ paper.title }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main">
        <div ref="sheet" class="sheet">
            <div :class="{ fixed: isFixed }" class="sheet-inner">
                <div v-if="!isAnalysis" class="timer">
                    <div class="timer-head"><i class="iconfont iconshijian3"></i>剩余时间</div>
                    <div class="timer-body">{{ leftTime | formatTime }}</div>
                </div>
                <div class="answer">
                    <div class="answer-head">答题卡</div>
                    <div class="answer-body">
                        <ul>
                            <li v-for="(item, index) in questions" :key="item.id"
                                :class="{ active: item.is_correct, ok: item.is_correct === 2 && isAnalysis, no: item.is_correct === 1 && isAnalysis }">
                                {{ index + 1 }}</li>
                        </ul>
                    </div>
                    <div class="answer-foot">
                        <div v-if="!isAnalysis" class="wrap wrap1">已答</div>
                        <div v-if="isAnalysis" class="wrap wrap2">正确</div>
                        <div v-if="isAnalysis" class="wrap wrap3">错误</div>
                        <div class="wrap wrap4">未答</div>
                    </div>
                </div>
                <button v-if="!isAnalysis" @click="submitPaper">提交并查看结果</button>
            </div>
        </div>
        <div class="paper">
            <div class="paper-title">
                {{ paper.title }}<span>（共{{ paper.item_number }}题）</span></div>
            <ul class="questions">
                <li v-for="(item, index) in questions" :key="item.id" class="question">
                    <div class="question-title">
                        <div>{{ index + 1 }}.&nbsp;</div>
                        <div>{{ item.stem }}<span>{{ item.questionType }}</span></div>
                    </div>
                    <div v-if="item.image" class="question-image"><img :src="item.image"></div>
                    <ul v-if="item.is_img" class="images">
                        <li v-for="(option, key) in item.option" :key="key" class="option">
                            <img :src="option" alt="">
                            <label>
                                <input v-if="item.question_type === 2" v-model="item.user_answer" :value="key" :disabled="!!item.is_correct" type="checkbox" hidden>
                                <input v-else v-model="item.user_answer" :value="key" :disabled="!!item.is_correct" type="radio" hidden>
                                <span>{{ key }}</span>
                            </label>
                        </li>
                    </ul>
                    <ul v-else class="options">
                        <li v-for="(option, key) in item.option" :key="key" class="option">
                            <label>
                                <input v-if="item.question_type === 2" v-model="item.user_answer" :value="key" :disabled="!!item.is_correct" type="checkbox" hidden>
                                <input v-else v-model="item.user_answer" :value="key" :disabled="!!item.is_correct" type="radio" hidden>
                                <span>{{ key }}</span>
                            </label>
                            <div>{{ option }}</div>
                        </li>
                    </ul>
                    <div v-if="isAnalysis" :class="{ correct: item.is_correct === 2 }" class="analysis">
                        <div class="upper">
                            <i :class="item.is_correct === 2 ? 'iconzhengque' : 'iconcuowu'" class="iconfont"></i>回答{{ item.is_correct === 2 ? '正确' : '错误' }}
                        </div>
                        <div class="answer">
                            正确答案:
                            <span class="value">{{ item.answer }}</span>
                        </div>
                        <div class="answer checked">
                            您的答案:
                            <span class="value">{{ item.user_answer.toString() || '未答' }}</span>
                        </div>
                        <div class="degree">
                            试题难度:
                            <i v-for="star in 5" :key="star" :class="star <= item.difficulty ? 'icondengji-shixin' : 'icondengji-kongxin'" class="iconfont"></i>
                        </div>
                        <div class="content">
                            <div>答案解析:</div>
                            <div class="value" v-html="item.analysis"></div>
                        </div>
                        <div v-if="item.special.length" class="special">
                            <div>关联知识点:</div>
                            <div class="value">
                                <a v-for="special in item.special" :key="special.id" href="" class="item">{{ special.title }}</a>
                            </div>
                        </div>
                    </div>
                    <button v-if="!isAnalysis" :disabled="!item.user_answer.length || !!item.is_correct" @click="submitQuestion(item)">确认选项</button>
                </li>
            </ul>
        </div>
    </div>
    <base-footer :user-info="userInfo" :public-data="publicData"></base-footer>
    <base-login :public-data="publicData" :agree-content="agreeContent"></base-login>
    <base-agree :agree-content="agreeContent"></base-agree>
</div>
{/block}
{block name="vm"}
<script>
    require([
        'vue',
        'ELEMENT',
        'components/base-header/index',
        'components/base-footer/index',
        'components/base-login/index',
        'components/base-agree/index',
        'mixins/base',
        'router/index',
        'api/topic',
        'moment'
    ], function (
        Vue,
        ELEMENT,
        BaseHeader,
        BaseFooter,
        BaseLogin,
        BaseAgree,
        baseMixin,
        router,
        topicApi,
        moment
    ) {
        Vue.use(ELEMENT);
        Vue.use(router);
        new Vue({
            el: '#app',
            components: {
                'base-header': BaseHeader,
                'base-footer': BaseFooter,
                'base-login': BaseLogin,
                'base-agree': BaseAgree,
            },
            filters: {
                formatTime: function (time) {
                    var duration = moment.duration(time);
                    return moment({
                        h: duration.hours(),
                        m: duration.minutes(),
                        s: duration.seconds()
                    }).format('HH:mm:ss');
                }
            },
            mixins: [baseMixin],
            data: {
                paper: {},
                questions: [],
                sheet: [],
                leftTime: 0,
                isAnalysis: 0,
                isFixed: false
            },
            created: function () {
                var vm = this;
                var search = window.location.search;
                search = search.slice(1).split('&');
                var searchObj = {};
                search.forEach(function (item) {
                    item = item.split('=');
                    searchObj[item[0]] = item[1];
                });
                this.testId = searchObj['test_id'];
                this.recordId = localStorage.getItem('record_id');
                this.isAnalysis = searchObj['is_analysis'];
                this.getPaper();
                this.getQuestions();
                window.addEventListener('scroll', function () {
                    vm.isFixed = window.scrollY >= vm.$refs.sheet.offsetTop;
                });
                window.addEventListener('beforeunload', function () {
                    localStorage.setItem('leftTime', vm.leftTime);
                });
            },
            methods: {
                getPaper: function () {
                    var vm = this;
                    topicApi.testPaperDetails({
                        id: this.testId
                    }).then(function (res) {
                        vm.paper = res.data;
                        if (!vm.isAnalysis) {
                            vm.countdown();
                        }
                    });
                },
                getQuestions: function () {
                    var vm = this;
                    topicApi.testPaperQuestions({
                        test_id: this.testId,
                        record_id: this.recordId,
                        type: 2
                    }).then(function (res) {
                        var questions = res.data;
                        questions.forEach(function (question) {
                            if (!Array.isArray(question.userAnswer)) {
                                Object.assign(question, question.userAnswer);
                            }
                            if (Array.isArray(question.option)) {
                                var options = {};
                                question.option.forEach(function (option, index) {
                                    options[String.fromCharCode(index + 65)] = option;
                                });
                                question.option = options;
                            }
                            if (question.is_correct === undefined) {
                                question.is_correct = 0;
                            }
                            if (question.user_answer === undefined) {
                                question.user_answer = '';
                            }
                            switch (question.question_type) {
                                case 1:
                                    question.questionType = '单选题';
                                    break;
                                case 2:
                                    question.questionType = '多选题';
                                    question.user_answer = question.user_answer ? question.user_answer.split(',') : [];
                                    break;
                                default:
                                    question.questionType = '判断题';
                                    break;
                            }
                        });
                        vm.questions = questions;
                    });
                },
                getSheet: function () {
                    var vm = this;
                    topicApi.answerSheet({
                        test_id: this.testId,
                        record_id: this.recordId,
                        type: 2
                    }).then(function (res) {
                        vm.sheet = res.data;
                    });
                },
                submitQuestion: function (question) {
                    var vm = this;
                    var data = {
                        e_id: this.recordId,
                        questions_id: question.questions_id,
                        user_answer: question.user_answer,
                        answer: question.answer,
                        score: question.score,
                        type: 2,
                    };
                    if (question.question_type === 2) {
                        data.user_answer.sort();
                        data.user_answer = data.user_answer.toString();
                    }
                    data.is_correct = data.user_answer === data.answer ? 2 : 1;
                    topicApi.submitQuestions(data).then(function (res) {
                        question.is_correct = data.is_correct;
                    });
                },
                countdown: function () {
                    var vm = this;
                    this.leftTime = Number(localStorage.getItem('leftTime')) || this.paper.txamination_time * 60 * 1000;
                    var timer = setInterval(function () {
                        vm.leftTime = vm.leftTime - 1000;
                        if (vm.leftTime <= 0) {
                            clearInterval(timer);
                            vm.$message('考试结束时间已到');
                            vm.submitPaper();
                        }
                    }, 1000);
                },
                submitPaper: function () {
                    var vm = this;
                    topicApi.submitTestPaper({
                        examination_id: this.recordId,
                        type: 2,
                        duration: this.leftTime
                    }).then(function (res) {
                        localStorage.removeItem('leftTime');
                        window.location.replace(vm.$router.question_result + '?test_id=' + vm.testId + '&record_id=' + vm.recordId);
                    });
                }
            }
        });
    });
</script>
{/block}