<template>
	<div>
		<div v-if="type == 0">
			<el-form ref="registerForm" label-position="left" label-width="100px" :model="registerForm"
				:rules="registerRules">
				<el-form-item label="企业名称" prop="qyname">
					<el-input v-model="registerForm.qyname" type="text" auto-complete="off"
						placeholder="请输入正确的公司全称"></el-input>
				</el-form-item>
				<el-form-item label="用户名" prop="username">
					<el-input v-model="registerForm.username" auto-complete="off"
						placeholder="用户名长度3-20位,只能输入字母、数字、下划线,以字母开头"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="registerForm.password" type="password" auto-complete="off"
						placeholder="6-20位英文（区分大小写）、数字的组合"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="qrpassword">
					<el-input v-model="registerForm.qrpassword" type="password" auto-complete="off"
						placeholder="请再输入一遍上面的密码"></el-input>
				</el-form-item>
				<el-form-item label="负责人姓名" prop="name">
					<el-input v-model="registerForm.name" auto-complete="off" placeholder="请输入负责人姓名"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="photo">
					<el-input v-model="registerForm.photo" auto-complete="off" placeholder="请填写11位有效的手机号码"></el-input>
				</el-form-item>
				<el-form-item label="电子邮箱" prop="lxryx">
					<el-input v-model="registerForm.lxryx" auto-complete="off" placeholder="请填写有效的电子邮箱地址"></el-input>
				</el-form-item>
				<el-form-item label="邮政编码" prop="yzbm">
					<el-input v-model="registerForm.yzbm" auto-complete="off" placeholder="请输入邮政编码"></el-input>
				</el-form-item>
				<el-form-item label="营业执照" prop="yyzz">
					<el-upload class="avatar-uploader" :action="uploadUrl" limit="1"  list-type="picture-card" :on-success="handleAvatarSuccess" :on-remove="handleRemove" :class="registerForm.yyzz == null?'':'hide'">
						 <i class="el-icon-plus" ></i>
					</el-upload>
				</el-form-item>
				<el-form-item style="width:100%;">
					<el-button size="medium" type="primary" style="width:100%;" @click="next">
						下一步
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div v-else>
			<el-form ref="yjForm" label-position="left" label-width="100px" :model="yjForm"
				:rules="yjRules">
				<el-form-item label="收件人姓名" prop="yjSjr">
					<el-input v-model="yjForm.yjSjr"  placeholder="请输入收件人姓名" />
				</el-form-item>
				<el-form-item label="收件人手机" prop="yjSjphone">
					<el-input v-model="yjForm.yjSjphone"  placeholder="请输入收件人手机" />
				</el-form-item>
				<el-form-item label="邮寄地址" prop="yjAddress">
					<el-input v-model="yjForm.yjAddress"  type="textarea" placeholder="请输入内容" />
				</el-form-item>
				<el-form-item label="邮政编码" prop="yjCode">
					<el-input v-model="yjForm.yjCode"  placeholder="请输入邮政编码" />
				</el-form-item>
				<el-form-item style="width:100%;">
					<el-button size="medium" type="primary" style="width:100%;" @click="back">
						上一步
					</el-button>
				</el-form-item>
				<el-form-item style="width:100%;">
					<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click="handleRegister">
						注册
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		qiyeZc
	} from "@/api/login"

	export default {
		name: "baseInfo",
		data() {
			//用户名格式验证
			var userName = (rule, value, callback) => {
				const regex = /^[a-zA-Z][a-zA-Z0-9_]{2,19}$/;
				if (regex.test(value) == true) {
					callback();
				} else {
					callback(new Error('用户名长度3-20位,只能输入字母、数字、下划线,以字母开头'));
				}

			};
			//密码格式验证
			var passWord = (rule, value, callback) => {
				const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/
				if (regex.test(value) == true) {
					callback();
				} else {
					callback(new Error('6-20位英文（区分大小写）、数字的组合'));
				}
			}
			//两次密码是否一致验证
			const equalToPassword = (rule, value, callback) => {
				if (this.registerForm.password !== value) {
					callback(new Error("两次输入的密码不一致"));
				} else {
					callback();
				}
			};
			//手机号验证
			const phone = (rule, value, callback) => {
				const regex = /^1[3-9]\d{9}$/
				if (regex.test(value) == false) {
					callback(new Error("手机号码不正确"));
				} else {
					callback();
				}
			};
			//电子邮箱验证
			const email = (rule, value, callback) => {
				const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
				if (regex.test(value) == false) {
					callback(new Error("电子邮箱不正确"));
				} else {
					callback();
				}
			};
			return {
				loading:false,//按钮加载
				baseUrl: process.env.VUE_APP_BASE_API,
				uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",//上传路径
				type:0,
				//基本信息表单
				registerForm: {
					qyname: null, //企业名称
					username: null, //用户名
					password: null, //密码
					qrpassword: null, //确认密码
					name: null, //负责人姓名
					photo: null, //手机号码
					lxryx: null, //电子邮箱
					yzbm: null, //邮政编码
					yyzz: null, //营业执照
				},
				registerRules: {
					qyname: {
						required: true,
						message: '公司名称不能为空',
						trigger: ['blur', 'change']
					},
					username: [{
							required: true,
							message: '用户名不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: userName,
							trigger: ['blur', 'change']
						}
					],
					password: [{
							required: true,
							message: '密码不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: passWord,
							trigger: ['blur', 'change']
						}
					],
					qrpassword: [{
							required: true,
							message: '确认密码不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: equalToPassword,
							trigger: ['blur', 'change']
						}
					],
					name: {
						required: true,
						message: '负责人姓名不能为空',
						trigger: ['blur', 'change']
					},
					photo: [{
							required: true,
							message: '手机号码不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: phone,
							trigger: ['blur', 'change']
						}
					],
					lxryx: [{
							required: true,
							message: '电子邮箱不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: email,
							trigger: ['blur', 'change']
						}
					],
					yzbm: {
						required: true,
						message: '邮政编码不能为空',
						trigger: ['blur', 'change']
					},
					yyzz: {
						required: true,
						message: '请上传营业执照',
						trigger: ['blur', 'change']
					}
				},
				//邮寄信息表单
				yjForm:{
					yjSjr:null,
					yjSjphone:null,
					yjAddress:null,
					yjCode:null
				},
				yjRules:{
					yjSjr:{
						required: true,
						message: '收件人姓名不能为空',
						trigger: ['change']
					},
					yjSjphone:[{
							required: true,
							message: '收件人手机号码不能为空',
							trigger: [ 'change']
						},
						{
							validator: phone,
							trigger: [ 'change']
						}
					],
					yjAddress:{
						required: true,
						message: '邮寄地址不能为空',
						trigger: ['change']
					},
					yjCode:{
						required: true,
						message: '邮政编码不能为空',
						trigger: [ 'change']
					},
				}
			}
		},
		methods: {
			reset(){
				this.registerForm = {
					qyname: null, //企业名称
					username: null, //用户名
					password: null, //密码
					qrpassword: null, //确认密码
					name: null, //负责人姓名
					photo: null, //手机号码
					lxryx: null, //电子邮箱
					yzbm: null, //邮政编码
					yyzz: null, //营业执照
				}
				this.yjForm = {
					yjSjr:null,
					yjSjphone:null,
					yjAddress:null,
					yjCode:null
				}
				this.resetForm("registerForm")
				this.resetForm("yjForm")
			},
			handleRegister() {
				this.$refs.yjForm.validate(valid => {
					if (valid) {
						qiyeZc({...this.registerForm,...this.yjForm}).then(res=>{
							this.reset()
							this.$emit('submitSuccess', 2)
						})
					} else {

					}
				})
			},
			next(){
				this.$refs.registerForm.validate(valid => {
					if (valid) {
						// qiyeZc(this.registerForm).then(res=>{
						// 	this.reset()
						// 	this.$emit('submitSuccess', 1)
						// })
						this.type = 1
						this.$emit('submitSuccess', 1)
					} else {
				
					}
				})
			},
			back(){
				this.$refs.yjForm.clearValidate(['yjSjr','yjSjphone','yjAddress','yjCode'])
				this.type = 0
				this.$emit('submitSuccess', 0)
			},
			//上传成功
			handleAvatarSuccess(file){
				this.registerForm.yyzz = file.fileName
				this.$refs.registerForm.validateField('yyzz')
			},
			//移除成功
			handleRemove(file, fileList){
				this.registerForm.yyzz = null
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.avatar-uploader .el-upload {
		border: 1px splid #eee;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	::v-deep .hide .el-upload--picture-card {
		display: none;
	}
</style>