<template>
	<view class="container">
		<image class="cbg" src="../../static/common_bg.png"></image>
		<view class="wrap">
			<topBanner :banner_list="banner_list"></topBanner>
			<view class="wrap-status">
				<view v-if="info.status===0">
					<view class="wrap-status-name">{{userInfo.username}}:</view>
					<view  class="wrap-status-content">欢迎您报名{{courseInfo.name}}，我们将在1-3个工作日内审核并通知您报名结果….</view>
				</view>
				<view v-else-if="info.status===1">
					<view  class="wrap-status-name">{{userInfo.username}}:</view>
					<view  class="wrap-status-content">您已被{{courseInfo.name}}录取！<span
							v-if="courseInfo.start_date">请于{{courseInfo.start_date}}到学院报到。</span></view>
				</view>
				<view v-else-if="info.status===2">
					<view  class="wrap-status-name">{{userInfo.username}}:</view>
					<view  class="wrap-status-content"> 很遗憾，您未被{{courseInfo.name}}录取！</view>
				</view>
				<view v-else-if="info.status===3">
					<view  class="wrap-status-name">{{userInfo.username}}:</view>
					<view  class="wrap-status-content"> 您未被{{courseInfo.name}}纳入备选人才！</view>
				</view>
			</view>
			<view class="wrap-img">
				<image src="../../static/mycourse-status.png"></image>
			</view>

		</view>
	</view>
</template>

<script>
	import topBanner from '@/components/topBanner.vue'
	export default {
		components: {
			topBanner
		},
		data() {
			return {
				banner_list: [],
				info: {},
				userInfo: {},
				courseInfo: {}
			}
		},
		onLoad(options) {
			this.getCourseDetail(options.id)
			this.getBannerList()
		},
		methods: {
			async getCourseDetail(id) {

				const res = await this.$u.api.courseGetSign({
					course_id: id
				})
				this.info = res.detail
				this.userInfo = res.detail.user
				this.courseInfo = res.detail.course
			},
			async getBannerList(){
				const res = await this.$u.api.otherBanner({
					position:1,
				})
				this.banner_list = res
			},
		}

	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
		width: 100%;
		height: 100vh;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.wrap {
			position: relative;
			height:100%;
			&-status{
				margin:120rpx 20rpx;
				&-name{
					color:#000;
					font-size: 32rpx;
					padding-bottom:20rpx;
				}
				&-content{
					line-height: 2;
					text-indent: 2em;
				}
			}
			&-img{
				image{
					width:260rpx;
					height:314rpx;
					display: block;
					margin:0 auto;
				}
			}

		}
	}
</style>