<template>
	<view class="personAttestation">
		<far-bottom></far-bottom>
		<scroll-view :style="{ height: phoneHight }" :scroll-y="true">
			<view class="mainView absolute0">
				<!-- 基本信息 -->
				<view class="informationView marginAuto">
					<view class="p30">
						<view class="title" v-if="studInfo.reject && studInfo.status==2" style="color: #f00;font-size: 12px;padding: padding-bottom;">
							<view class="">驳回原因：{{studInfo.reject}}</view>
						</view>
						<view>
							<view class="line inlineBlock verticalM"></view>
							<text class="colorBlack font28 verticalM marginL10">学生信息</text>
						</view>
						<view class="marginT29">
							<view class="inputView">
								<text class="colorBlack font24 verticalM">姓名</text>
								<input placeholder="请输入真实姓名" class="colorBlack font24 inlineBlock verticalM p0p50" v-model="studInfo.name" />
							</view>
							<view class="inputView marginT18">
								<text class="colorBlack font24 verticalM">学校名称</text>
								<input placeholder="请输入学校名称" class="colorBlack font24 inlineBlock verticalM p0p50" v-model="studInfo.school_name" />
							</view>
							<view class="inputView marginT18">
								<text class="colorBlack font24 verticalM">院系</text>
								<input placeholder="请输入院系" class="colorBlack font24 inlineBlock verticalM p0p50" v-model="studInfo.department_name" />
							</view>
							<view class="inputView marginT18">
								<text class="colorBlack font24 verticalM">学号</text>
								<input placeholder="请输入学号" class="colorBlack font24 inlineBlock verticalM p0p50" v-model="studInfo.code" />
							</view>
							<view class="inputView marginT18">
								<text class="colorBlack font24 verticalM">入学时间</text>
								<!-- <input placeholder="请选择入学时间" class="colorBlack font24 inlineBlock verticalM p0p50" type="number" v-model="studInfo.start_date" /> -->
								<view class="colorBlack font24 inlineBlock verticalM p0p50" style="height: 100%;width: 360upx;">
									<uni-datetime-picker type="date" :clear-icon="false" v-model="studInfo.start_date" @maskClick="maskClick"
									 @change="changeDate" placeholder="请选择" />
								</view>
							</view>
							<view class="inputView marginT18">
								<text class="colorBlack font24 verticalM">联系电话</text>
								<input placeholder="请输入您的联系电话" class="colorBlack font24 inlineBlock verticalM p0p50" v-model="studInfo.mobile" />
							</view>
							<view class="inputView marginT18" style="display: flex;align-items: center;background: #fff;">
								<view class="inputView">
									<text class="colorBlack font24 verticalM">手机验证码</text>
									<input placeholder="请输入验证码" class="colorBlack font24 inlineBlock verticalM p0p50"
									 v-model="studInfo.sms_code" style="width:190upx;" />
								</view>
								<view class="colorBlack font24 verticalM marginL10"
								 style="background: #fafafa;border-radius: 10rpx;line-height: 83rpx;padding: 0px 10px;flex-shrink: 0;"
								 @click="getCode" >{{codeBtnText}}</view> 
							</view>
						</view>
					</view>
				</view>
				<!-- 基本信息 -->
				<!-- 上传证件 -->
				<view class="uploadView marginAuto marginT35">
					<view class="p30">
						<view>
							<view class="line inlineBlock verticalM"></view>
							<text style="color: #f00;font-size: 12px;vertical-align: bottom;margin-left: 15rpx;">*</text>
							<text class="colorBlack font28 verticalM marginL15">学生证件</text>
						</view>
						<view class="marginT29 flex">
							<view class="uploadButton inlineBlock textC" @click="uploadFiles()" v-if="studInfo.certificate_img == '' || studInfo.certificate_img == undefined">
								<image :src="imageRootNew+'mb-plus.png'" class="upLoadImg"></image>
							</view>
							<view class="inlineBlock textC" v-else @click="uploadFiles(1)" style="position: relative;">
								<image :src="studInfo.certificate_img" class="imageHave" mode="aspectFit"></image>
								<image :src="imgfixUrls + 'merchant/close.png'" class="close" @click.stop="closePreview()" />
							</view>
						</view>
					</view>
				</view>
				<!-- 上传证件 -->
				
				<!-- 协议 -->
				<view class="marginT40" v-if="0">
					<view class="pL30">
						<view class="bor1gray" v-if="agree == false" @click="agree = true"></view>
						<image :src="imgfixUrls + 'merchant/tyXy.png'" class="image22" v-if="agree == true" @click="agree = false"></image>
						<text class="font24 color999999 marginL10"  @click="agree = !agree">阅读并同意</text>
						<text class="font24 color4F6D8C" @click="showPop">《用户协议条款》</text>
					</view>
				</view>
				<!-- 协议 -->

				<!-- 提交按钮 -->
				<!-- <view class="marginT70auto textC" :class="agree == true ? 'submitButton' : 'submitButton1'" @click="setInfo"> -->
				<view class="marginT70auto textC submitButton" @click="setInfo">
					<text class="lineHeight80 colorW font28">提交认证申请</text>
				</view>
				<!-- 提交按钮 -->
				<!-- <popAgreement :show="show" @clickmask="closePop" :buttonColor="buttonColor" :textInfo="userInfo.agreement"></popAgreement> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
