{extend name="public/container" /}
{block name="title"}考试结果{/block}
{block name="style"}
<style>
    body {
        background-color: #2C8EFF;
    }

    .question-result {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 710px;
        padding: 87px 85px 60px;
        background: url("{__PUBLIC_WEB_PATH}pc/images/result.png") left top/100% 100% no-repeat;
        transform: translate(-50%, -50%);
    }

    .question-result .question-title {
        margin-bottom: 50px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        font-size: 24px;
        line-height: 31px;
        color: #282828;
    }

    .question-result .question-user {
        margin-bottom: 32px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        font-size: 16px;
        line-height: 26px;
        color: #282828;
    }

    .question-result .avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        margin-right: 10px;
        vertical-align: middle;
    }

    .question-result .question-score {
        display: flex;
        margin-bottom: 20px;
    }

    .question-result .score {
        flex: 1;
        padding: 16px;
        border-radius: 6px;
        margin-left: 19px;
        box-shadow: 0 3px 6px rgba(127, 141, 206, 0.2);
        text-align: center;
    }

    .question-result .score:first-child {
        margin-left: 0;
    }

    .question-result .score .name {
        display: inline-block;
        padding-left: 20px;
        margin-bottom: 6px;
        background: url("{__PUBLIC_WEB_PATH}wap/first/zsff/images/result01.png") left center/15px 15px no-repeat;
        font-size: 14px;
        line-height: 19px;
        color: #999999;
    }

    .question-result .score .value {
        font-weight: bold;
        font-size: 22px;
        line-height: 29px;
        color: #282828;
    }

    .question-result .score.grade .name {
        background-image: url("{__PUBLIC_WEB_PATH}wap/first/zsff/images/result02.png");
    }

    .question-result .score.grade .value {
        font-size: 18px;
    }

    .question-result .question-basic {
        display: flex;
        border-radius: 6px;
        box-shadow: 0 3px 6px rgba(127, 141, 206, 0.2);
    }

    .question-result .question-basic .item {
        position: relative;
        flex: 1;
        padding: 18px 0 17px;
        text-align: center;
        font-size: 14px;
        line-height: 19px;
        color: #999999;
    }

    .question-result .question-basic .item::before {
        content: "";
        position: absolute;
        top: 30px;
        bottom: 30px;
        left: 0;
        z-index: 2;
        width: 1px;
        border-left: 1px solid #E9E9E9;
    }

    .question-result .question-basic .item:first-child::before {
        display: none;
    }

    .question-result .question-basic .value {
        margin-top: 7px;
        font-weight: bold;
        font-size: 22px;
        line-height: 29px;
        color: #282828;
    }

    .question-result .result-footer {
        margin-top: 50px;
        text-align: center;
    }

    .question-result .result-footer .button {
        width: 180px;
        height: 50px;
        border: 1px solid #2C8EFF;
        border-radius: 25px;
        margin-left: 40px;
        background-color: #FFFFFF;
        font-size: 16px;
        color: #2C8EFF;
    }

    .question-result .result-footer .button:first-child {
        margin-left: 0;
    }

    .question-result .result-footer .button.fill {
        background-color: #2C8EFF;
        color: #FFFFFF;
    }

    .percent-text {
        margin-bottom: 13px;
        font-weight: normal !important;
        color: #2C8EFF;
    }

    .percent-text+p {
        font-size: 16px;
        color: #999999;
    }

    .user {
        position: absolute;
        top: 60px;
        right: 60px;
        font-size: 14px;
        line-height: 19px;
        color: #666666;
    }

    .user .iconfont {
        font-size: 12px;
    }
