<template>
	<view class="content">
		<view class="innerContent">
			<view class="topImg">
				<image src="../../static/ic_4@2x.png" mode=""></image>
			</view>
			<view class="topDesc">
				专业的师资团队给你系统的课程讲授和完整的贴心服务， 只为您能轻松拿证
			</view>
			<view class="selectBox">
				<view class="itemBox">
					<view class="itemText">
						<image src="../../static/redIcon.png" mode="" style="width:20rpx;height: 20rpx;"></image>
						报名工种
					</view>
					<view class="pickerBox">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="picker" v-if="index==-1">
								请选择工种
							</view>
							<view class="picker" v-else>
								{{array[index]}}
							</view>
						</picker>
					</view>
				</view>
				<view class="itemBox">
					<view class="itemText">
						<image src="../../static/redIcon.png" mode="" style="width:20rpx;height: 20rpx;"></image>
						真实姓名
					</view>
					<input type="text" value="" placeholder="请输入姓名" @blur="nameInput" />
				</view>
				<view class="itemBox">
					<view class="itemText">
						<image src="../../static/redIcon.png" mode="" style="width:20rpx;height: 20rpx;"></image>
						身份证号
					</view>
					<input type="text" value="" placeholder="请输入身份证号" @input="iDInput" @blur="blurIdCard" />
				</view>
				<view class="itemBox">
					<view class="itemText">
						<image src="../../static/redIcon.png" mode="" style="width:20rpx;height: 20rpx;"></image>
						联系电话
					</view>
					<input type="text" value="" placeholder="请输入联系电话" @input="phoneNum" @blur="blurPhone" />
				</view>
				<view class="itemBox">
					<view class="itemText">
						性别
					</view>
					<view class="" style="width: 400rpx;padding-left: 20rpx;box-sizing: border-box;display: flex;">
						<view class="radioBox" @click="radioChange(1)">
							<image src="../../static/select.png" mode="" v-if="radioChecked"></image>
							<image src="../../static/unSelect.png" mode="" v-else></image>
							男
						</view>
						<view class="radioBox" @click="radioChange(2)">
							<image src="../../static/select.png" mode="" v-if="!radioChecked"></image>
							<image src="../../static/unSelect.png" mode="" v-else></image>
							女
						</view>
					</view>
				</view>
				<view class="itemBox">
					<view class="itemText">
						<!-- <image src="../../static/redIcon.png" mode="" style="width:20rpx;height: 20rpx;"></image> -->
						添加照片
					</view>
					<view class="" style="width: 400rpx;padding-left: 20rpx;box-sizing: border-box;display: flex;" @click="uploadImg">
						<image src="../../static/uploadIcon.png" mode="" style="width: 160rpx;height: 160rpx;"  v-if="fileList.length==0"></image>
						<image :src="urlImg[0]" mode="" v-else style="width: 160rpx;height: 160rpx;"></image>
					</view>
				</view>
				<view class="itemBox">
					<view class="itemText">
						民族
					</view>
					<input type="text" value="" placeholder="请输入民族" @blur="nationInput" />
				</view>
				<view class="itemBox">
					<view class="itemText">
						学历
					</view>
					<view class="pickerBox">
						<picker @change="bindPickerChange1" :value="index1" :range="array1" :range-key="name">
							<view class="picker" v-if="index1==-1">
								请选择学历
							</view>
							<view class="picker" v-else>
								{{array1[index1]}}
							</view>
						</picker>
					</view>
				</view>
				<view class="itemBox">
					<view class="itemText">
						邮箱
					</view>
					<input type="text" value="" placeholder="请输入邮箱" @blur="mailInput" />
				</view>
				<view class="itemBox">
					<view class="itemText">
						<image src="../../static/redIcon.png" mode="" style="width:20rpx;height: 20rpx;"></image>
						工作单位
					</view>
					<input type="text" value="" placeholder="请输入工作单位(隶属单位)" @blur="unitInput" />
				</view>
				<view class="itemBox">
					<view class="itemText">
						<image src="../../static/redIcon.png" mode="" style="width:20rpx;height: 20rpx;"></image>
						工作岗位
					</view>
					<input type="text" value="" placeholder="请输入工作岗位" @blur="yearInput" />
				</view>
				<view class="itemBox">
					<view class="itemText">
						公司地址
					</view>
					<input type="text" value="" placeholder="请输入公司地址" @blur="brandInput" />
				</view>
			</view>

		</view>
		<view class="BtnBox">
			<view class="Btn" @click="submits">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				id: '',
				array: [], //工种
				arrarAll: [], //工种
				index: -1, //选择工种
				index1: -1, //选择学历
				array1: ['本科', '大专', '中专'], //学历
				arrayAlls: [], //学历
				indexClass: -1, //选择分类
				arrayClass: [], //选择分类
				arrayClassAll: [],
				nameText: '',
				idNum: '',
				idTrue: false, //校验身份证号
				phoneNums: '',
				ajxtrue: false, //手机号验证
				nation: '', //民族
				mail: '',
				ajaEmail: false, //校验邮箱
				unit: '', //单位
				year: '', //年限
				brand: '', //品牌
				type: '', //类别
				area: '', //地域
				radioChecked: true, //选择性别
				btnClick: true,
				fileList:[],  
				urlImg:[]
			}
		},
		onLoad() {

		},
		onShow() {
			this.getClassList()
			this.getTypeList()
			this.geteducationList()
		},
		methods: {
			//获取报考类型列表
			getClassList() {
				this.arrayClass = []
				this.arrayClassAll = []
				request.get('/api/index/sign_up_class', {}).then(res => {
					let list = res.data
					list.forEach((item, index) => {
						this.arrayClass.push(item.name)
					})

					this.arrayClassAll = res.data
				}).catch(err => {

				})
			},
			//上传照片
			uploadImg() {
				let that = this
				that.tempFilePaths = []
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						let list = chooseImageRes.tempFilePaths
						list.forEach((item, index) => {
							that.tempFilePaths.push(item);
						})
						let lists = that.tempFilePaths
						lists.forEach(ele => {
							const uploadTask = uni.uploadFile({
								url: 'http://ranqi-admin.t.brotop.cn//api/common/upload',
								filePath: ele,
								fileType: 'image',
								name: 'file',
								formData: {
									'user': 'test'
								},
								header: {
									'token': uni.getStorageSync('token') || ''
								},
								success: (uploadFileRes) => {
									let uploadList = JSON.parse(uploadFileRes.data).data
									console.log(uploadFileRes,'res')
									that.fileList[0]=uploadList.url
									that.urlImg[0]=uploadList.fullurl
								}
							});
						})
			
					}
				});
			},
			//获取工种列表
			getTypeList() {
				this.array = []
				this.arrayAll = []
				request.get('/api/index/work', {}).then(res => {
					console.log(res, 'res')
					let list = res.data
					list.forEach((item, index) => {
						this.array.push(item.name)
					})
					console.log(this.array)
					this.arrayAll = res.data
				}).catch(err => {

				})
			},
			//获取学历列表
			geteducationList() {
				this.array1 = []
				this.arrayAlls = []
				request.get('/api/index/education', {}).then(res => {
					let list = res.data
					list.forEach((item, index) => {
						this.array1.push(item.name)
					})
					this.arrayAlls = res.data
				}).catch(err => {

				})
			},
			//选择工种
			bindPickerChange(e) {
				let that = this
				that.index = e.detail.value
			},
			//选择学历
			bindPickerChange1(e) {
				let that = this
				that.index1 = e.detail.value
			},
			//选择分类
			bindPickerChangeClass(e) {
				let that = this
				that.indexClass = e.detail.value
			},
			nameInput(e) {
				this.nameText = e.detail.value
			},
			iDInput(e) {
				this.idNum = e.detail.value
			},
			phoneNum(e) {
				this.phoneNums = e.detail.value
			},
			nationInput(e) {
				this.nation = e.detail.value
			},
			mailInput(e) {
				this.mail = e.detail.value
				this.checkEmail(this.mail)
			},
			unitInput(e) {
				this.unit = e.detail.value
			},
			yearInput(e) {
				this.year = e.detail.value
			},
			brandInput(e) {
				this.brand = e.detail.value
				console.log(this.brand,'公司地址')
			},
			typeInput(e) {
				this.type = e.detail.value
			},
			//选择性别
			radioChange(index) {
				if (index == 1) {
					this.radioChecked = true
				} else {
					this.radioChecked = false
				}
			},
			//校验手机号
			blurPhone: function(e) {
				var phone = e.detail.value;
				let that = this
				if (!(/^1[34578]\d{9}$/.test(phone))) {
					this.ajxtrue = true
					if (phone.length >= 11 || phone.length < 11) {
						uni.showToast({
							title: '手机号有误',
							icon: 'none',
							duration: 2000
						})
						this.ajxtrue = false
					}
				} else {
					this.ajxtrue = true
				}
			},
			//校验身份证号
			blurIdCard() {
				console.log(this.checkIDCard(this.idNum), 'iddd')
				this.idTrue = this.checkIDCard(this.idNum)
				if (!this.idTrue) {
					uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none'
					})
				}
			},
			//校验身份证号
			checkIDCard(idcode) {
				var weight_factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
				var check_code = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
				var code = idcode + "";
				var last = idcode[17]; //最后一位
				var seventeen = code.substring(0, 17);
				var arr = seventeen.split("");
				var len = arr.length;
				var num = 0;
				for (var i = 0; i < len; i++) {
					num = num + arr[i] * weight_factor[i];
				}
				// 获取余数
				var resisue = num % 11;
				var last_no = check_code[resisue];
				var idcard_patter =
					/^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
				// 判断格式是否正确
				var format = idcard_patter.test(idcode);
				// 返回验证结果，校验码和格式同时正确才算是合法的身份证号码
				return last === last_no && format ? true : false;
			},
			//校验邮箱
			checkEmail(valuye) {
				let re = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
				if (re.test(valuye)) {
					this.ajaEmail = true
				} else {
					this.ajaEmail = false
					uni.showToast({
						title: '请输入正确的邮箱',
						icon: 'none'
					})
				}
			},


			//立即提交
			submits() {
				let that = this
				if (that.btnClick) {
					if (that.index == -1) {
						uni.showToast({
							title: '请选择报名工种',
							icon: 'none'
						})
					} else if (that.nameText == '') {
						uni.showToast({
							title: '请输入真实姓名',
							icon: 'none'
						})
					} else if (that.idNum == '' || !that.idTrue) {
						uni.showToast({
							title: '请输入正确的身份证号',
							icon: 'none'
						})
					} else if (that.phoneNum == '' || !that.ajxtrue) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
					} else if(that.unit==''){
						uni.showToast({
							title: '请填写工作单位',
							icon: 'none'
						})
					}else if(this.year==''){
						uni.showToast({
							title: '请填写工作岗位',
							icon: 'none'
						})
					}
					else {
						request.post('/api/index/sign_up', {
							work_id: that.arrayAll[that.index].id,
							name: that.nameText,
							card: that.idNum,
							phone: that.phoneNums,
							sex: that.radioChecked ? '1' : '0',
							// finily: that.nation,
							education_id: that.index1 == -1 ? '' : that.arrayAlls[that.index1].id, //学历id
							email: that.mail,
							work_company: that.unit, //工作单位
							work_post: that.year, //工作岗位
							address: that.brand,  //工作地址
							image:that.fileList[0]  //图片
						}).then(res => {
							console.log(res, 'res')
							if (res.code == 1) {
								uni.showToast({
									title: '报名成功'
								})
								setTimeout(() => {
									// uni.navigateTo({
									// 	url: '/pages/index/RegistrationDetails?id='+res.data.id
									// })
									uni.navigateTo({
										url: '/pages/index/login'
									})
								}, 1000)
							} else {
								wx.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}).catch(err => {})
						// uni.showModal({
						// 	title: '提示',
						// 	content: '确定提交吗？',
						// 	success: function(res) {
						// 		if (res.confirm) {
						// 			console.log(that.arrayClassAll[that.indexClass].id,that.arrayAll[that.index].id,that.arrarAlls[that.index1].id)
						// 			request.post('/api/index/sign_up', {
						// 				class_id: that.arrayClassAll[that.indexClass].id,
						// 				work_id: that.arrayAll[1].id,
						// 				name: that.nameText,
						// 				card: that.idNum,
						// 				phone: that.phoneNums,
						// 				sex:'1',
						// 				finily: that.nation,
						// 				education_id:'', //学历id
						// 				email: that.mail,
						// 				work_company: that.unit, //工作单位
						// 				work_time: that.year, //工作年限
						// 				brand: that.brand, //品牌
						// 				product_type: that.type, //产品类型
						// 				address: that.area
						// 			}).then(res => {
						// 				if (res.code == 1) {
						// 					uni.showToast({
						// 						title: '报名成功'
						// 					})
						// 					setTimeout(() => {
						// 						uni.navigateTo({
						// 							url: '/pages/index/RegistrationDetails'
						// 						})
						// 					}, 1000)

						// 				}
						// 				console.log(res, 'res')
						// 			}).catch(err => {})

						// 		} else if (res.cancel) {
						// 			console.log('用户点击取消');
						// 		}
						// 	}
						// });
					}
				} else {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
				}

			}
		}
	}
