<template>
	<view>
		<view class="back">
			<view class="header">
				<view class="banner"><image src="../../static/imgs/banner.png"></image></view>
			</view>
			<view class="grather">
				<view>人员信息采集</view>
				<text class="desc">
					根据公司疫情防控领导小组会议精神,为做好公司新型冠状病毒感染的肺炎防控工作,切实维护员工身体健康和运行稳定,现需对公司全体人员做人员信息采集工作。请按要求做好数据采集工作，确保录入信息真实有效。
				</text>
			</view>
			<view class="form-group">
				<label>
					姓名
					<text class="req">*</text>
				</label>
				<input v-model="formData.name" placeholder="" />
			</view>
			<view class="form-group">
				<label>工号</label>
				<view class="info">正式在册人员请输入工号，驻场支撑及临时一卡通员工，请输入手机号。</view>
				<input v-model="formData.jobNum" placeholder="" />
			</view>
			<view class="form-group">
				<label>身份证号</label>
				<view class="info">驻场支撑、临时一卡通及无工号的员工，请输入有效身份证件号码。</view>
				<input v-model="formData.idcardNum" placeholder="" maxlength="18" />
			</view>
			<view class="form-group">
				<label>
					所属单位
					<text class="req">*</text>
				</label>
				<view class="ipt-box select">
					<image class="arrow" src="/static/imgs/xl.png" mode=""></image>
					<picker class="picker" v-if="comList.length > 0" :range="comList" @change="changeCom" range-key="name">
						<view>{{ comList[comIndex].name }}</view>
					</picker>
				</view>
			</view>
			<view class="form-group">
				<label>
					所属部门
					<text class="req">*</text>
				</label>
				<!-- <input v-model="formData.department" placeholder=""/> -->
				<view class="ipt-box select">
					<image class="arrow" src="/static/imgs/xl.png" mode=""></image>
					<picker class="picker" v-if="deptList.length > 0" :range="deptList" @change="changeDepartment" range-key="name">
						<view>{{ deptList[departmentIndex] }}</view>
					</picker>
				</view>
			</view>
			<view class="form-group">
				<label>
					手机号
					<text class="req">*</text>
				</label>
				<input v-model="formData.phone" placeholder="" maxlength="11" />
			</view>
			<view class="form-group">
				<label>
					证件照
					<text class="req">*</text>
				</label>
				<view class="info">大小在60K以上10M以内、分辨率在200*200以上的电子证件照，无过度美颜。</view>
				<view class="img-box">
					<view class="img-item" v-for="(item, index) in imgs" :key="index">
						<image class="remove-btn" @click="removeImg(index)" src="/static/imgs/delete-icon.png" mode=""></image>
						<image class="img" :src="item" mode=""></image>
					</view>
					<view class="img-item upload-btn" @click="chooseImg()" v-if="imgs.length < 1"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
				</view>
			</view>
			<view class="form-group">
				<label>
					自拍大头照
					<text class="req">*</text>
				</label>
				<view class="info">手机自拍面部图片即可，照片需清晰、正确对焦，小于10M，无逆光，无黑影，无过度美颜。</view>
				<view class="img-box">
					<view class="img-item" v-for="(item, index) in life_imgs" :key="index">
						<image class="remove-btn" @click="removeLifeImg(index)" src="/static/imgs/delete-icon.png" mode=""></image>
						<image class="img" :src="item" mode=""></image>
					</view>
					<view class="img-item upload-btn" @click="chooseLifeImg()" v-if="life_imgs.length < 1">
						<image class="img" src="/static/imgs/tianjia-img.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- <view class="occupied"></view> -->
			<view class="foot-submit" @click="submit()"><view class="btn">提交</view></view>

			<view class="footer-tip">
				<text>甘肃同兴智能科技发展有限责任公司提供技术支持</text>
				<br />
				<text @tap="call">13919995340</text>
			</view>
		</view>
	</view>
</template>

