<template>
	<a-page-header  title="已有账号,去登录" :avatar="{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }">
		<a-tabs v-model:activeKey="activeKey">
			<a-tab-pane key="1" tab="个人注册" force-render>
				<a-form :model="personalForm" :label-col="{span: 2}" labelAlign="right">
					<a-row gutter="20">
						<a-col span="24">
							<a-form-item required label="手机号" name="mobile">
								<a-input v-model:value="personalForm.mobile" placeholder="请输入账号" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="密码" name="password">
								<a-input-password v-model:value="personalForm.password" placeholder="请输入密码" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="验证码" name="captcha">
								<a-input v-model:value="personalForm.captcha" placeholder="请输入图形验证码"/>
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item label="图形验证码">
								<a-image width="200px" height="100px" :src="codeImage"></a-image>
								
								<a-button type="primary" @click="getCaptcha">换一个</a-button>
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item label="操作">
								<a-button type="primary" @click="onPersonalRegister">注册</a-button>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</a-tab-pane>
			<a-tab-pane key="2" tab="企业注册" force-render>
				<a-form :model="companyForm" :label-col="{span: 2}" labelAlign="right">
					<a-row gutter="20">
						<a-col span="24">
							<a-form-item required label="联系手机" name="contact_mobile">
								<a-input v-model:value="companyForm.contact_mobile" placeholder="请输入联系号码" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="密码" name="password">
								<a-input-password v-model:value="companyForm.password" placeholder="请输入密码" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="确认密码" name="comform_password">
								<a-input-password v-model:value="companyForm.comform_password" placeholder="请输入确认密码" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="邮箱" name="email">
								<a-input v-model:value="companyForm.email" placeholder="请输入邮箱" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="企业名称" name="full_name">
								<a-input v-model:value="companyForm.full_name" placeholder="请输入企业名称" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="联系人" name="contact_name">
								<a-input v-model:value="companyForm.contact_name" placeholder="请输入联系人" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="企业联系固话" name="contact_phone">
								<a-input v-model:value="companyForm.contact_phone" placeholder="请输入联系固话" />
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="验证码" name="captcha">
								<a-input v-model:value="companyForm.captcha" placeholder="请输入图形验证码"/>
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item label="图形验证码">
								<a-image width="200px" height="100px" :src="codeImage"></a-image>
								<a-button type="primary" @click="getCaptcha">换一个</a-button>
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item label="操作">
								<a-button type="primary" @click="onCompanyRegister">注册</a-button>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form></a-tab-pane>
		</a-tabs>
	</a-page-header>

</template>

<script setup lang="ts">
	import { ref, onMounted, watch, computed } from 'vue';
	import { GetCaptcha, PostJobseekerRegister, PostCompanyRegister } from '@/apis/models';
	import { store } from '@/store/index';
	import { warnToast, successToast } from '@/utils/toastHelper';

	let codeImage = ref<String>('')

	onMounted(() => {
		getCaptcha()
	})

	let cpt_id = ref<String>('')
	const getCaptcha = () => {
		companyForm.value.captcha = '';
		personalForm.value.captcha = '';
		GetCaptcha().then(res => {
			cpt_id.value = res.data.cpt_id;
			codeImage.value = res.data.img;
		})
	}

	// 个人注册
	let personalForm = ref<Object>({
		mobile: "",
		password: "",
		cpt_id: "",
		captcha: ""
	})
	const onPersonalRegister = () => {
		personalForm.value.cpt_id = cpt_id.value;
		if (personalForm.value.mobile && personalForm.value.password && personalForm.value.captcha) {
			PostJobseekerRegister(personalForm.value).then(res => {
				successToast('注册成功,可以进行登录');
				store.commit('getIntoRegister', {
					intoRegister: false
				})
			}).catch(err => {
				getCaptcha()
			})
		} else {
			warnToast('请补充完整信息');
		}
	}

	// 企业注册
	let companyForm = ref<Object>({
		password: "",
		comform_password: "",
		email: "",
		full_name: "",
		contact_name: "",
		contact_phone: "",
		contact_mobile: "",
		cpt_id: "",
		captcha: ""
	})
	const onCompanyRegister = () => {
		companyForm.value.cpt_id = cpt_id.value;
		if (companyForm.value.password != companyForm.value.comform_password) {
			warnToast('两次密码不一致');
		}
		PostCompanyRegister(companyForm.value).then(res => {
			successToast('注册成功,可以进行登录');
			store.commit('getIntoRegister', {
				intoRegister: false
			})
		}).catch(err => {
			getCaptcha()
		})
	}
</script>

<style>
</style>