// import popAgreement from '@/components/template/popAgreement';
export default {
	components: {
		// popAgreement
	},
	data() {
		return {
			agree: false,
			phoneHight: null,
			show: false,
			buttonColor: 'rgba(255,68,68,1)',
			userInfo: {},
			studInfo: {
				name: '',
				school_name: '',
				department_name: '',
				code: '',
				start_date: '',
				mobile: '',
				sms_code: '',
				certificate_img: '',
				id: '',
			},
			certificate_img: '',
			id: null,
			codeBtnText: '获取验证码',
		};
	},
	computed: {
		grrzBack() {
			let _this = this;
			return _this.imageRoot + 'grrzBack.png';
		},
		sfzZ() {
			let _this = this;
			return _this.imageRoot + 'sfzZ.png';
		},
		sfzB() {
			let _this = this;
			return _this.imageRoot + 'sfzB.png';
		}
	},
	onLoad(e) {
		let _this = this;
		uni.getSystemInfo({
			success(res) {
				_this.phoneHight = res.windowHeight + 'px';
			}
		});
		uni.getStorage({
			key: 'userinfo',
			success: async function(res) {
				_this.init(res.data.mid);
				_this.id = res.data.mid;
			}
		});
	},
	methods: {
		init(mid) {
			let _this = this;
			// #ifdef H5
			wxApi.wxRegister();
			// #endif
			_this.verifyInfo(mid);
		},
		// 信息验证接口
		verifyInfo(mid) {
			let _this = this;
			let data = {
				mid: mid
			};
			App._post_form('&p=Certified&do=initApplyCertified', data, res => {
				_this.getInfo(mid);
			}, (err)=>{
				// console.log(err.data.message);
				uni.navigateBack({
					delta: 1
				})
			});
		},
		// 信息获取接口
		getInfo(mid) {
			let _this = this;
			let data = {
				// type: 1,
				mid: mid
				// operation: 'get'
			};
			App._post_form('&p=student&do=studentIdentityIndex', data, res => {
				_this.setData({
					studInfo: res.data
				})
				_this.certificate_img = res.data.certificate_img;
				console.log(_this.studInfo)
			}, (err)=>{
				// console.log(err.data.message);
				uni.navigateBack({
					delta: 1
				})
			});
		},
		// 信息设置接口
		setInfo() {
			let _this = this;
			let data = {
				name: _this.studInfo.name,
				school_name: _this.studInfo.school_name,
				department_name: _this.studInfo.department_name,
				code: _this.studInfo.code,
				start_date: _this.studInfo.start_date,
				mobile: _this.studInfo.mobile,
				sms_code: _this.studInfo.sms_code,
				certificate_img: _this.certificate_img,
				id: _this.studInfo.id,
			};
			if(_this.studInfo.name==''){
				uni.showToast({
					icon:'none',
				    title: '姓名不能为空',
				    duration: 2000
				});
				return ;
			}
			if(_this.studInfo.school_name==''){
				uni.showToast({
					icon:'none',
				    title: '学校名称不能为空',
				    duration: 2000
				});
				return ;
			}
			if(_this.studInfo.department_name==''){
				uni.showToast({
					icon:'none',
				    title: '院系不能为空',
				    duration: 2000
				});
				return ;
			}
			if(_this.studInfo.code==''){
				uni.showToast({
					icon:'none',
				    title: '学号不能为空',
				    duration: 2000
				});
				return ;
			}
			if(_this.studInfo.start_date==''){
				uni.showToast({
					icon:'none',
				    title: '入学时间不能为空',
				    duration: 2000
				});
				return ;
			}
			if(_this.studInfo.mobile==''){
				uni.showToast({
					icon:'none',
				    title: '联系电话不能为空',
				    duration: 2000
				});
				return ;
			}
			if(_this.studInfo.sms_code==''){
				uni.showToast({
					icon:'none',
				    title: '验证码不能为空',
				    duration: 2000
				});
				return ;
			}
			// console.log('img完整路径：'+_this.studInfo.certificate_img,  '----------')
			// console.log('image不完整路径：'+_this.certificate_img, '----------')
			if(data.certificate_img==''){
				uni.showToast({
					icon:'none',
				    title: '请上传证件',
				    duration: 2000
				});
				return ;
			}
			setTimeout(()=>{
				App._post_form('&p=student&do=studentIdentityAttestation',data, res => {
					if(res.errno==0){
						uni.showToast({
							title: res.message
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						}, 2000)
					}
				}, (err)=>{
					// console.log(err.data.message);
					if(err.data.message=='认证已成功，请勿重复申请认证' 
					|| err.data.message.indexOf('认证申请失败')!==-1){
						uni.navigateBack({
							delta: 1
						})
					}
				}, ()=>{
					console.log('complete');
				});
			})
		},
		// 文件上传接口
		async uploadFiles(type=1) {
			let _this = this;
			// #ifdef H5
			if(App.getClientType() == 2){
			     let res = await App.browser_upload(6);
			     for (let i = 0; i < res.tempFilePaths.length; i++) {
			     	let aa = await App._upLoad(res.tempFilePaths[i]);
			     	if (type == 1) {
			     		_this.studInfo.pic.splice(0, 1, aa.data.image);
			     		_this.picArray.splice(0, 1, aa.data.img);
			     	} else {
			     		_this.studInfo.pic.splice(1, 1, aa.data.image);
			     		_this.picArray.splice(1, 1, aa.data.img);
			     	}
			     }
			
			     return
			    }
			wxApi.choseImage(res => {
				wxApi.uoloadIg(res.localIds[0], data => {
					if (data.errMsg === 'uploadImage:ok') {
						uni.showLoading({});
						let requestData = {
							upload_type: 2,
							id: data.serverId
						};
						App._post_form(
							'&do=uploadFiles',
							requestData,
							res => {
								if (res.errno === 0) {
									if (type == 1) {
										_this.studInfo.pic.splice(0, 1, res.data.image);
										_this.picArray.splice(0, 1, res.data.img);
									} else {
										_this.studInfo.pic.splice(1, 1, res.data.image);
										_this.picArray.splice(1, 1, res.data.img);
									}
								}
							},
							false,
							() => {
								uni.hideLoading();
							}
						);
					} else {
						uni.hideLoading();
						App.showError('上传失败');
					}
				});
			});
			// #endif
			// #ifndef H5
			wx.chooseImage({
				count: 6,
				sourceType: ['album', 'camera'],
				success: async function(res) {
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						let result = await App._MYupLoad(res.tempFilePaths[i]);
						console.log(result)
						_this.studInfo.certificate_img = result.data.img;
						_this.certificate_img = result.data.image;
						console.log('img完整路径：'+result.data.img, 'image不完整路径：'+result.data.image, '12233');
						uni.showToast({
							title: result.message
						})
					}
				}
			});
			// #endif
		},
		closePop() {
			let _this = this;
			_this.show = false;
		},
		showPop() {
			let _this = this;
			_this.show = true;
		},
		changeDate(e){
			console.log(e);
			this.studInfo.start_date = e;
		},
		maskClick(){
			
		},
		// 获取验证码
		getCode(){
			if(this.codeBtnText!='获取验证码'){
				return;
			}
			let _this = this;
			if (_this.studInfo.mobile == '' || _this.studInfo.mobile.length !== 11) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号',
					duration: 2000
				});
				return;
			}
			let data = {
				phone: _this.studInfo.mobile,
				type: 4,
				is_verifycode: 1
			};
			App._post_form('&do=PIN', data, res => {
				let timer_num = 60;
				let timeClock = setInterval(function() {
					timer_num--;
					_this.codeBtnText = timer_num + 's后重试';
					// _this.timeCount = timer_num;
					if (timer_num == 0) {
						clearInterval(timeClock);
						_this.codeBtnText='获取验证码';
					}
				}, 1000);
				// _this.getSmsCode = res.data.code;
			});
		},
		closePreview(){
			this.studInfo.certificate_img = '';
			this.certificate_img = '';
		}
	}
};
</script>

