<template>
    <div class="instruction">
        <div class="instruction-card-container">
            <div class="title">
                东营市第二中学艺考报名
            </div>
            <h3 class="instruction-title">报考须知</h3>
            <br/>
            <div class="content-card">
                <div class="content">
                    <p v-html="notice"></p>
                    <p v-html="examArrange"></p>
                </div>
            </div>
            <br/>
            <div class="buttonGroup">
                <el-button :disabled="disable" style="width: 150px" type="primary" @click="onContinue">已阅读并知晓<span
                        v-show="timerCount>0">({{ timerCount }})</span></el-button>
                &emsp;
                <el-button style="width: 150px" @click="onReturn">返 回</el-button>
            </div>
        </div>
    </div>

</template>

<script>

import {allInfo} from "@/api/student";

export default {
    name: 'Instruction',
    data() {
        return {
            propStudentId: undefined,
            disable: true,
            testId: '',// 考试ID
            timerCount: 10,
            studentId: '',// 学生ID
            examArrange: '',// 考试安排
            notice: '',// 考试注意事项
        }
    },
    created() {
        this.testId = this.$route.query.testId
        this.studentId = this.$store.state.user.studentId
        this.getInfo()
    },
    methods: {
        getInfo() {
            allInfo(this.testId, this.studentId).then(res => {
                this.notice = res.data.notice,
                    this.examArrange = res.data.examArrange
            })
        },

        onContinue() {
            this.$store.commit('SET_ACTIVE', 0)
            this.$router.push({
                path: '/ApplyProcess',
                query: {
                    title: '报名',
                    index: 0,
                    testId: this.testId,
                    studentId: this.studentId,
                }
            })
        },
        onReturn() {
            this.$router.back()
        }
    },
    watch: {
        timerCount: {
            handler(value) {
                if (value > 0) {
                    setTimeout(() => {
                        this.timerCount--;
                    }, 1000);
                } else {
                    this.disable = false
                }
            },
            immediate: true
        }

    }
}
</script>

<style scoped>
.instruction {
    background-image: url("../assets/image/background.png");
    height: 100vh;
    display: flex;
    justify-content: center;
}

.instruction-card-container {
    width: 680px;
    height: 625px;
    background-color: #ffffff;
    border-radius: 20px;
    align-self: center;
    position: relative;
}

.title {
    width: 310px;
    height: 56px;
    line-height: 56px;
    position: absolute;
    left: 185px;
    top: -28px;
    text-align: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    background-size: cover;
    background-image: url("../assets/image/title.png");
}

.instruction-title {
    text-align: center;
    margin-top: 40px;
    font-size: 20px;
}

.content-card {
    width: 640px;
    height: 457px;
    background: #f4f4f4;
    margin: 0 auto;
}

.buttonGroup {
    width: 300px;
    height: 40px;
    margin: auto;
    /*background: red;*/
    display: flex;
    justify-content: center
}

.content {
    height: 420px;
    padding: 20px;
    overflow-y: auto;
    /*font-weight: bold;*/
    line-height: 25px;
}


</style>