<template>
    <div class="box">
        <div class="container">
            <div class="head">
                <head-info :name="studentName"></head-info>
            </div>
            <div class="main">
                <div class="step">
                    <div class="stepChild">
                        <el-steps :active="active" finish-status="success" align-center>
                            <el-step title="报名"></el-step>
                            <el-step title="审核"></el-step>
                            <el-step title="打印准考证"></el-step>
                            <el-step title="成绩查询"></el-step>
                        </el-steps>
                    </div>
                </div>
                <component :is="tabs[active]" :PropTestId="testId" @changeTab="changeStep"></component>
            </div>

            <div style="width: 100%; height: 60px; text-align: center; color: white; font-size: 16px; font-weight: bold; padding-top: 30px; letter-spacing: 2px">
                山东省东营市第二中学
            </div>


        </div>
    </div>
</template>

<script>
import Score from '@/components/Score.vue'
import Print from '@/components/Print.vue'
import SignUp from '@/components/SignUp.vue'
import Check from '@/components/Check.vue'
import HeadInfo from '@/components/HeadInfo.vue'

export default {
    name: 'ApplyProcess',
    components: {
        Score,
        Print,
        SignUp,
        Check,
        HeadInfo
    },
    computed: {
        active() {
            console.log('active', this.$store.state.user.active)
            return this.$store.state.user.active
        }
    },
    data() {
        return {
            tabs: ["signUp", 'check', 'print', 'score'],
            titles: ['报名', '审核', '打印准考证', '成绩查询'],
            studentName: '',
            testId: '',
            studentId: '',
        };
    },
    created() {
        this.studentName = this.$store.state.user.studentName
        /** 点击暂存,进入Entry页面，点击进入按钮，路由传带的参数*/
        this.testId = this.$route?.query?.testId
        this.studentId = this.$route?.query?.studentId

    },
    methods: {
        changeStep(index, title) {
            this.$store.commit('SET_ACTIVE', index)
        },
    }
}
</script>

<style scoped lang="less">
.box {
  display: flex;
  justify-content: center;
  background-image: url("../assets/image/background.png");
}

.container {
  width: 80%;
  height: 100%;
}

.head {
  width: 100%;
  height: 90px;
}

.main {
  border-radius: 10px;
  background: #fdfdfe;
  width: 100%;
  height: 890px;
}

.step {
  width: 100%;
  height: 65px;
  padding-top: 20px;
  padding-bottom: 10px;
  background: #f5f8fb;
  border-radius: 10px;
}

.stepChild {
  width: 80%;
  margin: auto;
}


</style>