<template>
	<view>
		
		<scroll-view scroll-x class="bg-white nav solid-bottom">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="forminfo.wtype==1?'text-blue cur':''" @tap="tabSelect" data-wtype="1">个人雇主注册</view>
				<view class="cu-item flex-sub" :class="forminfo.wtype==2?'text-blue cur':''" @tap="tabSelect" data-wtype="2">企业雇主注册</view>
			</view>
		</scroll-view>

		<form>
			<!-- <view class="cu-form-group margin-top-xs">
				<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 微店图标</view>
				<view class="cu-avatar radius bg-gray">
					<avatar selWidth="640upx" selHeight="640upx" @upload="setTilpic" :avatarSrc="forminfo.tilpic" noTab="true" avatarStyle="width: 75upx; height: 75upx; border-radius: 5%;"></avatar>
				</view>
			</view> -->
			
			<view class="cu-form-group margin-top-sm">
				<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 姓名</view>
				<input placeholder="请输入..." data-field="realname" name="realname" :value="forminfo.realname" @input="setInput"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 手机号</view>
				<input placeholder="请输入..." data-field="mobile" name="mobile" :value="forminfo.mobile" @input="setInput"></input>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title"> 微信号</view>
				<input placeholder="请输入..." data-field="weixin" name="weixin" :value="forminfo.weixin" @input="setInput"></input>
			</view> -->

			<!-- <view class="cu-form-group margin-top-sm">
				<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 公司名称</view>
				<input placeholder="请输入..." data-field="title" name="title" :value="forminfo.title" @input="setInput"></input>
			</view> -->
			<!-- <view class="cu-form-group">
				<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 微店名称</view>
				<input placeholder="请输入..." data-field="ftitle" name="ftitle" :value="forminfo.ftitle" @input="setInput"></input>
			</view> -->
			<view class="cu-form-group">
				<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 用工地点</view>
				<view style="text-align: right; flex: 1; font-size: 30rpx;">
					<pickerAddress @change="regionChange">{{forminfo.region}}</pickerAddress>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 详细地址</view>
				<input placeholder="请输入..." data-field="address" name="address" :value="forminfo.address" @input="setInput"></input>
			</view>	
			<block v-if="forminfo.wtype==1">
				<view class="cu-form-group">
					<view class="grid col-2 grid-square flex-sub">
						<view class="bg-img solids" style="margin-bottom: 0rpx !important;" data-fieldimage="idcardzpic" @tap="chooseImage">
							<text v-if="forminfo.idcardzpic==''" class='cuIcon-cameraadd'></text>
							<image v-else :src="forminfo.idcardzpic" mode="aspectFill"></image>
						</view> 
						<view class="bg-img solids" style="margin-bottom: 0rpx !important;" data-fieldimage="idcardfpic" @tap="chooseImage">
							<text v-if="forminfo.idcardfpic==''" class='cuIcon-cameraadd'></text>
							<image v-else :src="forminfo.idcardfpic" mode="aspectFill"></image>
						</view> 
					</view>
				</view>
				<view class="cu-form-group" style="border-top: 0rpx; text-align: center;">
					<view class="grid col-2 flex-sub">
						<view>身份证正面</view>
						<view>身份证反面</view>
					</view>
				</view>
				<view class="cu-form-group align-start">
					<view class="title">备注介绍</view>
					<textarea maxlength="-1" placeholder="请输入..." data-field="details" name="details" :value="forminfo.details" @input="setInput"></textarea>
				</view>	
			</block>
			<!-- <view class="cu-form-group align-start">
				<view class="title">公司介绍</view>
				<textarea maxlength="-1" placeholder="请输入..." data-field="details" name="details" :value="forminfo.details" @input="setInput"></textarea>
			</view> -->

			<block v-if="forminfo.wtype==2">
				<view class="cu-form-group margin-top-sm">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 公司名称</view>
					<input placeholder="请输入..." data-field="title" name="title" :value="forminfo.title" @input="setInput"></input>
				</view>	
				<view class="cu-form-group align-start">
					<view class="title">公司介绍</view>
					<textarea maxlength="-1" placeholder="请输入..." data-field="details" name="details" :value="forminfo.details" @input="setInput"></textarea>
				</view>	
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						 <text class="text-red text-bold padding-right-xs">*</text> 
						相关资质
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-3 grid-square flex-sub">
						<view class="bg-img solids" style="margin-bottom: 0rpx !important;" data-fieldimage="picone" @tap="chooseImage">
							<text v-if="forminfo.picone==''" class='cuIcon-cameraadd'></text>
							<image v-else :src="forminfo.picone" mode="aspectFill"></image>
						</view> 
						<!-- <view class="bg-img solids" style="margin-bottom: 0rpx !important;" data-fieldimage="pictwo" v-if="forminfo.wtype==2" @tap="chooseImage">
							<text v-if="forminfo.pictwo==''" class='cuIcon-cameraadd'></text>
							<image v-else :src="forminfo.pictwo" mode="aspectFill"></image>
						</view> 
						<view class="bg-img solids" style="margin-bottom: 0rpx !important;" data-fieldimage="picthr" v-if="forminfo.wtype==2" @tap="chooseImage">
							<text v-if="forminfo.picthr==''" class='cuIcon-cameraadd'></text>
							<image v-else :src="forminfo.picthr" mode="aspectFill"></image>
						</view> -->
					</view>
				</view>
				<view class="cu-form-group" style="border-top: 0rpx; text-align: center;">
					<view class="grid col-3 flex-sub">
						<view>营业执照</view>
						<!-- <view v-if="forminfo.wtype==2">派遣许可证</view>
						<view v-if="forminfo.wtype==2">人力资源许可证</view> -->
					</view>
				</view>
			</block>

			<view class="padding flex flex-direction">
				<button class="cu-btn bg-green margin-tb-sm lg" @tap="regWorker">立即提交</button>
			</view>
			<view class="padding"></view>
		</form>

	</view>
