<template>
    <div class="SignUp">
        <!-- <m-header /> -->
		<div v-show="show" class="container" :style="backgroundImg">
			<h2>{{ baseInfo.posterTitle }}</h2>
			<div class="section">
				<div class="title" style="margin-top: 0">考试类型</div>
				<div class="content">{{ baseInfo.examMode === "OFFLINE" ? "线下" : "线上" }}</div>

				<div class="title">考试地址</div>
				<div class="content" v-if="baseInfo.examMode === 'OFFLINE'">
					<template v-if="baseInfo.examLocations">
						<p v-for="(item, index) in baseInfo.examLocations" :key="index">
							{{ item.address }}
						</p>
					</template>
				</div>
				<div class="content" v-else>线上网络教室</div>

				<div class="title">考试简介</div>
				<div class="content">{{ baseInfo.posterProfile }}</div>

				<div class="title">报名时间</div>
				<div class="content">{{ baseInfo.enrollTime }}</div>

				<div class="title">预计考试日期</div>
				<div class="content">{{ baseInfo.expectExamStartTime }}</div>
			</div>
			<!-- <m-button class="sign-btn" @click="onSubmit" text="我要报名" /> -->
			<van-button type="primary" :color="buttonColor" v-if="baseInfo.status" @click="onSubmit" round block>我要报名</van-button>
			<a class="protocol" @click="onProtocol" v-if="baseInfo.status">协议</a>
			<!-- <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',
    data () {
		localStorage.removeItem('examId')
		localStorage.removeItem('organId')
		let query = this.$route.query
        return {
			examId: query.examId,
			organId: query.organId,
			show: false,
			baseInfo: {}, // 基本信息
			backgroundImg: null,
			buttonColor: null,
        }
    },
    mounted() {
		localStorage.removeItem("Authorization")
		this.__init()
    },
    methods: {
		async __init() {
			setLoading(true)
			try {
				localStorage.setItem('examId', this.examId)
				localStorage.setItem('organId', this.organId)
				let res = await examinationBasicInfo({ examId: this.examId })
				if(res.data.code == 200) {
					let tempData = res.data.data
					let tempStatus = false
					if(tempData.status == "APPLYING") {
						tempStatus = true
					}
					this.baseInfo = {
						posterTitle: tempData.posterTitle,
						examMode: tempData.examMode,
						enrollTime: dayjs(tempData.enrollStartTime).format("YYYY-MM-DD HH:mm") + "～" + dayjs(tempData.enrollEndTime).format("YYYY-MM-DD HH:mm"),
						examLocationIdList: tempData.examLocationIdList,
						expectExamStartTime: dayjs(tempData.expectExamStartTime).format("YYYY-MM-DD"),
						status: tempStatus,
						examLocations: tempData.examLocations, // 地址
						posterProfile: tempData.posterProfile
					}
					let poster = tempData.posterBackgroundImg ? JSON.parse(tempData.posterBackgroundImg) : ""
					if(poster) {
						// 设置背景图
						this.backgroundImg = {
							backgroundImage: `url(${poster.url}) !important`
						}
						this.buttonColor = poster.color
					}
				}
			} catch(err) {
				//
			}
			this.show = true
			setLoading(false)
		},
		onSubmit() {
			// console.log(show)
			this.$router.push({
				path: '/signUpAccount',
				query: {
					examId: this.examId,
					organId: this.organId
				}
			})
		},
		onProtocol() {
			this.$router.push('/smallProtocol')
		}
    }
}
</script>
<style lang="less" scoped>
.SignUp {
	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/signUpBg.png') no-repeat center top #F3F4F8;
	background-size: contain;
	overflow: hidden;
	h2 {
		position: absolute;
		padding-top: .4rem;
		color: #ffffff;
		font-size: .26rem;
		font-weight: bold;
		width: 2.1rem;
		text-align: left;
		margin-left: .16rem;
	}
	.section {
		background: #ffffff;
		margin: 2.2rem .16rem 0;
		border-radius: .1rem;
		padding: .22rem;
		.title {
			margin-top: .28rem;
			font-size: .18rem;
			color: #1A1A1A;
		}
		.content {
			padding-top: .05rem;
			color: #808080;
			font-size: .16rem;
		}
	}

	.protocol {
		font-size: .14rem;
		margin-bottom: .3rem;
		text-align: center;
		display: block;
		color: #0091FF;
	}
	.van-button--primary {
		margin: .35rem 0 .1rem;
		background-color: var(--main-color);
		border: 1px solid var(--main-color);
		color: #FFFFFF;
		font-size: .18rem;
		height: .5rem;
		line-height: .52rem;
		width: 90%;
		margin-left: 5%;
	}
}
</style>
