<template>
	<a-modal v-model:visible="openOtherModel_1" width="40%" centered @cancel="cancelModal" :footer="null">
		<a-flex align="center" justify="center">
			<!-- <a-flex vertical align="center" justify="space-between" :style="{ padding: '32px' }"> -->
			<a-flex justify="space-between" class="login-content">
				<a-flex vertical align="center" justify="space-around" :style="{ padding: '0 36px' }">
					<a-space direction="vertical" align="center" justify="space-between" :size="10">
						<div>
							小程序
						</div>
						<image-container :need="true"
							:imgObj="{src: '/images/xiaochengxu.jpg',width: '120px',height:'120px'}"></image-container>
					</a-space>
					<a-space direction="vertical" align="center" justify="space-between" :size="10">
						<div>
							公众号
						</div>
						<image-container :need="true"
							:imgObj="{src: '/images/gongzhonghao.png',width: '120px',height:'120px'}"></image-container>
					</a-space>
				</a-flex>
				<a-flex vertical align="center" :style="{ width: '480px' }">
					<a-row :gutter="[20, 20]" v-if="currentModule == 'login'">
						<a-col span="24">
							<a-segmented v-model:value="loginSegmentedValue" :options="['我要求职', '我要招聘']"
								@change="loginTypeChange" size="large" block>
							</a-segmented>
						</a-col>
						<a-col span="24">
							<a-input v-model:value="createForm.username" placeholder="手机号" size="large" />
						</a-col>
						<template v-if="loginMethod == 'password'">
							<a-col span="24">
								<a-input v-model:value="createForm.password" placeholder="密码" size="large" />
							</a-col>
							<a-col span="12">
								<a-input v-model:value="createForm.captcha" placeholder="验证码" size="large" />
							</a-col>
							<a-col span="12">
								<image-container :imgObj="{src: codeImage,width: '100%',height: '40px', mode: 'fill'}"
									@click="getCaptcha"></image-container>
							</a-col>
						</template>
						<template v-if="loginMethod == 'message'">
							<a-col span="12">
								<a-input v-model:value="smsForm.captcha" placeholder="验证码" size="large" />
							</a-col>
							<a-col span="12">
								<image-container :imgObj="{src: codeImage,width: '100%',height: '40px', mode: 'fill'}"
									@click="getCaptcha"></image-container>
							</a-col>
							<a-col span="18">
								<a-input v-model:value="smsLoginForm.sms_code" placeholder="短信验证码" size="large" />
							</a-col>
							<a-col span="6">
								<a-button type="primary" block size="large" @click="sendCode"
									:disabled="state.disabled">
									{{ state.codeTxt }}</a-button>
							</a-col>
						</template>
						<a-col span="24">
							<a-button type="primary" block @click="login" size="large">登录</a-button>
							<a-flex justify="flex-end" :style="{ 'padding-top': '10px' }">
								<div @click="toModule('register')" style="cursor: pointer;">
									没有账号？去注册
								</div>
							</a-flex>
						</a-col>
						<a-col span="24">
							<a-flex justify="center">
								<a-button v-if="loginMethod == 'password'" type="link"
									@click="changeLoginMethod('message')">短信验证码登录</a-button>
								<a-button v-if="loginMethod == 'message'" type="link"
									@click="changeLoginMethod('password')">密码登录</a-button>
							</a-flex>
						</a-col>
					</a-row>
					<a-row :gutter="[20, 20]" v-if="currentModule == 'register'">
						<a-col span="24">
							<a-segmented v-model:value="registerSegmentedValue" :options="['求职者注册', '企业注册']"
								@change="loginTypeChange" size="large" block>
							</a-segmented>
						</a-col>
						<template v-if="registerSegmentedValue == '求职者注册'">
							<a-col span="24">
								<a-input v-model:value="personalForm.mobile" placeholder="请输入手机号" size="large" />
							</a-col>
							<a-col span="24">
								<a-input-password v-model:value="personalForm.password" placeholder="请输入密码"
									size="large" />
							</a-col>
							<a-col span="12">
								<a-input v-model:value="personalForm.captcha" placeholder="验证码" size="large" />
							</a-col>
							<a-col span="12">
								<image-container :imgObj="{src: codeImage,width: '100%',height: '40px', mode: 'fill'}"
									@click="getCaptcha"></image-container>
							</a-col>
						</template>
						<template v-if="registerSegmentedValue == '企业注册'">
							<a-col span="24">
								<a-input v-model:value="companyForm.contact_mobile" placeholder="请输入联系号码"
									size="large" />
							</a-col>
							<a-col span="24">
								<a-input-password v-model:value="companyForm.password" placeholder="请输入密码"
									size="large" />
							</a-col>
							<a-col span="24">
								<a-input-password v-model:value="companyForm.comform_password" placeholder="请输入确认密码"
									size="large" />
							</a-col>
							<a-col span="24">
								<a-input v-model:value="companyForm.email" placeholder="请输入邮箱" size="large" />
							</a-col>
							<a-col span="24">
								<a-input v-model:value="companyForm.full_name" placeholder="请输入企业名称" size="large" />
							</a-col>
							<a-col span="24">
								<a-input v-model:value="companyForm.contact_name" placeholder="请输入联系人" size="large" />
							</a-col>
							<a-col span="24">
								<a-input v-model:value="companyForm.contact_phone" placeholder="请输入联系固话" size="large" />
							</a-col>
							<a-col span="12">
								<a-input v-model:value="companyForm.captcha" placeholder="验证码" size="large" />
							</a-col>
							<a-col span="12">
								<image-container :imgObj="{src: codeImage,width: '100%',height: '40px', mode: 'fill'}"
									@click="getCaptcha"></image-container>
							</a-col>
						</template>
						<a-col span="24">
							<a-button type="primary" block @click="register" size="large">注册</a-button>
							<a-flex justify="flex-end" :style="{ 'padding-top': '10px' }">
								<div @click="toModule('login')" style="cursor: pointer;">
									已有账号，去登录
								</div>
							</a-flex>
						</a-col>
					</a-row>
				</a-flex>
			</a-flex>
		</a-flex>
	</a-modal>
