<template>
	<view class="hzIndex">
		<!-- <view class="tab-banner">
			<image class="image" src="/static/images/epidemic/vaccine-header.png"></image>
		</view> -->
		<hzHeader title="疫苗接种"></hzHeader>
		<view class="hzContent" style="padding-top: 200upx;">
		<view style="padding: 0px 20upx ; ">
			<view class="form-box" style="border-radius: 10upx; margin: 20upx 0px;">
				<view class="form-item" >
					<text class="label">姓　　名:</text>
					<view class="ipt-box"><input class="top-t" v-model="formData.userName" placeholder="请输入姓名" type="text" maxlength="50" disabled="true" /></view>
				</view>
				<view class="form-item" >
					<text class="label">联系方式:</text>
					<view class="ipt-box"><input class="top-t" v-model="formData.phone" placeholder="请输入联系方式" type="text" maxlength="50" disabled="true" /></view>
				</view>
				<view class="form-item" >
					<text class="label">部　　门:</text>
					<view class="ipt-box"><input class="top-t" v-model="formData.orgName" placeholder="请输入部门" type="text" maxlength="50" disabled="true" /></view>
				</view>
			</view>
			
			<view class="form-box-ud" style="border-radius: 10upx;">
				<view class="form-item" v-for="(item, index) in questions" :key="index" v-if="item.show">
					<text class="label"><text v-if="item.required" style="color: red;">*</text>{{item.title}}</text>
					<view class="ipt-box">
						<radio-group v-if="item.type=='radius'" @change="changeRadioGroup($event,item.formName)">
							<label class="uni-list-cell uni-list-cell-pd radio-group" v-for="(obj, index1) in item.options" :key="index1" >
								<view>
									<radio  color="#4db4ea" :value="obj" :checked="obj==formData[item.formName]" />
								</view>
								<view>{{obj}}</view>
							</label>
						</radio-group>
						<textarea v-model="formData[item.formName]" v-if="item.type=='textarea'" maxlength="120" :placeholder="item.placeholderText"/>
						<view class="img-box" v-if="item.imgName">
							<view class="img-item" v-if="formData[item.imgName]">
								<image class="remove-btn" @click="removeImg(item.imgName)" src="/static/icons/delete-icon.png" mode=""></image>
								<image class="img" :src="img[item.imgName][0].replace(/[\r\n]/g,'')" mode=""></image>
							</view>
							<view v-else class="img-item upload-btn" @click="chooseImg(item.imgName)" ><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
						</view>
						<view v-if="item.imgName" style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储、传输、处理涉及国家秘密企业秘密以及敏感信息，违者将严肃问责追责!</view>
						<uni-datetime-picker v-if="item.type=='date'" v-model="formData[item.formName]" type="date"  />
					</view>
				</view>
			</view>
		</view>
		<view class="occupied"></view>
		</view>
		<view class="footer-btn" @click="submit"><view class="btn-blue">提交</view></view>
	</view>
</template>

