<template>
	<common-page title="注册">
		<el-alert v-if="stepActive<2" type="info" class="registerAlert" :closable="false">注册账户</el-alert>
<!--		<el-steps :active="stepActive" simple finish-status="success" process-status="finish">-->
<!--			<el-step title="填写信息" />-->
<!--			<el-step title="创建账户" />-->
<!--			<el-step title="注册完成" />-->
<!--		</el-steps>-->
<!--		<el-form v-if="stepActive==0" ref="stepForm_0" :model="form" :rules="rules" label-position="top">-->
<!--			<el-form-item label="公司名称" prop="company_name">-->
<!--				<el-input v-model="form.company_name" placeholder="请输入公司名称"></el-input>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="客户名称" prop="customer">-->
<!--				<el-input v-model="form.customer" placeholder="请输入客户名称"></el-input>-->
<!--			</el-form-item>-->
<!--		</el-form>-->
		<el-form v-if="stepActive<2" ref="stepForm_1" :model="form" :rules="rules" label-position="top">
			<el-form-item label="公司全称" prop="customer">
				<el-input v-model="form.customer" placeholder="请输入公司全称"></el-input>
			</el-form-item>
			<el-form-item label="电子邮箱" prop="email">
				<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
			</el-form-item>
<!--			<el-form-item label="登录账号" prop="login_name">-->
<!--				<el-input v-model="form.login_name" placeholder="请输入账号"></el-input>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="昵称" prop="name">-->
<!--				<el-input v-model="form.name" placeholder="请输入用户名"></el-input>-->
<!--			</el-form-item>-->
			<el-form-item label="手机号" prop="mobile">
				<el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="form.password" type="password" show-password placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item label="验证码" prop="verify_code">
				<el-row justify="space-between" style="width: 100%">
					<el-col :span="16">
						<el-input v-model="form.verify_code" placeholder="请输入验证码"></el-input>
					</el-col>
					<el-col :span="8" align="right">
						<el-button @click="getYzm" type="primary" :disabled="disabled">获取验证码 <span v-if="disabled"> ({{ time }})</span></el-button>
					</el-col>
				</el-row>
			</el-form-item>
		</el-form>
		<div v-if="stepActive==2">
			<el-result icon="success" title="账号注册成功" sub-title="">
				<template #extra>
					<p class="activation">请您查看并激活邮箱，即可登录</p>
				</template>
			</el-result>
		</div>
		<el-form style="text-align: center;">
			<div class="btnBox">
<!--				<el-button class="btn" v-if="stepActive>0 && stepActive<2" @click="pre" style="width: 100%;">上一步</el-button>-->
				<el-button class="btn" v-if="stepActive<2" type="primary" @click="next" style="width: 100%;">提交注册</el-button>
				<el-button class="btn" v-if="stepActive==2" type="primary" @click="goLogin" style="width: 100%;">完成</el-button>
			</div>
		</el-form>
	</common-page>
</template>

<script>
	import scPasswordStrength from '@/components/scPasswordStrength';
	import commonPage from './components/commonPage'

	export default {
		components: {
			commonPage,
			scPasswordStrength
		},
		data() {
			return {
				disabled:false,
				time:60,

				stepActive: 1,
				form: {
					email: "",
					mobile:"",
					password:"",
					verify_code:"",
					company_name:"",
					customer: "",
					login_name:"",
					name:"",
				},
				rules: {
					email: [
						{ required: true, message: '请输入邮箱地址'}
					],
					login_name:[
						{ required: false, message: '请输入登录账号'}
					],
					name:[
						{ required: false, message: '请输入用户名'}
					],
					mobile: [
						{ required: true, message: '请输入手机号'}
					],
					verify_code: [
						{ required: true, message: '请输入验证码'}
					],
					company_name: [
						{ required: true, message: '请输入公司名称'}
					],
					customer: [
						{ required: true, message: '请输入公司全称'}
					],
				}
			}
		},
		mounted() {

		},
		methods: {
			async getYzm() {
				const validate = await this.$refs.stepForm_1.validateField("mobile").catch(() => {});
				if (!validate) {
					return false
				}
				const res = await this.$API.user.verifyCode.post({mobile: this.form.mobile});
				if (res.code === 200) {
					this.$message.success('短信已发送至手机号码');
					this.disabled = true
					this.time = 60
					const t = setInterval(() => {
						this.time -= 1
						if (this.time < 1) {
							clearInterval(t)
							this.disabled = false
							this.time = 0
						}
					}, 1000);
				}
			},
			pre(){
				this.stepActive -= 1
			},
			async next() {
				const formName = `stepForm_${this.stepActive}`;
				if (this.stepActive == 1) {
					const res = await this.$API.user.register.post(this.form);
					if (res.code == 200) {
						this.$message.success('注册成功，请查看邮箱激活账户');
						this.nextPre(formName);
					}
				} else {
					this.nextPre(formName);
				}
			},
			nextPre(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.stepActive += 1
					}else{
						return false
					}
				})
			},
			save(){
				const formName = `stepForm_${this.stepActive}`
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.stepActive += 1
					}else{
						return false
					}
				})
			},
			goActivation(){
				this.$router.push({
					path: '/activate'
				})
			},
			goLogin(){
				this.$router.push({
					path: '/login'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.activation{
		color: var(--el-text-color-placeholder);
		cursor: pointer;
	}
	.btnBox{
		display: flex;align-items: center;
		.btn{
			flex: 1;
		}
	}

	.el-step.is-simple{
		::v-deep .el-step__arrow::after{
			height: 10px;
			width: 1px;
			transform: rotate(45deg) translateY(3px);
		}
		::v-deep .el-step__arrow::before{
			height: 10px;
			width: 1px;
			transform: rotate(-45deg) translateY(-3px);
		}
	}
	.registerAlert{
		::v-deep .el-alert__content{
			width: 100%;
			.el-alert__description{
				color: var(--el-color-primary);
				text-align: center;
			}
		}
	}
</style>
