<template>
	<div class="module">
		<div class="module_mian">
			<div class="module_title">医生注册</div>
			<div class="module_desc">温馨提示，咨询是必备的</div>
			<el-form
				:model="state.form"
				ref="formRef"
				label-width="100px"
				class="register-form"
				label-position="top"
				:rules="rules">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="登录账号" prop="nickName">
							<el-input v-model="state.form.nickName" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="登录密码" prop="password">
							<el-input v-model="state.form.password" type="password" show-password />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="确认密码" prop="confirmPassword">
							<el-input v-model="state.form.confirmPassword" type="password" show-password />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="姓名" prop="userName">
							<el-input v-model="state.form.userName" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="医生照片" prop="img">
							<image-upload @update:imageUrl="handleImageUrl" :image-url="state.form.img" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="医生资质" prop="aptitude">
							<image-upload @update:imageUrl="handleImageUrlAptitude" :image-url="state.form.aptitude" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="性别" prop="sex">
							<el-select v-model="state.form.sex" placeholder="请选择性别">
								<el-option label="男" :value="1" />
								<el-option label="女" :value="2" />
								<el-option label="其他" :value="0" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="工作经验" prop="yearsExperience">
							<el-input v-model.number="state.form.yearsExperience" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="毕业学校" prop="graduationSchool">
							<el-input v-model="state.form.graduationSchool" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="联系电话" prop="phone">
							<el-input v-model="state.form.phone" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="入职科室" prop="departmentId">
					<el-select v-model="state.form.departmentId" placeholder="请选择入职科室">
						<el-option
							v-for="item in state.positionOptions"
							:key="item.id"
							:label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>

				<el-form-item label="简介" prop="intro">
					<el-input v-model="state.form.intro" :rows="4" type="textarea" />
				</el-form-item>

				<el-form-item label="职称" prop="position">
					<el-select v-model="state.form.position" placeholder="请选择职称">
						<el-option
							v-for="item in state.positionOptions"
							:key="item.name"
							:label="item.name"
							:value="item.name" />
					</el-select>
				</el-form-item>
				<div class="forgetpwd" @click="router.push('/login')">已有账号？立即登录</div>
				<el-form-item>
					<el-button type="primary" class="module_button" @click="onRegister">立即注册</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { registerFront } from '~/api/user/frontUserApi'
import ImageUpload from '~/components/ImageUpload.vue'

const router = useRouter()
const formRef = ref<FormInstance>()
const state = reactive(<any>{
	form: {},
	positionOptions:[],
	getDepart:[],
})
const rules = reactive<FormRules<any>>({
	nickName: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 6, message: '密码长度至少6位', trigger: 'blur' }
	],
	confirmPassword: [
		{ required: true, message: '请确认密码', trigger: 'blur' },
		{ validator: (_, value, callback) => {
				if (value !== state.form.password) {
					callback(new Error('两次输入密码不一致'))
				} else {
					callback()
				}
			}, trigger: ['blur', 'change'] }
	],
	userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
	img: [{ required: true, message: '请上传医生照片', trigger: 'change' }],
	aptitude: [{ required: true, message: '请上传资质证明', trigger: 'change' }],
	sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
	yearsExperience: [
		{ required: true, message: '请输入工作经验', trigger: 'blur' },
		{ type: 'number', message: '必须为数字值' }
	],
	graduationSchool: [{ required: true, message: '请输入毕业学校', trigger: 'blur' }],
	phone: [
		{ required: true, message: '请输入联系电话', trigger: 'blur' },
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' }
	],
	specialty: [{ required: true, message: '请选择专业领域', trigger: 'change' }],
	intro: [{ required: true, message: '请输入简介', trigger: 'blur' }],
	position: [{ required: true, message: '请选择职称', trigger: 'change' }]
})

const handleImageUrl = (path: string) => {
	state.form.img = path
}

const handleImageUrlAptitude = (path: string) => {
	state.form.aptitude = path
}

const onRegister = async () => {
	if (!formRef.value) return
	try {
		await formRef.value.validate()
		if (state.form.nickName.toLowerCase() === 'admin') {
			ElMessage.warning('不能使用admin作为账号')
			return
		}
		await frontRequest.post("api/doctors",state.form)
		ElMessage.success('注册成功,等待管理员审核')
		router.push('/login')
	} catch (error) {
		ElMessage.error('注册失败，请检查表单')
	}
}


onMounted(()=>{
	frontRequest.get(`/api/position/page?limit=9999`).then((res:any) => {
		state.positionOptions = res.data.list
	})

	frontRequest.get(`/api/departments/page?limit=9999`).then((res:any) => {
		state.getDepart = res.data.list
	})
})

</script>

<style scoped>
.module {
	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url("/login/e36341619bf8f04dcbdc6b01105a85a.png") no-repeat center/cover;
}

.module_mian {
	width: 60%;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	padding: 40px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	margin: 20px 0;
}

.module_title {
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	color: #333;
	margin-bottom: 8px;
}

.module_desc {
	font-size: 14px;
	text-align: center;
	color: #666;
	margin-bottom: 30px;
}

.register-form {
	:deep(.el-form-item__label) {
		font-weight: 500;
		color: #444;
	}
}

.forgetpwd {
	text-align: center;
	color: #409EFF;
	font-size: 14px;
	margin: 12px 0;
	cursor: pointer;
	&:hover {
		text-decoration: underline;
	}
}

.module_button {
	width: 100%;
	height: 42px;
	font-size: 16px;
	transition: all 0.3s;
	background: #409EFF;
	border: none;
	&:hover {
		opacity: 0.9;
		transform: translateY(-1px);
	}
	&:active {
		transform: translateY(0);
	}
}
</style>

<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>