<script>
	import { vaccinationAdd,vaccinationList } from '@/common/api.js';
	import { callbackRequest,callbackRequestNoLoading, getStorage, alertTip, convertImgToBase64, formatDate,wxSdk,uploadImg ,formatImgUrl } from '@/common/util.js';
	export default {
		data() {
			return {
				formatImgUrl:formatImgUrl,
				questions:[
					{
						title:'是否接种疫苗',
						formName:'vaccination',
						type:'radius',
						required:true,
						show:true,
						requiredText:'请选择是否接种疫苗',
						options:[
							'是','否'
						]
					},
					{
						title:'疫苗接种类型',
						formName:'vaccineType',
						type:'radius',
						required:true,
						show:false,
						requiredText:'请选择疫苗接种类型',
						options:[
							'1针剂','2针剂','3针剂'
						]
					},
					// {
					// 	title:'已接种针数',
					// 	formName:'vaccinationNum',
					// 	type:'radius',
					// 	required:true,
					// 	show:false,
					// 	requiredText:'请选择已接种针数',
					// 	options:[
					// 		'1针'
					// 	]
					// },
					// {
					// 	title:'完成全程接种日期',
					// 	formName:'endDate',
					// 	type:'date',
					// 	required:true,
					// 	show:false,
					// 	requiredText:'请选择完成全程接种日期',
					// },
					// {
					// 	title:'是否接种加强针',
					// 	formName:'vaccinationStronge',
					// 	type:'radius',
					// 	required:true,
					// 	show:false,
					// 	requiredText:'请选择是否接种加强针',
					// 	options:[
					// 		'已接种','未接种'
					// 	]
					// },
					// {
					// 	title:'预计接种加强针日期',
					// 	formName:'ecpectStrongeDate',
					// 	type:'date',
					// 	required:true,
					// 	show:false,
					// 	requiredText:'请选择预计接种加强针日期',
					// },
					// {
					// 	title:'未接种加强针原因',
					// 	type:'textarea',
					// 	placeholderText:'请输入（120字内）',
					// 	required:false,
					// 	show:false,
					// 	formName:'notStrongeReason',
					// },
					{
						title:'上传疫苗接种证明',
						type:'img',
						required:true,
						show:false,
						requiredText:'请上传疫苗接种证明',
						imgName:'vaccinationProve',
					},
					
					{
						title:'未接种疫苗原因',
						formName:'reason',
						type:'radius',
						required:true,
						show:false,
						requiredText:'请选择未接种疫苗原因',
						options:[
							'等待接种','放弃接种'
						]
					},
					{
						title:'医院或卫生疾控部门开具的无法接种证明或者禁忌症证明',
						type:'img',
						required:true,
						show:false,
						requiredText:'请上传医院或卫生疾控部门开具的无法接种证明或者禁忌症证明',
						imgName:'proveImg',
					},
					{
						title:'备注',
						type:'textarea',
						placeholderText:'请输入（120字内）',
						required:false,
						show:true,
						formName:'remarks',
					}
				],
				img:{
					proveImg:[],
					vaccinationProve:[]
				},
				formData:{
					userId: getStorage('userInfo').userId,
					userName: getStorage('userInfo').userName,
					phone: getStorage('userInfo').telnumber,
					orgId: getStorage('userInfo').department_id,
					orgName: getStorage('userInfo').departmentName,
					vaccination:'',//是否接种疫苗
					reason:"",//未接种疫苗原因
					proveImg:'',//医院或卫生疾控部门开具的无法接种证明或者禁忌症证明
					remarks:"",//备注
					vaccineType:"",//接种疫苗类型
					vaccinationNum:"",//接种疫苗针数
					endDate:"",//完成接种日期
					vaccinationStronge:"",//是否接种加强针
					ecpectStrongeDate:"",//预计接种加强针日期
					notStrongeReason:"",//未完成加强针原因
					vaccinationProve:""//疫苗接种证明
					
				},
				submitFlag:true,
				list:[]
			}
		},
		onLoad() {
			this.vaccinationList();
		},
		watch: {
			formData: {
				handler(newValue,oldValue){
					
					if(this.formData.vaccination=='是'){
						let arr1 = [1,2];
						let arr2 = [3,4];
						this.showAndRequired(arr1);
						this.showAndRequiredFalse(arr2);
					}else{
						let arr1 = [1,2];
						let arr2 = [3,4];
						this.showAndRequired(arr2);
						this.showAndRequiredFalse(arr1);
					}
					// if(this.formData.vaccineType=='1针剂（腺病毒载体疫苗）'){
					// 	this.questions[2].options = ['1针'];
					// }else if(this.formData.vaccineType=='2针剂（灭活疫苗）'){
					// 	this.questions[2].options = ['1针','2针'];
					// }else if(this.formData.vaccineType=='3针剂（重组蛋白疫苗）'){
					// 	this.questions[2].options = ['1针','2针','3针'];
					// }
					
					// if(this.formData.vaccinationStronge =='已接种'){
					// 	let arr1 = [5,6];
					// 	this.showAndRequiredFalse(arr1);
					// }else{
					// 	let arr1 = [5,6];
					// 	this.showAndRequired(arr1);
					// }
				},
				deep:true
			}
		},
		methods: {
			onNavigationBarButtonTap(e){
				const index = e.index;
				if(index==0){
					var url = "/pages/epidemic/vaccine-static";
					uni.navigateTo({
						url
					});
				}
			},
			
			showAndRequired(arr){
				for(let i=0;i<arr.length;i++){
					this.questions[arr[i]].required = true;
					this.questions[arr[i]].show = true;
				}
			},
			showAndRequiredFalse(arr){
				for(let i=0;i<arr.length;i++){
					this.questions[arr[i]].required = false;
					this.questions[arr[i]].show = false;
				}
			},
			
			changeRadioGroup(e,radioData){
				this.formData[radioData] = e.detail.value;
				// console.log(data);
			},
			vaccinationList() {
				let that = this;
				let params = {
					method: vaccinationList,
					data: {
						userId: getStorage('userInfo').userId,
					}
				};
				callbackRequestNoLoading(params).then(res => {
					if (res.data.returnCode == 1) {
						this.list = res.data.returnData||[];
						if(this.list.length>0){
							// vaccination:'',//是否接种疫苗
							// reason:"",//未接种疫苗原因
							// proveImg:'',//医院或卫生疾控部门开具的无法接种证明或者禁忌症证明
							// remarks:""//备注
							this.formData.vaccination = this.list[0].VACCINATION;
							this.formData.reason = this.list[0].REASON;
							this.formData.proveImg = this.list[0].PROVE_IMG?this.list[0].PROVE_IMG.split('webImageDir/')[1]:'';
							this.formData.remarks = this.list[0].REMARKS;
							this.img.proveImg =this.list[0].PROVE_IMG?[this.formatImgUrl(this.list[0].PROVE_IMG)]:[];
							
							this.formData.vaccineType = this.list[0].VACCINE_TYPE;
							this.formData.vaccinationNum = this.list[0].VACCINATION_NUM;
							this.formData.endDate = this.list[0].END_DATE;
							this.formData.vaccinationStronge = this.list[0].VACCINATION_STRONGE;
							this.formData.ecpectStrongeDate = this.list[0].EXPECT_STRONGE_DATE;
							this.formData.notStrongeReason = this.list[0].NOT_STRONGE_REASON;
							this.formData.vaccinationProve = this.list[0].VACCINATION_PROVE?this.list[0].VACCINATION_PROVE.split('webImageDir/')[1]:'';
							this.img.vaccinationProve =this.list[0].VACCINATION_PROVE? [this.formatImgUrl(this.list[0].VACCINATION_PROVE)]:[];
							
							
							console.log(this.formData);
							console.log(this.img,'this.img')
						}
					} 
				});
			},
			submit(){
				if(this.submitFlag){
					this.submitFlag = false;
					// if(typeof this.formData.travelDate != 'string'){
					// 	this.formData.travelDate = this.formData.travelDate.join("|");
					// }
					if(!this.verificationForm()){
						this.submitFlag = true;
						return false;
					}
					let params = {
						method: vaccinationAdd,
						data: this.formData
					};
					// let dates = [this.formData.travelDate[0],this.formData.travelDate[1]];
					// dates.push(this.formData.travelDate);
					// params.data.travelDate = dates.join("|");
					callbackRequest(params).then(res => {
						res = res.data;
						if (res.returnCode == 1) {
							this.submitFlag = true;
							alertTip(res.returnMsg);
							setTimeout(_ => {
								this.customNavigateBack()
							}, 1500);
						} else {
							this.submitFlag = true;
							alertTip(res.returnMsg);
						}
					});
				}
			},
			customNavigateBack() {
				// 自定义返回逻辑
				const pages = getCurrentPages(); // 获取页面栈
				const len = pages.length;
				let backPage = ''; // 要返回的页面路径
				for (let i = len - 2; i >= 0; i--) {
					// 从倒数第二个页面开始遍历，找到第一个不是当前页面的页面
					if (pages[i].route !== 'pages/A/A') {
						backPage = pages[i].route;
						break;
					}
				}
				if (backPage) {
					uni.navigateBack({
						delta: len - 1 - pages.findIndex(page => page.route === backPage) // 返回到已存在的页面
					});
				}
			},
			verificationForm(){
				for(let i=0;i<this.questions.length;i++){
					let obj = this.questions[i];
					if(obj.required){
						if(obj.type=='radius'){
							if(!this.formData[obj.formName]){
								alertTip(obj.requiredText);
								return false;
							}
						}else if(obj.type=='img'){
							if(!this.formData[obj.imgName]){
								alertTip(obj.requiredText);
								return false;
							}
						}
						
					}
				}
				return true;
			},
			
			async chooseImg(obj) {
				let chec = 0;
				let sty = [];
				let _this = this;
				uni.showActionSheet({
					itemList:['拍照','相册'],
					success:function(resp){
						chec = resp.tapIndex;
						if (chec == 0) {
							sty = ['camera']; //从相册相机选择 
						} else {
							sty = ['album']; //从相册相机选择
						}
						uni.chooseImage({
							count:1,
							sizeType: ['compressed'],
							sourceType: sty, 
							quality: 1,
							success: async function(res){
								let resData = res.tempFilePaths;
								for(let i=0;i<resData.length;i++){
									if(_this.img[obj].length>1){
										break;
									}
									uni.getImageInfo({
										src: resData[i],
										success:async (path) => {
											convertImgToBase64(path.path, async function(base64) {
												if(_this.img[obj].length<1){
													// _this.imgs.push(base64);
													uni.showLoading({
														title: '图片上传中'
													})
													let blength = base64.length;
													let glength = 7500;
													if(blength<=glength){
														let uploadParam = {
															base64: base64,
															userId:  getStorage('userInfo').userId+i,
															groupEnd: '1'
														}
														await uploadImg(uploadParam).then(resu => {
															resu = resu.data ;
															uni.hideLoading();
															if (resu.returnCode != 1) {
																alertTip(resu.returnMsg);
															}else{
																_this.img[obj].push(base64);
																_this.formData[obj]=resu.returnData+".jpg";
															}
														});
													}else{
														let fnum = parseInt(blength/glength);
														for(let j=1;j<fnum+1;j++){
															if(j==fnum){
																let groupBase = base64.slice((j-1)*glength);
																console.log(groupBase.length,"groupBaselength");
																let uploadParam = {
																	base64: groupBase,
																	userId: getStorage('userInfo').userId+i,
																	groupEnd: '1'
																}
																await uploadImg(uploadParam).then(resu => {
																	resu = resu.data ;
																	if (resu.returnCode == 1) {
																		_this.img[obj].push(base64);
																		_this.formData[obj]=resu.returnData+".jpg";
																	} else {
																		uni.hideLoading();
																		alertTip(resu.returnMsg);
																		return;
																	}
																});
															}else{
																let groupBase = base64.slice((j-1)*glength,glength*j);
																let uploadParam = {
																	base64: groupBase,
																	userId: getStorage('userInfo').userId+i,
																	groupEnd: '0'
																}
																await uploadImg(uploadParam).then(resu => {
																	resu = resu.data ;
																	if (resu.returnCode == 1) {
																	} else {
																		uni.hideLoading();
																		alertTip(resu.returnMsg);
																		return;
																	}
																});
															}
															
														}
														uni.hideLoading();
													}
													
													
												}
												
											});
										},
									});
								}
								
							}
						});
					},
					fail:function(resp){
						console.log(resp.errMsg);
					}
				});
			},
			removeImg(obj) {
				this.img[obj].splice(0, 1);
				this.formData[obj]='';
			},
		}
	}