<style lang="less" scoped>
.submitButton1 {
	width: 690upx;
	height: 80upx;
	background: #999999;
	border-radius: 40upx;
	pointer-events: none;
}
.bor1gray {
	width: 21upx;
	height: 21upx;
	display: inline-block;
	background: white;
	border: 1upx solid #999999;
	border-radius: 50%;
}
.personAttestation {
	padding-bottom: 100upx;
	font-size: 0;
	background-color: #f8f8f8;
}
.wid750 {
	width: 750upx;
	height: 340upx;
}
.informationView {
	width: 690upx;
	// height: 790upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
	margin-top: 10px!important;
}
.marginAuto {
	margin: auto;
}
.absolute0 {
	// position: absolute;
	// top: 179upx;
	width: 750upx;
}
.line {
	width: 8upx;
	height: 27upx;
	background: rgba(255, 68, 68, 1);
	border-radius: 4upx;
}
.colorBlack {
	color: rgba(51, 51, 51, 1);
}
.font28 {
	font-size: 28upx;
}
.font24 {
	font-size: 24upx;
}
.inlineBlock {
	display: inline-block;
}
.verticalM {
	vertical-align: middle;
}
.marginL10 {
	margin-left: 10upx;
}
.marginL15 {
	margin-left: 15upx;
}
.p30 {
	padding: 30upx;
}
.pL30 {
	padding: 0 30upx;
}
.marginT29 {
	margin-top: 29upx;
}
.marginT40 {
	margin-top: 40upx;
}
.inputView {
	width: 630upx;
	height: 83upx;
	background: rgba(250, 250, 250, 1);
	border-radius: 10upx;
	> text {
		display: inline-block;
		line-height: 83upx;
		width: 160upx;
		text-align: right;
		position: relative;
	}
	> text::before {
		content: '*';
		position: absolute;
		top: 2px;
		left: 6px;
		color: #f00;
	}
	> input {
		height: 100%;
		width: 365upx;
	}
}
.marginT18 {
	margin-top: 18upx;
}
.marginT35 {
	margin-top: 35upx;
}
.marginT30auto {
	margin: 30upx auto 0 auto;
}
.p0p50 {
	padding: 0 50upx;
}
.uploadView {
	width: 690upx;
	// height: 379upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.uploadButton {
	width: 160upx;
	height: 160upx;
	background: rgba(248, 248, 248, 1);
	border-radius: 10upx;
	border: 1px solid #e0e0e0;
}
.imageHave {
	width:630upx;
}
.flex {
	display: flex;
	justify-content: space-between;
}
.upLoadImg {
	width: 48upx;
	height: 48upx;
	margin: 56upx auto;
}
.color999999 {
	color: rgba(153, 153, 153, 1);
}
.color4F6D8C {
	color: #4f6d8c;
}
.textC {
	text-align: center;
}
.image22 {
	width: 22upx;
	height: 22upx;
}
.submitButton {
	width: 690upx;
	height: 80upx;
	background: rgba(255, 68, 68, 1);
	border-radius: 40upx;
}
.marginT70auto {
	margin: 70upx auto 20upx auto;
}
.lineHeight80 {
	line-height: 80upx;
}
.colorW {
	color: rgba(255, 255, 255, 1);
}
/deep/ .uni-date-x--border{
	border: none;
}
/deep/ .uni-date-x{
	background-color: transparent;
}
/deep/ .uni-date__x-input{
	line-height: 40px;
}
.inputView /deep/ text.uni-icons{
	// vertical-align: bottom;
	// vertical-align: -webkit-baseline-middle;
}
/deep/ .uni-date-x .icon-calendar {
    padding-top: 5px;
}
.inputView /deep/ .icon-calendar:before{
	content: none;
}
.close {
	width: 32upx !important;
	height: 32upx !important;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 30;
}
</style>
