<template>
	<common-page title="注册新账号">
		<el-steps :active="stepActive" simple finish-status="success">
		    <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-width="120">
			<el-form-item label="邮箱" prop="email">
				<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
				<div class="el-form-item-msg">邮箱将作为登录时的唯一凭证</div>
			</el-form-item>
			<el-form-item label="验证码" prop="code">
				<el-input v-model="form.code" placeholder="请输入验证码">
					<template #append>
						<el-button :disabled="codeDisabled" @click="sendCode">{{ codeBtnText }}</el-button>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="昵称" prop="nickname">
				<el-input v-model="form.nickname" 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>
				<sc-password-strength v-model="form.password"></sc-password-strength>
				<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
			</el-form-item>
			<el-form-item label="确认密码" prop="password2">
				<el-input v-model="form.password2" type="password" show-password placeholder="请再次输入密码"></el-input>
			</el-form-item>
		</el-form>
		<el-form v-if="stepActive==1" ref="stepForm_1" :model="form" :rules="rules" :label-width="120">
			<el-form-item label="企业名称" prop="enterpriseName">
				<el-input v-model="form.enterpriseName" placeholder="请输入企业名称"></el-input>
			</el-form-item>
			<el-form-item label="统一社会信用代码" prop="creditCode">
				<el-input v-model="form.creditCode" placeholder="请输入统一社会信用代码"></el-input>
				<div class="el-form-item-msg">请输入18位统一社会信用代码</div>
			</el-form-item>
			<el-form-item label="" prop="agree">
				<el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox><span class="link" @click="showAgree=true">《平台服务协议》</span>
			</el-form-item>
		</el-form>
		<div v-if="stepActive==2">
			<el-result icon="success" title="注册成功" sub-title="可以使用用户名登录系统">
				<template #extra>
					<el-button type="primary" @click="goLogin">前去登录</el-button>
				</template>
			</el-result>
		</div>
		<el-form style="text-align: center;">
			<el-button v-if="stepActive>0 && stepActive<2" @click="pre">上一步</el-button>
			<el-button v-if="stepActive<1" type="primary" @click="next">下一步</el-button>
			<el-button v-if="stepActive==1" type="primary" @click="save">提交</el-button>
		</el-form>
		<el-dialog v-model="showAgree" title="平台服务协议" :width="800" destroy-on-close>
			平台服务协议
			<template #footer>
				<el-button @click="showAgree=false">取消</el-button>
				<el-button type="primary" @click="showAgree=false;form.agree=true;">我已阅读并同意</el-button>
			</template>
		</el-dialog>
	</common-page>
</template>

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

	export default {
		components: {
			commonPage,
			scPasswordStrength
		},
		data() {
			return {
				stepActive: 0,
				showAgree: false,
				codeDisabled: false,
				codeBtnText: '发送验证码',
				countdown: 60,
				timer: null,
				form: {
					email: "",
					code: "",
					nickname: "",
					password: "",
					password2: "",
					enterpriseName: "",
					creditCode: "",
					agree: false
				},
				rules: {
					email: [
						{ required: true, message: '请输入邮箱'},
						{ type: 'email', message: '请输入正确的邮箱格式'}
					],
					code: [
						{ required: true, message: '请输入验证码'}
					],
					nickname: [
						{ required: true, message: '请输入昵称'}
					],
					password: [
						{ required: true, message: '请输入密码'},
						{ min: 8, message: '密码长度不能少于8位', trigger: 'blur'},
						{ 
							validator: (rule, value, callback) => {
								// 验证密码必须包含字母、数字和特殊字符
								const hasLetter = /[a-zA-Z]/.test(value);
								const hasNumber = /\d/.test(value);
								const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\|,.<>\/?]/.test(value);

								if (!hasLetter || !hasNumber || !hasSpecial) {
									callback(new Error('密码必须包含字母、数字和特殊字符'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					],
					password2: [
						{ required: true, message: '请再次输入密码'},
						{validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error('两次输入密码不一致'));
							}else{
								callback();
							}
						}}
					],
					enterpriseName: [
						{ required: true, message: '请输入企业名称'}
					],
					creditCode: [
						{ required: true, message: '请输入统一社会信用代码'},
						{ pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/, message: '请输入正确的18位统一社会信用代码'}
					],
					agree: [
						{validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('请阅读并同意协议'));
							}else{
								callback();
							}
						}}
					]
				}
			}
		},
		mounted() {

		},
		methods: {
			pre(){
				this.stepActive -= 1
			},
			async sendCode(){
				// 验证邮箱格式
				const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				if (!emailReg.test(this.form.email)) {
					this.$message.error('请输入正确的邮箱格式');
					return;
				}

				try {
					await this.$API.auth.email_code.req({ email: this.form.email });
					this.$message.success('验证码已发送，请查收');

					// 开始倒计时
					this.codeDisabled = true;
					this.countdown = 60;
					this.timer = setInterval(() => {
						this.countdown--;
						this.codeBtnText = `${this.countdown}秒后重试`;
						if (this.countdown <= 0) {
							clearInterval(this.timer);
							this.codeDisabled = false;
							this.codeBtnText = '发送验证码';
						}
					}, 1000);
				} catch (error) {
					this.$message.error(error.message || '验证码发送失败');
				}
			},
			next(){
				const formName = `stepForm_${this.stepActive}`
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.stepActive += 1
					}else{
						return false
					}
				})
			},
			async save(){
				const formName = `stepForm_${this.stepActive}`
				const valid = await this.$refs[formName].validate().catch(() => {});
				if (!valid) {
					return false;
				}
				try {
					const data = {
						email: this.form.email,
						code: this.form.code,
						nickname: this.form.nickname,
						password: this.form.password,
						enterprise_name: this.form.enterpriseName,
						credit_code: this.form.creditCode
					};
					await this.$API.auth.register.req(data);
					this.stepActive += 1;
				} catch (error) {
					this.$message.error(error.message || '注册失败，请重试');
				}
			},
			goLogin(){
				this.$router.push({
					path: '/login'
				})
			}
		}
	}
</script>

<style scoped>


</style>