</script>

<style lang="scss">
	uni-page-body {
		background-color:#F5F5F5!important;
		min-height: 100% !important;
		height: auto !important;
	}
.box {
	display: flex;
	display: -webkit-flex;
}

.box-row-reverse {
	flex-direction: row;
}

.box-column {
	flex-direction: column;
}

.box-left {
	justify-content: flex-start;
}

.box-right {
	justify-content: flex-end;
}

.box-center {
	justify-content: center;
}

.box-between {
	justify-content: space-between;
}
.box-around {
	justify-content: space-around;
}
.box-align-center {
	align-items: center;
}

.box-wrap {
	flex-wrap: wrap;
	margin-left: 28upx;
}	
	
.tab-banner{
	width: 100%;
	.image{
		width: 100%;
		height: 300upx;
	}
}
.form-box-ud {
	background: #fff;
	.form-item {
		overflow: hidden;
		// border-bottom: 1px solid #eee;
		padding: 30upx 20upx 10upx 20upx;
		.label {
			width: 150upx;
			font-size: 28upx;
			color: #333;
			font-weight: bold;
			line-height: 50upx;
		}
		.ipt-box {
			margin-left: 40upx;
			margin-top: 20upx;
			input {
				width: 100%;
				height: 70upx;
				line-height: 70upx;
				font-size: 28upx;
				color: #666;
				border: 1px solid #e5e5e5;
				padding-left: 20upx;
				border-radius: 10upx;
				// padding: 40upx 20upx;
			}
			textarea{
				width: 100%;
				height: 200upx;
				font-size: 28upx;
				color: #666;
				border: 1px solid #e5e5e5;
				padding: 20upx;
				border-radius: 10upx;
			}
			.radio-group{
				font-size: 26upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 40upx;
				min-width: 140upx;
				margin-bottom: 20upx;
			}
		}
		.select {
			.arrow {
				float: right;
				width: 16upx;
				height: 29upx;
				margin-top: 10upx;
			}
			.picker {
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				color: #666;
				margin-left: 10upx;
			}
		}
	}
}

