<template>
	<view class="enSecBox">
	    <!-- 已完成 类名 sSec1Type1 图片   enter1-1 enter1-2 enter1-3 enter1-4 enter1-5-->
	    <!-- 未完成 类名 sSec1Type2 图片   enter2-1 enter2-2 enter2-3 enter2-4 enter2-5-->
	    <!-- 可以点击类名  sSec1Tap -->
	    <view class="ensHeader">
	        <view class="ensTime">{{ year }}</view>
	        <view class="ensHeadT">新生入校流程</view>
	    </view>
	    <view class="ensSec1">
	        <view class="eSec1Box">
	            <view class="eSec1Top">step<text>1</text></view>
	            <view :class="one? 'sSec1Type1' : 'sSec1Type2'" style="padding-top: 21px;padding-bottom:21px" class="sSec1Con" id="IsCompleteInfo" @click="tapList('../welcome/list')">
					<image src="@/static/img-notice2/stu-info.jpg" mode="widthFix"></image>
	                <view class="sSec1Txt">
	                    完善学生信息
	                </view>
					<view class="checkBoxRight">
						<view class="check-border-box">
							<view v-if="one" style="margin-left:2px;width: 32px;">
								<image src="@/static/img-notice2/right.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="sSec1State" v-if="one">完成</view>
						<view class="sSec1State" v-else>未完成</view>
					</view>
	                
	            </view>
	        </view>
	        <view class="eSec1Box">
				<image src="~@/common/images/enter1-6.png" class="sSecDown" mode="widthFix"></image>
	            <view class="eSec1Top">step<text>2</text></view>
	            <view :class="twoOne? 'sSec1Type1' : 'sSec1Type2'" class="sSec1Con" id="PayFeeStatus" @click="tapList('/pages/EducationalAdministration/StuInfoFresh/PayFee/list')">
					<image src="@/static/img-notice2/stu-pay.png" mode="widthFix"></image>
	                <view class="sSec1Txt">
	                    线上缴费
	                    <text>扫描二维码缴费</text>
	                </view>
					<view class="checkBoxRight">
						<view class="check-border-box" >
							<view v-if="twoOne" style="margin-left:2px;width: 32px;">
								<image src="@/static/img-notice2/right.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="sSec1State" v-if="twoOne">完成</view>
						<view class="sSec1State" v-else>未完成</view>
					</view>
	            </view>
	            <!-- <view :class="twoTwo? 'sSec1Type1' : 'sSec1Type2'" class="sSec1Con" id="StudentLoan" @click="tapList('../EducationalAdministration/StuInfoFresh/StudentLoan/list')">
					<image src="@/static/img-notice2/stu-daikuan.png" mode="widthFix"></image>
	                <view class="sSec1Txt">
	                    助学贷款
	                    <text>填写贷款回执码</text>
	                </view>
					<view class="checkBoxRight">
						<view class="check-border-box" >
							<view v-if="twoTwo" style="margin-left:2px;width: 32px;">
								<image src="@/static/img-notice2/right.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="sSec1State" v-if="twoTwo">完成</view>
						<view class="sSec1State" v-else>未完成</view>
					</view>
	            </view> -->
	            <view :class="twoThree? 'sSec1Type1' : 'sSec1Type2'" class="sSec1Con" id="OnsitePayFeeStatus">
					<image src="@/static/img-notice2/stu-jiaofei.png" mode="widthFix"></image>
	                <view class="sSec1Txt">
	                    现场缴费
	                    <text>学校现场缴费</text>
	                </view>
					<view class="checkBoxRight">
						<view class="check-border-box" >
							<view v-if="twoThree" style="margin-left:2px;width: 32px;">
								<image src="@/static/img-notice2/right.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="sSec1State" v-if="twoThree">完成</view>
						<view class="sSec1State" v-else>未完成</view>
					</view>
	            </view>
				<view :class="twoFour? 'sSec1Type1' : 'sSec1Type2'" class="sSec1Con" id="OnsitePayFeeStatus">
					<image src="@/static/img-notice2/stu-facecheck.png" mode="widthFix"></image>
				    <view class="sSec1Txt">
				        人脸核验
				        <text>进行人脸识别身份验证</text>
				    </view>
					<view class="checkBoxRight">
						<view class="check-border-box" >
							<view v-if="twoFour" style="margin-left:2px;width: 32px;">
								<image src="@/static/img-notice2/right.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="sSec1State" v-if="twoFour">完成</view>
						<view class="sSec1State" v-else>未完成</view>
					</view>
				</view>
	        </view>
	        <view class="eSec1Box">
	            <image src="~@/common/images/enter1-6.png" class="sSecDown" mode="widthFix"></image>
	            <view class="eSec1Top">step<text>3</text></view>
	            <view :class="three? 'sSec1Type1' : 'sSec1Type2'" class="sSec1Con" id="RegisterStatus" @click="()=>{if(twoFour){tapList('../EducationalAdministration/StuInfoFresh/RegisterQRCode/list')}else{TOAST('请核验人脸后再报到注册')}}">
					<image src="@/static/img-notice2/qrcode.png" mode="widthFix"></image>
	                <view class="sSec1Txt">
	                    报到注册
	                    <text>生成报到二维码，并显示报到教室</text>
	                </view>
					<view class="checkBoxRight">
						<view class="check-border-box" >
							<view v-if="twoThree" style="margin-left:2px;width: 32px;">
								<image src="@/static/img-notice2/right.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="sSec1State" v-if="twoThree">完成</view>
						<view class="sSec1State" v-else>未完成</view>
					</view>
	            </view>
	        </view>
	    </view>
	</view>
