<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('考试')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: element-css" />
</head>
<style>
    .select2-container--bootstrap.select2-container--disabled .select2-selection, .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
        background: none;
    }
    .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
        color: #fff;
        background-color: #1AB394 !important;
        border: 1px solid #1AB394;
        border-radius: 4px;
        cursor: default;
        float: left;
        margin: 5px 0 0 6px;
        padding: 0 6px;
    }
    .pre-exam div {

        line-height: 42px;
        color: #555555;
    }
</style>
<body>
<div class="main-content" id="app">
    <div class="app-container">
        <el-row :gutter="24">

            <el-col :span="24" style="margin-bottom: 20px">

                <el-alert
                    title="点击`开始考试`后将自动进入考试，请诚信考试！"
                    type="error"
                    style="margin-bottom: 10px"
                >
                </el-alert>
                <span @click="toExam()">
                    <el-alert
                            v-if="breakShow"
                            :closable="false"
                            title="您有正在进行的考试，离线太久考试将被作废哦，点击此处可继续考试！"
                            type="error"
                            style="margin-bottom: 10px; cursor: pointer;"
                    >
                </el-alert>
                </span>

                <el-card class="pre-exam">
                    <div><strong>考试名称：</strong>[[${ exam.title }]]</div>
                    <div><strong>考试时长：</strong>[[${ exam.totalTime }]]分钟</div>
                    <div><strong>试卷总分：</strong>[[${ exam.totalScore }]]分</div>
                    <div><strong>及格分数：</strong>[[${ exam.qualifyScore }]]分</div>
                    <div><strong>考试描述：</strong>[[${ exam.content }]]</div>
                    <div><strong>开放类型：</strong><span th:text="${exam.openType == 1 ? '完全开放' : (exam.openType == 2 ? '部门开放' : '默认值')}"></span></div>

                </el-card>

            </el-col>

            <el-col :span="24">

                <el-button :loading="loading" :disabled="breakShow === true" type="primary" icon="el-icon-caret-right" @click="fetchData()">
                    开始考试
                </el-button>

                <el-button onclick="closeItem()">
                    返回
                </el-button>

            </el-col>

        </el-row>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: element-js" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript">
    var prefix = ctx + "system/paper";
var app = new Vue({
    el: '#app',
    data:{
        detailData: {},
        postForm: {
            examId: '',
            password: ''
        },
        rules: {
            password: [
                { required: true, message: '考试密码不能为空！' }
            ]
        },

        loading: false,
        breakShow: false,
    },
    mounted(){
        this.check()
    },
    methods: {
        // 弹出层全屏
        openFull(title, url, width, height) {
            // 如果是移动端，就使用自适应大小弹窗
            if ($.common.isMobile()) {
                width = 'auto';
                height = 'auto';
            }
            if ($.common.isEmpty(title)) {
                title = false;
            }
            if ($.common.isEmpty(url)) {
                url = "/404.html";
            }
            if ($.common.isEmpty(width)) {
                width = 800;
            }
            if ($.common.isEmpty(height)) {
                height = ($(window).height() - 50);
            }
            var index = top.layer.open({
                type: 2,
                area: [width + 'px', height + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: title,
                content: url,
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    iframeWin.contentWindow.submitHandler(index, layero);
                },
                cancel: function(index) {
                    return true;
                },
                success: function () {
                    $(':focus').blur();
                }
            });
            top.layer.full(index);
        },
        // 继续考试
        toExam() {
            var url = 'system/paper/toPaper/[[${exam.id}]]/' + this.breakId
            this.openFull("考试", url);
        },
        // 检查进行中的考试
        check() {
            let that = this
            axios.get('/system/paper/checkProcess').then(res => {
                if (res.data.data && res.data.data.id) {
                    that.breakShow = true
                    that.breakId = res.data.data.id
                }
            })
        },
        fetchData() {
            const that = this
            this.loading = true

            axios.get(prefix+'/create/[[${exam.id}]]')
                .then((res)=>{
                    if (res.data.code === 0) {
                        setTimeout(function () {
                            this.loading = false
                            that.dialogVisible = false
                            var url = 'system/paper/toPaper/[[${exam.id}]]/'+res.data.msg
                            that.openFull("考试", url);
                        }, 1000)
                    }else{
                        this.$message.error(res.data.msg)
                        this.loading = false
                    }
                })
        }
    }
})

</script>
</body>
</html>