.occupied{
	height:180upx;
}
.footer-btn{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	z-index:10;
	.btn{
		margin:20upx 30upx;
		// background: #007aff;
		background:linear-gradient(to right, #ffc200,#ff9000);/*设置按钮为渐变颜色*/
		font-size:32upx;
		color:#fff;
		text-align:center;
		line-height:90upx;
		border-radius:50upx;
	}
	.btn-blue{
		margin:20upx 30upx;
		// background: #007aff;
		background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #C1EFEA;
		font-size:32upx;
		color:#fff;
		text-align:center;
		line-height:90upx;
		border-radius:50upx;
	}
}
.img-box {
	overflow: hidden;
	padding-top: 20rpx;
	padding-bottom: 10rpx;

	.img-item {
		float: left;
		width: 200upx;
		height: 200upx;
		border: 1px solid #ddd;
		margin: 0 22rpx 20upx 0upx;
		position: relative;
		box-sizing: border-box;

		.img {
			display: block;
			width: 100%;
			height: 100%;
		}

		.remove-btn {
			position: absolute;
			top: -18upx;
			right: -18upx;
			width: 44upx;
			height: 44upx;
			z-index: 2;
		}
	}

	.upload-btn {
		.img {
			width: 60upx;
			height: 60upx;
			margin: 70upx auto 0;
		}
	}
}
.form-box {
	background: #fff;
	.form-item {
		overflow: hidden;
		border-bottom: 1px solid #eee;
		padding: 30upx 20upx;
		.label {
			float: left;
			width: 150upx;
			font-size: 28upx;
			color: #333;
			font-weight: bold;
			line-height: 50upx;
		}
		.ipt-box {
			margin-left: 160upx;
			input {
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				color: #666;
			}
		}
		.select {
			.arrow {
				float: right;
				width: 16upx;
				height: 29upx;
				margin-top: 10upx;
			}
			.picker {
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				color: #666;
				margin-left: 10upx;
			}
		}
	}
}
</style>