<script>
import { callbackRequest, convertImgToBase64, alertTip, sureAlterTip, getStorage, formatDate, regPhone, regIdCard, resetOrientation } from '@/common/util.js';
import { insertInfoGrather, getOrargs, queryOne } from '@/common/api.js';
export default {
	data() {
		return {
			imgs: [],
			life_imgs: [],
			deptList: ['请选择...'],
			departmentIndex: 0,
			comList: [
				{name:"省公司"},
				],
			comIndex: 0,

			formData: {
				name: '',
				jobNum: '',
				idcardNum: '',
				phone: '',
				// department: ''
			}
		};
	},
	onLoad() {
		this.getDepts();
	},
	methods: {
		getDepts() {
			let data = {
				method: getOrargs,
				data: {}
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					var list = res.data.returnData;
					this.deptList = this.deptList.concat(list);
				}
			});
		},
		//删除图片
		removeImg(index) {
			this.imgs.splice(index, 1);
		},
		//删除图片
		removeLifeImg(index) {
			this.life_imgs.splice(index, 1);
		},
		changeDepartment(e) {
			console.log(e.detail.value);
			this.departmentIndex = e.detail.value;
		},
		changeCom(e) {
			this.comIndex = e.detail.value;
		},
		chooseLifeImg() {
			let _this = this;
			uni.chooseImage({
				count: 2,
				success: res => {
					var size = res.tempFiles[0].size / 1024;
					console.log("size:",size);
					if (size / 1024 > 10) {
						// 大于10m
						alertTip('自拍大头照不得大于10MB，请重新选择');
						_this.life_imgs = [];
						return;
					} else {
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function(image) {
								// console.log("w:",image.width);
								// console.log("h:",image.height);
								if (image.width < 200 || image.height < 200) {
									alertTip('自拍大头照分辨率过小，请重新选择');
									_this.life_imgs = [];
									return;
								} else {
									let param = '';
									let imgArr = res.tempFilePaths;
									for (var i = 0; i < imgArr.length; i++) {
										param = imgArr[i];
										
										// 解决图片旋转问题
										var EXIF = require('@/js_sdk/leiqch-exif/exif/exif.js');
										var image = new Image();
										image.onload = function() {
											EXIF.getData(image, function() {
												// 此方法定义在 util.js
												resetOrientation(param,EXIF.getTag(this, 'Orientation'),function(base64Correct){
													_this.life_imgs.push(base64Correct);
												});
											});
										};
										image.src = param;
										// convertImgToBase64(param, function(base64) {
										// 	_this.life_imgs.push(base64);
										// });
									}
								}
							}
						});
					}
				}
			});
		},
		chooseImg() {
			let _this = this;
			uni.chooseImage({
				count: 2,
				success: res => {
					var size = res.tempFiles[0].size / 1024;
					if (size < 60) {
						// 小于 60kb
						alertTip('证件照不得小于60KB，请重新选择');
						_this.imgs = [];
						return;
					} else if (size / 1024 > 10) {
						// 大于10m
						alertTip('证件照不得大于10MB，请重新选择');
						_this.imgs = [];
						return;
					} else {
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function(image) {
								// console.log("w:",image.width);
								// console.log("h:",image.height);
								if (image.width < 200 || image.height < 200) {
									alertTip('证件照分辨率过小，请重新选择');
									_this.imgs = [];
									return;
								} else {
									let param = '';
									let imgArr = res.tempFilePaths;
									for (var i = 0; i < imgArr.length; i++) {
										param = imgArr[i];
										// 解决图片旋转问题
										var EXIF = require('@/js_sdk/leiqch-exif/exif/exif.js');
										var image = new Image();
										image.onload = function() {
											EXIF.getData(image, function() {
												// 此方法定义在 util.js
												resetOrientation(param,EXIF.getTag(this, 'Orientation'),function(base64Correct){
													_this.imgs.push(base64Correct);
												});
											});
										};
										image.src = param;
										// convertImgToBase64(param, function(base64) {
										// 	_this.imgs.push(base64);
										// });
									}
								}
							}
						});
					}
				}
			});
		},
		submit() {
			var formData = this.formData;
			if (!formData.name) {
				alertTip('请填写姓名');
				return;
			}
			var reg = new RegExp("[`~!@#$^&*=|{}':;',\\[\\].<>/?~！@#￥……&*——|{}【】‘；：”“'。，、？]");
			if (formData.name && reg.test(formData.name)) {
				alertTip('姓名不得含有特殊字符');
				return;
			}
			if (formData.jobNum && reg.test(formData.jobNum)) {
				alertTip('工号不得含有特殊字符');
				return;
			}
			if (this.comList[this.comIndex].name == '请选择...') {
				alertTip('请选择单位');
				return;
			}
			if(this.deptList[this.departmentIndex] == '请选择...'){
				alertTip('请选择部门');
				return;
			}
			// if (!formData.department){
			// 	alertTip('请输入所属部门');
			// 	return;
			// }
			// if (reg.test(formData.department)){
			// 	alertTip('部门不得含有特殊字符');
			// 	return;
			// }
			if (formData.idcardNum && !regIdCard.test(formData.idcardNum)) {
				alertTip('身份证号格式有误');
				return;
			}
			if (!formData.phone) {
				alertTip('请填写手机号');
				return;
			}
			if (!regPhone.test(formData.phone)) {
				alertTip('手机号格式有误');
				return;
			}

			if (this.imgs.length < 1) {
				alertTip('请上传证件照');
				return;
			}
			if (this.life_imgs.length < 1) {
				alertTip('请上传自拍大头照');
				return;
			}
			formData.company = this.comList[this.comIndex].name;
			formData.department = this.deptList[this.departmentIndex];
			formData.faceImgUrl = this.imgs[0];
			formData.lifeImgUrl = this.life_imgs[0];
			let pa = {
				method: queryOne,
				data: formData
			};
			callbackRequest(pa).then(res => {
				res = res.data;
				if (res.returnCode == 2) {
					sureAlterTip('提示', '用户（'+formData.name+'/'+formData.phone+'）数据已提交，是否进行信息更新？', true).then(res => {
						if (res === 200) {
							let params = {
								method: insertInfoGrather,
								data: formData
							};
							// console.log('params:', params);
							callbackRequest(params).then(res => {
								res = res.data;
								if (res.returnCode == 1) {
									uni.redirectTo({
										url: './success'
									});
								} else {
									alertTip(res.returnMsg);
								}
							});
						}
					});
				} else {
					sureAlterTip('提示', '确定要提交?', true).then(res => {
						if (res === 200) {
							let params = {
								method: insertInfoGrather,
								data: formData
							};
							// console.log('params:', params);
							callbackRequest(params).then(res => {
								res = res.data;
								if (res.returnCode == 1) {
									uni.redirectTo({
										url: './success'
									});
								} else {
									alertTip(res.returnMsg);
								}
							});
						}
					});
				}
			});
		},

		call() {
			uni.makePhoneCall({
				phoneNumber: '13919995340' //仅为示例
			});
		}
	}
};
</script>