</template>

<script>
	import todayTime from '@/common/js/todayTime.js';
export default{
	data() {
		return {
			one: '',
			twoOne: '',
			// twoTwo: '',
			twoThree: '',
			twoFour:'',
			three: '',
			userinfo: {},
			data: {
				StuInfoFreshEntity:{},
				StuInfoFreshFamilyList: [],
				StuInfoFreshEmergePeopleList: []
			},
			year:'',
			ready:false,
		}
	},
	onShow() {
		if(this.ready){
			this.init();
		}
	},
	methods:{
		init() {
			let _this = this;
			_this.userinfo = _this.GET_GLOBAL('loginUser'); //获取登录信息
			this.year = todayTime.doHandleYear()
			_this.LOADING('加载数据中…');
			_this.HTTP_GET('StuInfoFresh/stuInfoFreshEntity', _this.userinfo.account, '加载数据时出错').then(res => {
				this.ready = true
				_this.HIDE_LOADING();
				console.log(res);
				if(res.StuInfoFreshEntity == null){
					res.StuInfoFreshEntity = {}
				}
				_this.data = _this.COPY(res);
				if (this.data["StuInfoFreshFamilyList"].length && this.data["StuInfoFreshFamilyList"].length > 0) {
					_this.one =  true
				} else {
					_this.one = false
				}
				
				if (_this.data["StuInfoFreshEntity"].PayFeeStatus == "1") {
				    _this.twoOne =  true
				} else {
					_this.twoOne = false
				}
				
				if (_this.data["StuInfoFreshEntity"].StudentLoanStatus == "1") {
					// _this.twoTwo =  true
				} else {
					// _this.twoTwo = false
				}
				
				if (_this.data["StuInfoFreshEntity"].OnsitePayFeeStatus == "1") {
					_this.twoThree =  true
				} else {
					_this.twoThree = false
				}
				
				if (_this.data["StuInfoFreshEntity"].RegisterStatus == "1") {
					_this.three =  true
				} else {
					_this.three = false
				}
				
				if (_this.data["StuInfoFreshEntity"].PhotoCheckStatus == "1") {
					_this.twoFour =  true
				} else {
					_this.twoFour = false
				}
			});
		},
		tapList(str) {
			this.NAV_TO(str, {}, true);
		}
	},
	created() {
		this.init()
	}
}
</script>

<style lang="less" scoped>
.enSecBox{
	min-height: 100vh;
	background-color: #fff;
	// padding-bottom: 20px;
	background-image: url("@/static/stu-bg.png");
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: #0c86d8;
}
.ensTime{
	position: relative;
	text-align: center;
	line-height: 24px;
	font-size: 14px;
	color: #fff;
}
.ensTime:after,.ensTime::before{
	content: '';
	width: 6px;
	height: 6px;
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.ensTime:after{
	right: 32%;
}
.ensTime::before{
	left: 32%;
}
.ensHeader{
	// background-color: #0C86D8;
	// padding: 20px 0;
	padding-top: 8px;
}
.ensHeadT{
	font-size: 20px;
	color: #fff;
	text-align: center;
	margin-top: 15px;
	font-weight: 700;
}
.ensSec1{
	padding: 0 15px;
	padding-left: 25px;
}
.eSec1Box{
	position: relative;
	margin-top: 14px;
}
.eSec1Box:before{
	content: '';
	position: absolute;
	left: -10px;
	bottom: -26px;
	height: calc(100% + 10px);
	border-left: #abddff 2px dashed;
}
.eSec1Box:first-child{
	margin-top: 10px;
}
.eSec1Box:last-child:before{
	content: '';
	display: none;
}
.sSecDown{
	display: none;
	position: absolute;
	width: 25px;
	left: 0;
	right: 0;
	top: -4px;
	margin: auto;
}
.eSec1Top{
	font-size: 14px;
	font-weight: bold;
	color: #abddff;
	font-style: italic;
	padding-left: 8px;
}
.eSec1Top:before{
	content: '';
	background-color: #abddff;
	position: absolute;
	height: 8px;width: 8px;
	border-radius: 50%;
	left: -13px;
	top: 10px;
}
.eSec1Top text {
	color: #abddff;
	font-size: 20px;
	// margin-left: 5px;
}
.sSec1Con{
	padding: 14px 15px 14px 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	background-color: #fff;
	border-radius: 16px;
	position: relative;
}
.sSec1Type1{
	border: 2px solid #AEE8CF;
	// border-radius: 30px;
}
.sSec1Type1 .sSec1State{
	color: #9A9A9A;
}
.sSec1Type2{
	border: 2px solid #B8E2FF;
	// border-radius: 32px;
}
.sSec1Type2 .sSec1State{
	color: #9A9A9A;
}
.sSec1Con > image{
	width: 30px;
}
.sSec1State{
	font-size: 12px;
	margin-top: 4px;
} 
.sSec1Txt{
	flex: 1;
	padding-left: 16px;
	font-size: 16px;
	text-align: left;
	color: #1A1A1A;
	margin: 5px 0;
}
.sSec1Txt text{
	display: block;
	color: #9A9A9A;
	margin-top: 4px;
	font-size: 12px;
}
.checkBoxRight{
	position: absolute;
	right: 0;
	height: 100%;
	border-radius: 0 16px 16px 0;
	border-left: 1px dashed #ABDDFF;
	width: 78px;
	background-color: #e5f4ff;
	text-align: center;
}
.check-border-box{
	border: #0C86D8 2px solid;
	width: 28px;height: 28px;
	border-radius: 2px;
	background: #fff;
	margin: 0 auto;
	margin-top: 18px;
}
</style>
