<template>
    <div class="SignUp">
        <!-- <m-header /> -->
		<div v-show="show" class="container" :style="backgroundImg">
			<div class="title">
				<h2>{{ baseInfo.posterTitle }}</h2>
				<p>报名时间:{{ baseInfo.enrollStartTime }}~{{ baseInfo.enrollEndTime }}</p>
			</div>
			<m-button class="sign-btn" v-if="baseInfo.status === 'APPLYING'" @click="onSubmit" text="我要报名" />
		</div>
    </div>
</template>
<script>
// import MHeader from '@/components/MHeader'
import MButton from '@/components/MButton'
import dayjs from 'dayjs'
import _ from 'lodash'
import setLoading from '@/utils/loading'
import { examinationBasicInfo } from './SignUpApi'
// ETTING("SETTING", "设置中"),
// NOT_START("NOT_START", "未开始"),
// APPLYING("APPLYING","报名中"),
// APPLIED("APPLIED", "报名结束"),
// EXAM_ING("EXAM_ING", "考试中"),
// EXAM_END("EXAM_END", "考试结束"),
// RESULT_CONFIRM("RESULT_CONFIRM", "确认考试结果"),
// CLOSE("CLOSE", "关闭")
export default {
    name: 'SignUp',
	components: { MButton },
    data () {
		localStorage.removeItem('examId')
		let query = this.$route.query
        return {
			examId: query.examId,
			show: false,
			baseInfo: {}, // 基本信息
			backgroundImg: null
        }
    },
    mounted() {
		this.__init()
    },
    methods: {
		async __init() {
			setLoading(true)
			try {
				localStorage.setItem('examId', this.examId)
				let res = await examinationBasicInfo({ examId: this.examId })
				if(res.data.code == 200) {
					let tempData = res.data.data
					this.baseInfo = {
						posterTitle: tempData.posterTitle,
						enrollStartTime: dayjs(tempData.enrollStartTime).format("YYYY.MM.DD"),
						enrollEndTime: dayjs(tempData.enrollEndTime).format("YYYY.MM.DD"),
						status: tempData.status
					}
					// 设置背景图
					this.backgroundImg = {
						backgroundImage: `url(${tempData.posterBackgroundImg}) !important`
					}
				}
			} catch(err) {
				//
			}
			this.show = true
			setLoading(false)
		},
		onSubmit: _.throttle(function() {
			// console.log(show)
			this.$router.replace({
				path: '/signUpAccount'
			})
		}, 500)
    }
}
</script>
<style lang="less" scoped>
.SignUp {
	height: 100vh;
	max-width: 700px;
	position: relative;
    overflow-y: auto;
    overflow-x: hidden;
	background-color: #fff;
	margin: 0 auto;
}
.container {
	min-height: 100vh;
	background: url('../../assets/images/level/signup_bg.png') no-repeat center top;
	background-size: cover;
	.title {
		text-align: center;
		padding-top: .55rem;
		h2 {
			color: #007078;
			font-size: .4rem;
			font-weight: bold;
		}
		p {
			color: #03838d;
			font-size: .18rem;
		}
	}

	.sign-btn {
		position: absolute;
		bottom: .5rem;
		width: 100%;
	}
}
</style>