</template>

<script>
	var _this;
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import pickerAddress from "@/components/pickerAddress/pickerAddress.vue";
	export default {
		components: {
			avatar,
			pickerAddress
		},
		data() {
			return {
				isRotate: false,
				userinfo: {},
				forminfo: {
					wtype: 1,
					title: "",
					ftitle: "",
					tilpic: "",

					realname: "",
					mobile: "",
					weixin: "",

					province: "",
					city: "",
					district: "",
					region: "请选择...",
					address: "",
					picone: "",
					pictwo: "",
					picthr: "",
					details: "",
					idcardzpic: "",
					idcardfpic: "",
				}
			}
		},
		onLoad: function(option) {
			_this = this;
			_this.userinfo = _this.checkLogin("/pages/my/my");
			if (_this.userinfo === false) {
				return false;
			}
			_this.forminfo.wtype =option.wtype;
			_this.forminfo.realname = _this.userinfo.realname;
			_this.forminfo.mobile = _this.userinfo.mobile;
		},
		methods: {
			// 填写字段
			tabSelect: function(e) {
				_this.forminfo.wtype = e.currentTarget.dataset.wtype;
			},

			// 图片上传
			chooseImage: function(e) {
				var fieldimage = e.currentTarget.dataset.fieldimage;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						_this.$req.ajaxFile({
							path: "attachment/tplfieldimage",
							title: '正在上传',
							filePath: res.tempFilePaths[0],
							fileName: 'file',
						}).then((filedata) => {
							var data = JSON.parse(filedata.data);
							_this.forminfo[fieldimage] = data.data.src;
						}).catch((err) => {
							uni.showModal({
								title: '信息提示',
								content: err,
								showCancel: false
							});
						});
					}
				});
			},
			
			setTilpic: function(rsp) {
				_this.$req.ajaxFile({
					path: "attachment/tplfieldimage",
					title: '正在上传',
					filePath: rsp.path,
					fileName: 'file',
				}).then((filedata) => {
					var data = JSON.parse(filedata.data);
					_this.forminfo.tilpic = data.data.src;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			setInput: function(e) {
				var field = e.currentTarget.dataset.field;
				_this.forminfo[field] = e.detail.value;
			},
			regionChange: function(data) {
				_this.forminfo.province = data.data[0];
				_this.forminfo.city = data.data[1];
				_this.forminfo.district = data.data[2];
				_this.forminfo.region = data.data.join(' ');
			},
			
			// 提交注册
			regWorker: function() {
				_this.userinfo = _this.checkLogin("/pages/my/my");
				if (_this.userinfo === false) {
					return false;
				}
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "wlogin/regworker",
					title: "正在提交注册",
					data: {
						userid: _this.userinfo.id,
						wtype: _this.forminfo.wtype,
						title: _this.forminfo.title,
						ftitle: _this.forminfo.ftitle,
						tilpic: _this.forminfo.tilpic,
						realname: _this.forminfo.realname,
						mobile: _this.forminfo.mobile,
						weixin: _this.forminfo.weixin,
						province: _this.forminfo.province,
						city: _this.forminfo.city,
						district: _this.forminfo.district,
						address: _this.forminfo.address,
						picone: _this.forminfo.picone,
						pictwo: _this.forminfo.pictwo,
						picthr: _this.forminfo.picthr,
						idcardzpic: _this.forminfo.idcardzpic,
						idcardfpic: _this.forminfo.idcardfpic,
						details: _this.forminfo.details
					}
				}).then((data) => {
					uni.showModal({
						title: '信息提示',
						content: '您的公司已注册成功，请耐心等待管理员的审核！',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: "/pages/index/home"
								});
							}
						}
					});
					// uni.setStorageSync('identityinfo', false);
					// uni.setStorageSync('workerinfo', data.worker);
					// uni.switchTab({
					// 	url: "/pages/index/home"
					// });
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(5em + 15px);
	}
	
	.cu-form-group input {
		text-align: right;
	}

	.fieldpic {
		width: 150rpx;
		height: 150rpx;
	}
	.fieldpictil {
		width: 230rpx;
		text-align: center;
	}
</style>