</template>

<script lang="ts" setup>
	import { ref, onMounted, computed, onBeforeUnmount } from 'vue';
	import { GetCaptcha, PostJobseekerlogin, PostCompanyLogin, PostSmsSend, PostJobseekerSmsLogin, PostCompanyLoginByMobile } from '@/apis/models';
	import { store } from '@/store/index';
	import { router } from '@/router/index';
	import { dataForm, otherDataForm, personalDataForm, companyDataForm, smsDataForm, smsLoginDataForm, reset } from '@/views/login/data.ts';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, hideOtherModal1, openOtherModel_1 } = useCommon();
	let currentModule = ref<String>('login') // 当前模块 login 登录 resiter 注册
	let loginSegmentedValue = ref<String>('我要求职') // 个人或者企业  // 我要求职 个人求职 我要招聘 企业
	let loginMethod = ref<String>('message') // 登录方式  // password 密码登录  message 短信登录
	let registerSegmentedValue = ref<String>('求职者注册') // 注册方式
	let createForm = ref<LoginType.LoginFormType>(dataForm)
	let smsLoginForm = ref<LoginType.SmsLoginFormType>(smsLoginDataForm)
	let smsForm = ref<LoginType.SmsFormType>(smsDataForm)
	let personalForm = ref<RegisterType.RegisterPersonalFormType>(personalDataForm)
	let companyForm = ref<RegisterType.RegisterCompanyFormType>(companyDataForm)
	let capt_id = ref<String>('')
	let codeImage = ref<String>('')
	interface State {
		count : number;
		sending : boolean;
		disabled : boolean;
	}
	const state = ref<State>({
		count: 60,
		codeTxt: '获取验证码',
		disabled: false,
	});

	let timer = ref<any>(null)
	const sendCode = () => {
		smsForm.value.mobile = createForm.value.username ? createForm.value.username : '';
		smsForm.value.capt_id = capt_id.value;
		if (!smsForm.value.mobile) {
			warnToast('请输入手机号')
			return false;
		}
		if (!smsForm.value.captcha) {
			warnToast('请输入图形验证码')
			return false;
		}
		PostSmsSend(smsForm.value).then(res => {
			successToast('发送验证码成功，验证码有效期为一分钟');
			timer.value = setInterval(function () {
				if (state.value.count > 1) {
					state.value.count = state.value.count - 1;
					state.value.codeTxt = '剩余' + (state.value.count - 1) + '秒';
					state.value.disabled = true
				} else {
					clearInterval(timer.value);
					state.value.count = 60;
					state.value.codeTxt = '获取验证码';
					state.value.disabled = false
				};
			}, 1000)
		})
	};

	onBeforeUnmount(() => {
		clearInterval(timer.value);
	})



	const loginTypeChange = () => {
		resetForm()
	}

	const changeLoginMethod = (val : string) => {
		loginMethod.value = val;
		resetForm()
	}

	const toModule = (val : string) => {
		currentModule.value = val;
		createForm.value = reset().dataForm as LoginType.LoginFormType;
		personalForm.value = reset().personalDataForm as RegisterType.RegisterPersonalFormType;
		companyForm.value = reset().companyDataForm as RegisterType.RegisterCompanyFormType;
		smsForm.value = reset().smsDataForm as LoginType.SmsFormType;
		smsLoginForm.value = reset().smsLoginDataForm as LoginType.SmsLoginFormType;
		getCaptcha()
	}

	const cancelModal = () => {
		resetForm()
		hideOtherModal1()
	}
	const resetForm = () => {
		createForm.value = reset().dataForm as LoginType.LoginFormType;
		personalForm.value = reset().personalDataForm as RegisterType.RegisterPersonalFormType;
		companyForm.value = reset().companyDataForm as RegisterType.RegisterCompanyFormType;
		smsForm.value = reset().smsDataForm as LoginType.SmsFormType;
		smsLoginForm.value = reset().smsLoginDataForm as LoginType.SmsLoginFormType;
		getCaptcha()
	}

	const getCaptcha = () => {
		capt_id.value = ''
		GetCaptcha().then(res => {
			capt_id.value = res.data.capt_id;
			codeImage.value = res.data.img;
		})
	}

	const login = () => {
		if (loginSegmentedValue.value == '我要求职') {
			if (loginMethod.value == 'password') {
				createForm.value.capt_id = capt_id.value;
				PostJobseekerlogin(createForm.value).then(res => {
					successToast('登录成功');
					store.commit('setShowLoginBox', {
						showLoginBox: false
					})
					store.commit('getToken', {
						token: res.data.jwttoken.accesstoken
					})
					store.commit('getRole', {
						role: 'personal'
					})
					store.commit('getPageType', {
						pageType: 'personal'
					})
					sessionStorage.setItem('token', res.data.jwttoken.accesstoken)
					sessionStorage.setItem('role', 'personal')
					sessionStorage.setItem('pageType', '')
					sessionStorage.setItem('id', res.data.customerid)
					resetForm()
					hideOtherModal1()
					location.reload()
				}).catch(err => {
					getCaptcha()
				})
			} else {
				smsLoginForm.value.mobile = createForm.value.username ? createForm.value.username : '';
				smsLoginForm.value.sms_code = Number(smsLoginForm.value.sms_code)
				PostJobseekerSmsLogin(smsLoginForm.value).then(res => {
					successToast('登录成功');
					store.commit('setShowLoginBox', {
						showLoginBox: false
					})
					store.commit('getToken', {
						token: res.data.jwttoken.accesstoken
					})
					store.commit('getRole', {
						role: 'personal'
					})
					store.commit('getPageType', {
						pageType: 'personal'
					})
					sessionStorage.setItem('token', res.data.jwttoken.accesstoken)
					sessionStorage.setItem('role', 'personal')
					sessionStorage.setItem('pageType', '')
					sessionStorage.setItem('id', res.data.customerid)
					resetForm()
					hideOtherModal1()
					location.reload()
				}).catch(err => {
					getCaptcha()
				})
			}
		} else {
			if (loginMethod.value == 'password') {
				createForm.value.capt_id = capt_id.value;
				PostCompanyLogin(createForm.value).then(res => {
					successToast('登录成功');
					store.commit('setShowLoginBox', {
						showLoginBox: false
					})
					store.commit('getToken', {
						token: res.data.jwttoken.accesstoken
					})
					store.commit('getRole', {
						role: 'company'
					})
					store.commit('getPageType', {
						pageType: 'company'
					})
					sessionStorage.setItem('token', res.data.jwttoken.accesstoken)
					sessionStorage.setItem('role', 'company')
					sessionStorage.setItem('pageType', 'company')
					sessionStorage.setItem('id', res.data.company_id)
					store.commit('permissions/SET_PERMISSION', null)
					store.commit('permissions/SET_MENU', [])
					resetForm()
					hideOtherModal1()
					router.push('/manage/home')
				}).catch(err => {
					getCaptcha()
				})
			} else {
				smsLoginForm.value.mobile = createForm.value.username ? createForm.value.username : '';
				smsLoginForm.value.sms_code = Number(smsLoginForm.value.sms_code)
				PostCompanyLoginByMobile(smsLoginForm.value).then(res => {
					successToast('登录成功');
					store.commit('setShowLoginBox', {
						showLoginBox: false
					})
					store.commit('getToken', {
						token: res.data.jwttoken.accesstoken
					})
					store.commit('getRole', {
						role: 'company'
					})
					store.commit('getPageType', {
						pageType: 'company'
					})
					sessionStorage.setItem('token', res.data.jwttoken.accesstoken)
					sessionStorage.setItem('role', 'company')
					sessionStorage.setItem('pageType', 'company')
					sessionStorage.setItem('id', res.data.company_id)
					store.commit('permissions/SET_PERMISSION', null)
					store.commit('permissions/SET_MENU', [])
					resetForm()
					hideOtherModal1()
					router.push('/manage/home')
				}).catch(err => {
					getCaptcha()
				})
			}

		}

	}

	openOtherModel_1 = computed(() => {
		return store.state.openOtherModel_1;
	})


	onMounted(() => {
		getCaptcha()
	})
</script>

<style lang="less">
	.login-box {
		width: 100%;
		height: 100%;
		// background-image: linear-gradient(to bottom, #e0f2f4, #f2f4f7);
		// background-image: url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr');
	}

	.login-content {
		padding: 20px;
		border-radius: 20px;
		// box-shadow: 0 0 2px  #ccc; /* 水平偏移 垂直偏移 模糊半径 阴影大小 颜色 */
		background-color: #ffffff;
	}
</style>