<style lang="scss">
page {
	padding: 20upx;
	background-color: #eaf1f0;
}
.banner {
	box-shadow: 0 0 20rpx 10rpx #e4e3e3;
	border-radius: 10rpx;

	image {
		width: 100%;
		height: 250rpx;
		border-radius: 10rpx;
		vertical-align: top;
	}
}

.back {
	background-color: #ffffff;
}
.grather {
	padding: 20upx;
}
.desc {
	padding-left: 60upx;
	font-size: 28upx;
}
.form-group {
	padding: 20upx;
	margin-top: 10upx;
	label {
		font-size: 30upx;
		font-weight: bold;
		.req {
			color: #ff3824;
		}
	}
	input {
		margin-top: 10upx;
		width: 100%;
		border: 1px solid #dfdfdf;
		max-width: 260px;
		height: 60upx;
		padding: 6px;
		border-radius: 2px;
	}
	.info {
		font-size: 25upx;
		color: #999999;
	}
	.img-box {
		overflow: hidden;
		padding-top: 25upx;
		.img-item {
			float: left;
			width: 210upx;
			height: 210upx;
			border: 1px solid #ddd;
			margin: 0 20upx 20upx 0upx;
			position: relative;
			.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: 75upx auto 0;
			}
		}
	}
	.ipt-box {
		// margin-left: 160upx;
		// border: 1px solid #ddd;
		margin-top: 10upx;
		width: 100%;
		border: 1px solid #dfdfdf;
		max-width: 260px;
		height: 60upx;
		padding: 6px;
		border-radius: 2px;
		input {
			width: 100%;
			height: 50upx;
			line-height: 50upx;
			font-size: 26upx;
			color: #666;
		}
	}

	.select {
		.arrow {
			float: right;
			width: 32upx;
			height: 25upx;
			margin-top: 10upx;
			// margin-right: 150upx;
		}

		.picker {
			// height: 50upx;
			// line-height: 50upx;
			font-size: 26upx;
			color: #666;
		}
	}
}
.foot-submit {
	bottom: 0;
	left: 0;
	width: 100%;
	.btn {
		margin: 20upx 30upx;
		background: linear-gradient(to right, #59deff, #3e83ea); /*设置按钮为渐变颜色*/
		font-size: 28upx;
		color: #fff;
		text-align: center;
		line-height: 80upx;
		border-radius: 6upx;
	}
}
.footer-tip {
	margin-top: 40upx;
	text-align: center;
	font-size: 28upx;
	color: #666;
}
</style>
