<template>
	<div class="content-padding-inline" style="margin: 30px 0;">
		<a-row :gutter="[10,10]" type="flex" justify="center">
			<a-col span="18">
				<a-row :gutter="20">
					<a-col span="4">
						<div style="position: fixed; top: 90px; z-index:99;">
							<a-space direction="vertical">
								<a-anchor style="width: 210px !important;" :get-container="getContainer"
									:target-offset="50" :items="menu_list" @click="anchorClick"></a-anchor>
								<div @click="detail"
									style="width: 210px; padding: 10px;background-color: #fff;	border-radius: 8px; cursor: pointer;">
									预览简历
								</div>
							</a-space>
						</div>
					</a-col>
					<a-col span="20">
						<div style="width: 100%;background-color: #fff;padding: 0 20px;border-radius: 8px;">
							<div ref="abc" class="abc" style="height: 100vh;overflow: auto;">
								<a-space direction="vertical" justify="space-between" :size="36"
									style="width: 100% !important;">
									<div id="basic">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">基本资料</div>
													</div>
												</a-typography-title>
												<div @click="edit('basic')" style="padding: 0 20px;cursor: pointer;">
													<FormOutlined style="color: #4FBE70;font-size: 24px;" />
													<span v-if="editObj.basic" style="color: #bebebe;">正在编辑</span>
													<span v-else style="color: #bebebe;">编辑</span>
												</div>
											</a-flex>
											<a-typography-paragraph>
												<resume-basic :form_state="editObj.basic"
													@quitEdit="quitEdit"></resume-basic>
											</a-typography-paragraph>
										</a-typography>
									</div>
									<div id="contact">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center" justify="space-between">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">联系信息</div>
													</div>
												</a-typography-title>
												<FormOutlined @click="edit('contact')" v-if="editObj.contact"
													style="color: #4FBE70;font-size: 24px;" />
												<FormOutlined @click="edit('contact')" v-else
													style="color: #4FBE70;font-size: 24px;" />
											</a-flex>
											<a-typography-paragraph>
												<resume-contact :form_state="editObj.contact"
													@quitEdit="quitEdit"></resume-contact>
											</a-typography-paragraph>
										</a-typography>
									</div>
									<div id="introduction">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center" justify="space-between">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">个人简介</div>
													</div>
												</a-typography-title>
												<FormOutlined @click="edit('introduction')" v-if="editObj.introduction"
													style="color: #4FBE70;font-size: 24px;" />
												<FormOutlined @click="edit('introduction')" v-else
													style="color: #4FBE70;font-size: 24px;" />
											</a-flex>
											<a-typography-paragraph>
												<resume-introduction :form_state="editObj.introduction"
													@quitEdit="quitEdit"></resume-introduction>
											</a-typography-paragraph>
										</a-typography>
									</div>
									<div id="skill">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center" justify="space-between">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">专业技能掌握程度</div>
													</div>
												</a-typography-title>
												<FormOutlined @click="edit('skill')" v-if="editObj.skill"
													style="color: #4FBE70;font-size: 24px;" />
												<FormOutlined @click="edit('skill')" v-else
													style="color: #4FBE70;font-size: 24px;" />
											</a-flex>
											<a-typography-paragraph>
												<resume-skill :form_state="editObj.skill"
													@quitEdit="quitEdit"></resume-skill>
											</a-typography-paragraph>
										</a-typography>
									</div>
									<div id="train">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center" justify="space-between">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">培训经历</div>
													</div>
												</a-typography-title>
												<FormOutlined @click="edit('train')" v-if="editObj.train"
													style="color: #4FBE70;font-size: 24px;" />
												<PlusCircleOutlined @click="edit('train')" v-else
													style="color: #4FBE70;font-size: 24px;" />
											</a-flex>
											<a-typography-paragraph>
												<resume-train :form_state="editObj.train" @quitEdit="quitEdit"
													@editEdit="edit('train')"></resume-train>
											</a-typography-paragraph>
										</a-typography>
									</div>
									<div id="intention">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center" justify="space-between">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">求职意向</div>
													</div>
												</a-typography-title>
												<FormOutlined @click="edit('intention')" v-if="editObj.intention"
													style="color: #4FBE70;font-size: 24px;" />
												<PlusCircleOutlined @click="edit('intention')" v-else
													style="color: #4FBE70;font-size: 24px;" />
											</a-flex>
											<a-typography-paragraph>
												<resume-intention :form_state="editObj.intention" @quitEdit="quitEdit"
													@editEdit="edit('intention')"></resume-intention>
											</a-typography-paragraph>
										</a-typography>
									</div>
									<div id="experience">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center" justify="space-between">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">工作经历</div>
													</div>
												</a-typography-title>
												<FormOutlined @click="edit('experience')" v-if="editObj.experience"
													style="color: #4FBE70;font-size: 24px;" />
												<PlusCircleOutlined @click="edit('experience')" v-else
													style="color: #4FBE70;font-size: 24px;" />
											</a-flex>
											<a-typography-paragraph>
												<resume-experience :form_state="editObj.experience" @quitEdit="quitEdit"
													@editEdit="edit('experience')"></resume-experience>
											</a-typography-paragraph>
										</a-typography>
									</div>
									<div id="credential">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center" justify="space-between">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">证书</div>
													</div>
												</a-typography-title>
												<FormOutlined @click="edit('credential')" v-if="editObj.credential"
													style="color: #4FBE70;font-size: 24px;" />
												<PlusCircleOutlined @click="edit('credential')" v-else
													style="color: #4FBE70;font-size: 24px;" />
											</a-flex>
											<a-typography-paragraph>
												<resume-credential :form_state="editObj.credential" @quitEdit="quitEdit"
													@editEdit="edit('credential')"></resume-credential>
											</a-typography-paragraph>
										</a-typography>
									</div>
								</a-space>

							</div>
						</div>
					</a-col>
				</a-row>
			</a-col>
		</a-row>
	</div>
	<resume-detail v-if="detail_record" :detail_record="detail_record"></resume-detail>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, createVNode } from 'vue';
	import ResumeBasic from '@/components/jobSeeker/resume/basic/basic.vue';
	import ResumeContact from '@/components/jobSeeker/resume/contact/contact.vue';
	import ResumeCredential from '@/components/jobSeeker/resume/credential/credential.vue';
	import ResumeExperience from '@/components/jobSeeker/resume/experience/experience.vue';
	import ResumeIntention from '@/components/jobSeeker/resume/intention/intention.vue';
	import ResumeIntroduction from '@/components/jobSeeker/resume/introduction/introduction.vue';
	import ResumeSkill from '@/components/jobSeeker/resume/skill/skill.vue';
	import ResumeTrain from '@/components/jobSeeker/resume/train/train.vue';
	import ResumeDetail from '@/components/jobseeker/resume/detail/index.vue'
	import { FormOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
	import { useCommon } from '@/hooks/useCommon';
	let { store, dayjs, richOption, ExclamationCircleOutlined, Modal, showOtherModal1 } = useCommon();
	let menu_list = ref([
		{ title: '基本资料', key: 1, href: '#basic' },
		{ title: '联系信息', key: 2, href: '#contact' },
		{ title: '个人简介', key: 3, href: '#introduction' },
		{ title: '专业技能掌握程度', key: 4, href: '#skill' },
		{ title: '培训经历', key: 5, href: '#train' },
		{ title: '求职意向', key: 6, href: '#intention' },
		{ title: '工作经历', key: 7, href: '#experience' },
		{ title: '证书', key: 8, href: '#credential' }])


	let editObj = ref<Object>({
		basic: false,
		contact: false,
		introduction: false,
		skill: false,
		train: false,
		experience: false,
		credential: false,
	})

	let editingKey = ref(null); // 存储当前正在编辑的键

	const edit = (key) => {
		if (editingKey.value && editingKey.value !== key) {
			Modal.confirm({
				title: '有内容在进行编辑，是否要退出当前编辑',
				icon: createVNode(ExclamationCircleOutlined),
				content: '当前编辑内容不会保存',
				okText: '退出',
				cancelText: '取消',
				onOk() {
					editObj.value[editingKey.value] = false;
					editingKey.value = key;
					editObj.value[key] = true;
				},
				onCancel() {
					return;
				},
			});

			//    const confirmResult = window.confirm('您已在一个字段中进行编辑，继续将丢失未保存的更改，是否继续？');
			// console.log(confirmResult)
			// debugger
			//    if (!confirmResult) {
			//      return;
			//    }
			// debugger
			//    editObj.value[editingKey.value] = false;
		} else {
			editingKey.value = key;
			editObj.value[key] = true;
		}
	};

	// 退出编辑
	const quitEdit = () => {
		editObj.value[editingKey.value] = false;
		editingKey.value = null
	}

	const abc = ref(null)

	const getContainer = (val) => {
		return abc.value
	}

	const anchorClick = (e, link) => {
		e.preventDefault()
		if (link.href) {
			let element = document.getElementById(link.href)

			element && element.scrollIntoView({
				block: 'end',
				behavior: 'smooth',
			})
		}
	}
	
	let detail_record = ref<Object>(null)
	const detail = () => {
		detail_record.value = {customer_id: sessionStorage.getItem('id')};
		showOtherModal1()
	}
	
	
</script>

<style scoped>
	:deep(.ant-anchor) {
		background-color: #ffffff !important;
		border-radius: 8px !important;
		padding-inline-start: 2px;
	}

	:deep(.ant-anchor::before) {
		border-inline-start: 0 !important;
	}

	:deep(.ant-anchor-ink) {
		background-color: #ffffff !important;
	}

	:deep(.ant-anchor-link) {
		padding: 10px !important;
	}

	:deep(.ant-anchor-link-title-active) {
		font-weight: bold !important;
		color: #4FBE70 !important;
	}

	.text-decoration {
		position: relative;
		display: inline-block;
		overflow: visible;
	}

	.text-decoration::before {
		content: '';
		width: 6px;
		height: 22px;
		background-color: #4FBE70;
		position: absolute;
		top: 4px
	}

	.text-content {
		position: relative;
		margin-left: 20px;
	}
</style>