<template>
	<div class="login-container">
		<el-row>
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="flex1">
				<div v-if="checked == 0" class="overcicle">
					<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"
						auto-complete="on" label-position="left">
						<div class="title-container">
							<p class="title">业务管理员注册</p>
						</div>
						<el-form-item prop="name">
							<span class="svg-container"> 姓名 </span>
							<el-input ref="name" v-model="loginForm.realName" placeholder="输入业务员真实姓名" name="name"
								type="text" tabindex="1" />
						</el-form-item>
						<el-form-item prop="username">
							<span class="svg-container"> 账户 </span>
							<el-input ref="username" v-model="loginForm.account" placeholder="输入账户名称" name="username"
								type="text" tabindex="2" />
						</el-form-item>
						<el-form-item prop="username">
							<span class="svg-container"> 密码 </span>
							<el-input ref="password" v-model="loginForm.password" placeholder="至少6位数的字母数字组合"
								name="password" :type="passwordType" tabindex="3" />
						</el-form-item>
						<el-form-item prop="password">
							<span class="svg-container"> 确认密码 </span>
							<el-input :key="passwordType" ref="password" v-model="loginForm.surepsd"
								:type="passwordType" placeholder="至少6位数的字母数字组合" name="password" tabindex="4"
								auto-complete="on" @keyup.enter.native="handleLogin" />
							<!-- <span class="show-pwd" @click="showPwd">
                    <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                  </span> -->
						</el-form-item>
						<el-form-item prop="mobile">
							<span class="svg-container"> 联系电话 </span>
							<el-input ref="mobile" v-model="loginForm.mobile" type="text" placeholder="请输入业务员联系电话"
								name="mobile" tabindex="5" auto-complete="on" @keyup.enter.native="handleLogin" />
						</el-form-item>

						<el-button :loading="loading" type="primary" class="loginbtn"
							@click.native.prevent="handleLogin(loginForm)">注册账号
						</el-button>
						<div class="registerbtn flex3">
							<div class="forgect">
								<p class="asp">已有账号？</p>
							</div>
							<div class="forgect" @click="backLogin()">
								<p class="nes">马上登录</p>
							</div>
						</div>
					</el-form>
				</div>
				<div v-if="checked == 1 && showNext" class="overcicle">
					<div class="title-container">
						<p class="title">供货商注册</p>
					</div>
					<el-form ref="providerForm" :model="providerForm" :rules="loginRules" class="login-form"
						auto-complete="on" label-position="left">
						<el-form-item prop="username">
							<span class="svg-container"> 账户 </span>
							<el-input ref="username" v-model="providerForm.username" placeholder="输入账户名称"
								name="username" type="text" tabindex="2" />
						</el-form-item>
						<el-form-item prop="username">
							<span class="svg-container"> 密码 </span>
							<el-input ref="password" v-model="providerForm.password" placeholder="至少6位数的字母数字组合"
								name="password" type="passwordType" tabindex="3" />
						</el-form-item>
						<el-form-item prop="password">
							<span class="svg-container"> 确认密码 </span>
							<el-input :key="passwordType" ref="password" v-model="providerForm.surepsd"
								:type="passwordType" placeholder="至少6位数的字母数字组合" name="password" tabindex="4"
								auto-complete="on" @keyup.enter.native="handleLogin" />
							<!-- <span class="show-pwd" @click="showPwd">
                    <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                  </span> -->
						</el-form-item>
						<el-form-item prop="mobile">
							<span class="svg-container"> 联系电话 </span>
							<el-input ref="mobile" v-model="providerForm.mobile" type="text" placeholder="请输入业务员联系电话"
								name="mobile" tabindex="5" auto-complete="on" @keyup.enter.native="handleLogin" />
						</el-form-item>

						<el-button :loading="loading" type="primary" class="loginbtn"
							@click.native.prevent="handleLogin">注册账号
						</el-button>
						<div class="registerbtn flex3">
							<div class="forgect">
								<p class="asp">已有账号？</p>
							</div>
							<div class="forgect" @click="backLogin()">
								<p class="nes">马上登录</p>
							</div>
						</div>
					</el-form>
				</div>
				<div v-if="checked == 1 && !showNext" style="margin-top: 670px" class="overcicle">
					<el-form ref="providerForm" :model="providerForm" :rules="loginRules" class="login-form"
						auto-complete="on" label-position="left">
						<div class="title-container">
							<p class="title">供货商注册</p>
						</div>
						<el-form-item prop="name">
							<span class="svg-container"> 供货商 </span>
							<el-input ref="name" v-model="providerForm.name" placeholder="输入供货商名称" name="name"
								type="text" tabindex="1" />
						</el-form-item>
						<el-form-item prop="username">
							<span class="svg-container"> 账户 </span>
							<el-input ref="username" v-model="providerForm.account" placeholder="输入账户名称" name="username"
								type="text" tabindex="2" />
						</el-form-item>
						<el-form-item prop="username">
							<span class="svg-container"> 联系人 </span>
							<el-input ref="password" v-model="providerForm.contacts" placeholder="输入联系人的真实姓名"
								name="password" type="passwordType" tabindex="3" />
						</el-form-item>
						<el-form-item prop="username">
							<span class="svg-container"> 统一社会信用代码 </span>
							<el-input ref="username" v-model="providerForm.socialCode" placeholder="输入统一社会信用代码"
								name="username" type="text" tabindex="2" />
						</el-form-item>
						<el-form-item prop="username">
							<span class="svg-container"> 法人姓名 </span>
							<el-input ref="password" v-model="providerForm.legalPerson" placeholder="输入法人的真实姓名"
								name="password" type="passwordType" tabindex="3" />
						</el-form-item>
						<el-form-item prop="password">
							<span class="svg-container"> 密码 </span>
							<el-input :key="passwordType" ref="password" v-model="providerForm.password"
								:type="passwordType" placeholder="至少6位数的字母数字组合" name="password" tabindex="4"
								auto-complete="on" @keyup.enter.native="handleLogin" />
							<!-- <span class="show-pwd" @click="showPwd">
                    <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                  </span> -->
						</el-form-item>
						<el-form-item prop="mobile" style="margin-bottom: 0">
							<span class="svg-container"> 联系电话 </span>
							<el-input ref="mobile" v-model="providerForm.contactsMobile" type="text"
								placeholder="请输入业务员联系电话" name="mobile" tabindex="5" />
						</el-form-item>
						<div class="choosepic">
							<el-form-item style="background-color: transparent; margin: 0; padding: 0">
								<span class="svg-container" style="
                    background-color: transparent;
                    margin: 0;
                    padding: 0;
                    margin-top: 5px;
                  ">
									认证照片
								</span>
								<div class="boximg">
									<el-upload action="https://ht.9026.com/api/File" list-type="picture-card"
										:auto-upload="false" :on-change="handleAvatarSuccess"
										:file-list="providerForm.identifyPics">
										<i slot="default" class="el-icon-plus" />
										<div slot="file" slot-scope="{ file }">
											<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">

										</div>
									</el-upload>
									<el-dialog :visible.sync="dialogVisible">
										<img width="" :src="providerForm.identifyPics" alt="">
									</el-dialog>
								</div>
								<p class="usa">*注意上传法人手持身份证半身照</p>
							</el-form-item>
						</div>
						<div class="choosepic">
							<el-form-item style="background-color: transparent; margin: 0; padding: 0">
								<span class="svg-container"
									style="background-color: transparent; margin: 0; padding: 0">
									授权委托书
								</span>
								<div class="boximg">
									<!-- <el-upload
                    class="upload-demo"
                    drag
                    :multiple="false"
                    :show-file-list="false"
                    action="https://ht.9026.com/api/File"
                    :auto-upload="true"
                    :on-success="handleSuccess"
                    list-type="picture"
					:file-list="providerForm.proxyFile"
                    style="margin-top: 15px"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <el-image
                      v-if="!imageUrl"
                      style="width: 280px; height: 175px; margin-top: 5px"
                      :src="upweituo"
                      :fit="fit"
                    />
                  </el-upload> -->
									<el-upload action="https://ht.9026.com/api/File" list-type="picture-card"
										:auto-upload="false" :on-change="handleSuccess"
										:file-list="providerForm.proxyFile">
										<i slot="default" class="el-icon-plus" />
										<div slot="file" slot-scope="{ file }">
											<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">

										</div>
									</el-upload>
									<el-dialog :visible.sync="dialogVisible">
										<img width="" :src="providerForm.proxyFile" alt="">
									</el-dialog>
								</div>
								<p class="usa">*注意上传法人签署的授权委托书</p>
							</el-form-item>
						</div>
						<!-- <el-button :loading="loading" type="primary" class="loginbtn" @click.native.prevent="nextStep">下一步
            </el-button> -->
						<el-button :loading="loading" type="primary" class="loginbtn"
							@click.native.prevent="handleLogin(providerForm)">注册账号
						</el-button>
						<div class="registerbtn flex3">
							<div class="forgect">
								<p class="asp">已有账号？</p>
							</div>
							<div class="forgect" @click="backLogin()">
								<p class="nes">马上登录</p>
							</div>
						</div>
					</el-form>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	let that
	import {
		validUsername
	} from '@/utils/validate'
	import logo from '/src/assets/img/logo.png'
	import upself from '/src/assets/img/upuer.png'
	import upweituo from '/src/assets/img/upattor.png'
	import request from '@/utils/request'
	export default {
		name: 'Login',
		data() {
			const validatename = (rule, value, callback) => {
				if (value.length == 0) {
					callback(new Error('请输入业务员真实姓名'))
				} else {
					callback()
				}
			}
			const validateUsername = (rule, value, callback) => {
				if (!validUsername(value)) {
					callback(new Error('请输入账户名称'))
				} else {
					callback()
				}
			}

			const validatePassword = (rule, value, callback) => {
				if (value.length < 6) {
					callback(new Error('请输入大于6位数密码'))
				} else {
					callback()
				}
			}
			const validatemobile = (rule, value, callback) => {
				if (value.length == 0) {
					callback(new Error('请输入电话号码'))
				} else {
					callback()
				}
			}
			return {
				dialogVisible: false,
				disabled: false,
				upself: upself,
				upweituo: upweituo,
				fit: 'cover',
				imageUrl: '',
				loginForm: {
					realName: '',
					account: '',
					password: '',
					surepsd: '',
					mobile: ''
				},
				providerForm: {
					account: '',
					password: '',
					name: '',
					socialCode: '',
					legalPerson: '',
					contacts: '',
					contactsMobile: '',
					identifyPics: [],
					proxyFile: [],
				},
				loginRules: {
					realName: [{
						required: true,
						trigger: 'blur',
						validator: validatename
					}],
					account: [{
						required: true,
						trigger: 'blur',
						validator: validateUsername
					}],
					password: [{
						required: true,
						trigger: 'blur',
						validator: validatePassword
					}],
					mobile: [{
						required: true,
						trigger: 'blur',
						validator: validatemobile
					}]
				},
				loading: false,
				passwordType: 'password',
				redirect: undefined,
				src: logo,
				checked: 0,
				showNext: false
			}
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect
				},
				immediate: true
			}
		},
		mounted() {
			that = this
			this.checked = this.$route.query.checked
		},
		methods: {
			nextStep() {
				this.showNext = true
			},
			handleAvatarSuccess(file, fileList) {
				console.log(file,"identifyPics")
				this.providerForm.identifyPics = fileList
				console.log(this.providerForm.identifyPics)
			},
			handleSuccess(file, fileList) {
				this.providerForm.proxyFile = fileList
				console.log(this.providerForm.proxyFile)
			},
			handlePictureCardPreview(file) {
				console.log(file, 88)
				this.imageUrl = file.url
			},
			showPwd() {
				if (this.passwordType === 'password') {
					this.passwordType = ''
				} else {
					this.passwordType = 'password'
				}
				this.$nextTick(() => {
					this.$refs.password.focus()
				})
			},
			backLogin() {
				this.$router.replace({
					path: '/login',
					query: {}
				})
			},
			handleLogin(form) {
				if (form == this.loginForm) {
					request({
						url: '/api/Account/register',
						method: 'post',
						data: form
					}).then((res) => {
						this.$message('注册成功')
						this.$router.push({
							path: '/login'
						})
					})
				} else {
					this.$request({
						url: '/api/Supplier/register',
						method: 'post',
						data: form
					}).then((res) => {
						this.$message('注册成功')
						this.$router.push({
							path: '/login',
							query: {
								checked: this.checked
							}
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	$bg: #f6f6f6;
	$light_gray: #bebdbb;
	$cursor: #bebdbb;

	@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
		.login-container .el-input input {
			color: $cursor;
		}
	}

	/* reset element-ui css */
	.login-container {
		overflow: auto;
		background: url("../../assets/img/registerbg.png") no-repeat;
		background-size: 100%;

		.el-input {
			display: inline-block;
			height: 47px;
			width: 70%;
			background-color: #f6f6f6;

			input {
				background: #f6f6f6;
				border: 0px;
				-webkit-appearance: none;
				border-radius: 0px;
				padding: 12px 5px 12px 15px;
				color: $light_gray;
				height: 47px;
				caret-color: $cursor;

				&:-webkit-autofill {
					box-shadow: 0 0 0px 1000px $bg inset !important;
					-webkit-text-fill-color: $cursor !important;
				}
			}
		}

		.el-form-item {
			border: 1px solid rgba(255, 255, 255, 0.1);
			background: #f6f6f6;
			border-radius: 5px;
			color: #454545;
		}
	}
</style>

<style lang="scss" scoped>
	$bg: #2d3a4b;
	$dark_gray: #f6f6f6;
	$light_gray: #eee;

	.login-container {
		height: 100%;
		width: 100%;
		// background-color: $bg;
		// overflow: hidden;

		.login-form {
			position: relative;
			width: 470px;
			max-width: 100%;
			padding: 0 35px 0;
			margin: 0 auto;
			// overflow: hidden;
		}

		.tips {
			font-size: 14px;
			color: #fff;
			margin-bottom: 10px;

			span {
				&:first-of-type {
					margin-right: 16px;
				}
			}
		}

		.svg-container {
			padding: 6px 5px 6px 15px;
			color: #1f242a;
			vertical-align: middle;
			// width: 30px;
			display: inline-block;
		}

		.title-container {
			position: relative;

			.title {
				font-size: 48px;
				color: #1f242a;
				margin: 0px auto 40px auto;
				text-align: center;
				font-weight: bold;
			}
		}

		.show-pwd {
			position: absolute;
			right: 10px;
			top: 7px;
			font-size: 16px;
			color: $dark_gray;
			cursor: pointer;
			user-select: none;
		}
	}

	.el-row {
		height: 100%;
	}

	.el-col {
		height: 100%;
	}

	.business {
		width: 305px;
		height: 90px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		// background-color: #D8AB5A;
		border-raotherdius: 20rpx;
		color: #ffffff;
		margin-top: 57rpx;
	}

	.business {
		width: 305rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		// background-color: #D8AB5A;
		border-raotherdius: 20rpx;
		color: #ffffff;
		margin-top: 57rpx;
		// line-height: 110rpx;
	}

	.bnesper {
		background-size: 100%;
		background-image: url("../../assets/img/loginbtn4.png");
		background-repeat: no-repeat;
		padding-top: 10rpx;
		color: #fff1d8;

		.asp {
			padding-bottom: 5px;
		}
	}

	.applyper {
		background-image: url("../../assets/img/loginbt1.png");
		background-repeat: no-repeat;
		background-size: 100%;
		padding-top: 10rpx;
		color: #fff1d8;

		.asp {
			padding-bottom: 5px;
		}
	}

	.actapp {
		background-image: url("../../assets/img/loginbtn3.png");
		background-repeat: no-repeat;
		background-size: 100%;
		color: #d05c39;
		margin-bottom: 80rpx;

		.as {
			padding-bottom: 20px;
		}

		// line-height: 180rpx;
	}

	.actbnes {
		background-image: url("../../assets/img/loginbt2.png");
		background-repeat: no-repeat;
		background-size: 100%;
		color: #d05c39;

		.asp {
			padding-bottom: 20px;
		}
	}

	.loginbtn {
		width: 100%;
		margin-top: 30px;
		background: linear-gradient(to right, #ffe1ad, #d07539);
		border: none;
		height: 56px;
		border-radius: 10px;
		font-size: 18px;
	}

	.registerbtn {
		margin-top: 0px;
		margin-bottom: 30px;
		font-size: 16px;

		.forgect {
			cursor: pointer;
		}

		.nes {
			color: #d05c39;
		}
	}

	.boximg {
		width: 100%;
		height: 240px;
		border-radius: 10px;
		background-color: #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 290px;
			height: 150px;
		}
	}

	.choosepic {
		.el-form-item__content {}
	}

	.usa {
		color: #d05c39;
		text-align: center;
		padding: 0 !important;
		margin: 0;
	}

	.overcicle {
		border: 1px solid #ffe2ae;
		padding-top: 50px;
		box-sizing: border-box;
	}
</style>
