<template>
	<div class="content-padding-inline" style="margin: 30px 0;">
		<a-row :gutter="[20,20]" type="flex" justify="center">
			<a-col span="18">
				<a-card title="修改密码">
					<a-form :model="createForm" layout="vertical">
						<a-row gutter="20">
							<a-col span="12">
								<a-row  gutter="20">
									<a-col span="24">
										<a-form-item label="手机号">
											<a-input v-model:value="smsForm.mobile" placeholder="手机号" size="large" />
										</a-form-item>
									</a-col>
									<a-col span="12">
										<a-form-item label="验证码">
											<a-input v-model:value="smsForm.captcha" placeholder="验证码" size="large" />
										</a-form-item>
									</a-col>
									<a-col span="12">
										<a-form-item label="图形验证码">
											<image-container :imgObj="{src: codeImage,width: '100%',height: '40px', mode: 'fill'}"
												@click="getCaptcha"></image-container>
										</a-form-item>
									</a-col>
									<a-col span="18">
										<a-form-item label="短信验证码">
											<a-input v-model:value="createForm.sms_code" placeholder="短信验证码" size="large" />
										</a-form-item>
									</a-col>
									<a-col span="6">
										<a-form-item label="验证码">
											<a-button type="primary" block size="large" @click="sendCode"
												:disabled="state.disabled">
												{{ state.codeTxt }}</a-button>
										</a-form-item>
									</a-col>
									<a-col span="24">
										<a-form-item label="确认密码" name="comform_password">
											<a-input v-model:value="createForm.new_password" placeholder="请输入确认密码"
												size="large" />
										</a-form-item>
									</a-col>
									<a-col span="24">
										<a-form-item label="">
											<a-button type="primary" block @click="saveForm" size="large">保存</a-button>
										</a-form-item>
									</a-col>
								</a-row>
							</a-col>
							
						</a-row>

					</a-form>
				</a-card>
			</a-col>
		</a-row>

	</div>

</template>


<script setup lang="ts">
	import { ref, onMounted, computed, onBeforeUnmount } from 'vue';
	import { PostJobseekerEditPwd, PostSmsSend, GetCaptcha, PostJobseekerResetPwd } from '@/apis/models';
	import { warnToast, successToast } from '@/utils/toastHelper';
	let smsForm = ref<Object>({
		mobile: "",
		captcha: "",
		capt_id: ""
	})
	let createForm = ref({
		mobile: '',
		sms_code: '',
		new_pwd: '',
	})

	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.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)
		})
	};



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


	const saveForm = () => {
		PostJobseekerResetPwd(createForm.value).then(res => {
			successToast('重置成功')
			resetForm()
		})
	}

	const resetForm = () => {
		smsForm.value = {
			mobile: "",
			captcha: "",
			capt_id: ""
		}
		createForm.value = {
			sms_code: '',
			new_password: '',
		}
	}



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

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

<style scoped lang="less">

</style>