</style>
{/block}
{block name="app"}
<div v-cloak id="app" class="question-result">
    <a :href="$router.user + '?activeName=question'" class="user">返回考试评测<i class="iconfont iconxiangyou"></i></a>
    <vue-circle-progress ref="circle" id="circle" :progress="0" :size="200" :reverse="false" line-cap="round" :fill="fill" empty-fill="rgba(213, 224, 236, 0.6)"
                         :animation-start-value="0.0" :start-angle="Math.PI / 2" insert-mode="append" :thickness="5" inner-text="正确率" :show-percent="true"
                         style="text-align: center;font-size: 16px;margin-bottom: 38px;color: #999999;">
        <p>正确率</p>
    </vue-circle-progress>
    <div class="question-title">{{ result.title }}</div>
    <div v-if="userInfo" class="question-user"><img :src="userInfo.avatar" class="avatar">{{ userInfo.nickname }}</div>
    <div v-if="result.is_score" class="question-score">
        <div class="score">
            <div class="name">本次得分</div>
            <div class="value">{{ result.score }}</div>
        </div>
        <div v-if="result.grade" class="score grade">
            <div class="name">评分标准</div>
            <div class="value">{{ result.grade }}</div>
        </div>
    </div>
    <div class="question-basic">
        <div class="item">
            <div>题目数</div>
            <div class="value">{{ result.test_paper_question.length }}</div>
        </div>
        <div class="item">
            <div>错题数</div>
            <div class="value">{{ result.wrong_question }}</div>
        </div>
        <div class="item">
            <div>未答数</div>
            <div class="value">{{ result.not_questions }}</div>
        </div>
        <div class="item">
            <div>本次用时</div>
            <div class="value">{{ result.duration_time }}</div>
        </div>
    </div>
    <div v-if="recordId" class="result-footer">
        <button class="button fill" @click="lookAnalysis">查看解析</button>
        <button class="button" @click="answerAgain">再考一次</button>
    </div>
    <div v-else style="height: 70px;"></div>
</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',
        'vue-circle-progress',
    ], function (
        Vue,
        ELEMENT,
        BaseHeader,
        BaseFooter,
        BaseLogin,
        BaseAgree,
        baseMixin,
        router,
        topicApi,
        VueCircle
    ) {
        Vue.use(ELEMENT);
        Vue.use(router);
        new Vue({
            el: '#app',
            components: {
                'base-header': BaseHeader,
                'base-footer': BaseFooter,
                'base-login': BaseLogin,
                'base-agree': BaseAgree,
                'vue-circle-progress': VueCircle
            },
            mixins: [baseMixin],
            data: {
                recordId: 0,
                testId: 0,
                result: {
                    test_paper_question: []
                },
                fill: {gradient: ["rgba(44, 142, 255, 1)", "rgba(44, 142, 255, 0.05)"]},
            },
            created: function () {
                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 = searchObj.record_id || 0;
                this.getResult();
            },
            methods: {
                getResult: function () {
                    var vm = this;
                    topicApi.examinationResults({
                        test_id: this.testId,
                        type: 2
                    }).then(function (res) {
                        var result = res.data;
                        var duration = result.duration
                        var hours = Math.floor(duration / 3600000);
                        var minutes = Math.floor((duration - hours * 3600000) / 60000);
                        var seconds = Math.floor((duration - hours * 3600000 - minutes * 60000) / 1000);
                        if (hours < 10) {
                            hours = '0' + hours;
                        }
                        if (minutes < 10) {
                            minutes = '0' + minutes;
                        }
                        if (seconds < 10) {
                            seconds = '0' + seconds;
                        }
                        result.duration_time = hours + ':' + minutes + ':' + seconds;
                        vm.$refs.circle.updateProgress(parseInt(result.accuracy));
                        vm.result = result;
                    });
                },
                answerAgain: function () {
                    window.location.assign(this.$router.question_index + '?id=' + this.testId);
                },
                lookAnalysis: function () {
                    window.location.replace(this.$router.question_detail + '?is_analysis=1&test_id=' + this.testId + '&record_id=' + this.recordId);
                }
            }
        });
    });
</script>
{/block}