<template>
    <div class="app-container">
        <el-row :gutter="24" v-if="detailData">
            <el-col :span="24" style="margin-bottom: 20px">
                <el-alert title="点击`开始考试`后将自动进入考试，请诚信考试！" type="error" style="margin-bottom: 10px" />
                <el-card class="pre-exam">
                    <div><strong>考试名称：</strong>{{ detailData.title }}</div>
                    <div style="color: red;font-weight: 800;"><strong>考试费用：</strong>{{ detailData.examFee }}元</div>
                    <div><strong>考试时长：</strong>{{ detailData.totalTime }}分钟</div>
                    <div><strong>试卷总分：</strong>{{ detailData.totalScore }}分</div>
                    <div><strong>及格分数：</strong>{{ detailData.qualifyScore }}分</div>
                    <div><strong>考试日期：</strong>{{ detailData.startDate }}至{{ detailData.endDate }}</div>
                    <div><strong>考试时间：</strong>{{ detailData.startTime }}至{{ detailData.endTime }}</div>
                    <div><strong>考试类型：</strong>
                        {{ detailData.examType == 1 ? "模拟考试" : "" }}
                        {{ detailData.examType == 2 ? "正式考试" : "" }}
                        {{ detailData.examType == 3 ? "补考" : "" }}</div>
                    <div><strong>考试人员：</strong>{{ user.realName }}</div>
                    <div><strong>身份证：</strong>{{ user.cardNo }}</div>
                    <div><strong>手机号：</strong>{{ user.phone }}</div>
                    <div><strong>考试描述：</strong>{{ detailData.content }}</div>
                </el-card>
            </el-col>
            <el-col :span="24">
                <el-button :loading="loading" type="primary" icon="el-icon-caret-right" @click="handleCreate">
                    开始考试
                </el-button>
            </el-col>
        </el-row>
        <el-row :gutter="24" v-else>
            <el-col :span="24" style="margin-bottom: 20px">
                <el-card class="pre-exam">
                    <div>暂无考试信息,请前往报名考试应用报名！</div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getRegExamList } from '@/api/paper/paper'
import { createPaper } from '@/api/paper/exam'

export default {
    data() {
        return {
            user: JSON.parse(localStorage.getItem("user")),
            detailData: undefined,
            postForm: {
                examId: '',
                userId: JSON.parse(localStorage.getItem("user")).id,
            },
            loading: false,
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            getRegExamList().then(response => {
                if (response.data.length > 0) {
                    this.detailData = response.data[0]
                    this.postForm.examId = this.detailData.examId
                }
            })
        },
        handleCreate() {
            this.requestFullScreen();
            const that = this
            this.loading = true
            createPaper(this.postForm).then(response => {
                if (response.code === 0) {
                    setTimeout(() => {
                        that.loading = false
                        that.dialogVisible = false
                        that.$router.push({ name: 'StartExam', params: { id: response.data.id } })
                    }, 1000)
                }
            }).catch(() => {
                this.loading = false
            })
        },
        requestFullScreen() {
            const element = document.documentElement;
            console.log(element.requestFullscreen)
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        },
    },
}
</script>

<style scoped>
.pre-exam div {
    line-height: 42px;
    color: #555555;
}
</style>