</script>

<style>
	.content {
		background-color: #F7F8FA;
		min-height: 100vh;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.innerContent {
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.topImg {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.topImg image {
		width: 562rpx;
		height: 88rpx;
	}

	.topDesc {
		font-size: 26rpx;
		font-weight: 400;
		text-align: center;
		color: #969799;
		margin-bottom: 32rpx;
	}

	.selectBox {
		padding-left: 20rpx;
		padding-bottom: 80rpx;
		box-sizing: border-box;
	}

	.itemBox {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		justify-content: center;

	}

	.itemText {
		color: #323233;
		font-size: 28rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		width: 170rpx;
		justify-content: flex-end;
	}

	input {
		width: 400rpx;
		height: 68rpx;
		border-radius: 10rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		line-height: 68rpx;
		border: 2rpx solid #cfd0d2;
		font-size: 28rpx !important;
	}

	.pickerBox {
		width: 400rpx;
		height: 68rpx;
		border-radius: 10rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		line-height: 68rpx;
		border: 2rpx solid #cfd0d2;
		font-size: 28rpx !important;
	}

	.radioBox {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.radioBox image {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
	}

	.BtnBox {
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.Btn {
		width: 686rpx;
		height: 96rpx;
		background: #f7ad32;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
	}

	.picker {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>