<template>
	<a-modal v-model:visible="openOtherModel_1" title="预览简历" ok-text="提交" cancel-text="取消" @ok="sumbitForm"
		@cancel="cancelModal" width="60%" :footer="null">

		<a-spin :spinning="spinning">
			<a-typography>
				<a-typography-title :level="4">
					<div class="text-decoration">
						<div class="text-content">基本资料</div>
					</div>
				</a-typography-title>
				<a-typography-paragraph>
					<a-row :gutter="[20,20]">
						<a-col span="24">
							<a-row :gutter="[20,20]">
								<a-col span="10">
									<a-row>
										<a-space direction="vertical">
											<a-col span="24">
												姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：{{detail.seekername}}
											</a-col>
											<a-col span="24">
												性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：{{detail.gender}}
											</a-col>
											<a-col span="24">
												身份证号：{{detail.id_number}}
											</a-col>
											<a-col span="24">
												民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族：{{detail.ethnicity_txt}}
											</a-col>
											<a-col span="24">
												身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高：{{detail.height}}cm
											</a-col>
											<a-col span="24">
												政治面貌：{{detail.political_status_txt}}
											</a-col>
											<a-col span="24">
												联系方式：{{detail.mobile}}
											</a-col>
											<a-col span="24">
												邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：{{detail.email}}
											</a-col>
										</a-space>
									</a-row>
								</a-col>
								<a-col span="8">
									<a-row>
										<a-space direction="vertical">
											<a-col span="24">
												出生日期：{{detail.dob}}
											</a-col>
											<a-col span="24">
												婚姻状况：{{detail.marital_status_txt}}
											</a-col>
											<a-col span="24">
												学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：{{detail.education_txt}}
											</a-col>
											<a-col span="24">
												体&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重：{{detail.weight}}kg
											</a-col>
											<a-col span="24">
												现居地址：{{detail.now_level1_txt ? detail.now_level1_txt : ''}}{{detail.now_level2_txt ? detail.now_level2_txt : ''}}{{detail.now_level3_txt ? detail.now_level3_txt : ''}}{{detail.now_level4_txt ? detail.now_level4_txt : ''}}
											</a-col>
											<a-col span="24">
												籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯：{{detail.native_place_txt}}
											</a-col>
											<a-col span="24">
												户口地址：{{detail.now_level1_txt ? detail.now_level1_txt : ''}}{{detail.now_level2_txt ? detail.now_level2_txt : ''}}{{detail.now_level3_txt ? detail.now_level3_txt : ''}}{{detail.now_level4_txt ? detail.now_level4_txt : ''}}
											</a-col>
											<a-col span="24">
												职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：{{detail.title_txt}}
											</a-col>

										</a-space>
									</a-row>
								</a-col>
								<a-col span="6">
									<image-container :need="true"
										:imgObj="{src: detail.photo? detail.photo : '/images/gongzhonghao.png' ,width: '150px',height:'210px'}"></image-container>
								</a-col>
							</a-row>
						</a-col>
					</a-row>
				</a-typography-paragraph>
				<a-typography-title :level="4">
					<div class="text-decoration">
						<div class="text-content">个人简介</div>
					</div>
				</a-typography-title>
				<a-typography-paragraph>
					<div class="ql-editor" v-html="detail.introduction"></div>
				</a-typography-paragraph>
				<a-typography-title :level="4">
					<div class="text-decoration">
						<div class="text-content">求职期望</div>
					</div>
				</a-typography-title>
				<a-typography-paragraph>
					<a-row>
						<a-col span="24">
							工作经验：{{detail.work_experience}}年
						</a-col>
						<a-col span="24">
							期望薪资：{{detail.salary_range_txt}}
						</a-col>
						<a-col span="24">
							<a-row>
								<a-col span="8" v-if="detail.desire_areas">
									<a-row>
										<a-space direction="vertical">
											<a-col span="24" v-for="(item,index) in detail.desire_areas">
												期望地址{{index + 1}}：{{item.level1_txt ? item.level1_txt : ''}}{{item.level2_txt ? item.level2_txt : ''}}{{item.level3_txt ? item.level3_txt : ''}}{{item.level4_txt ? item.level4_txt : ''}}
											</a-col>
										</a-space>
									</a-row>
								</a-col>
								<a-col span="8" v-if="detail.desire_positions">
									<a-row>
										<a-space direction="vertical">
											<a-col span="24" v-for="(item,index) in detail.desire_positions">
												期望职位{{index + 1}}：{{item.level1_txt ? item.level1_txt : ''}}{{item.level2_txt ? item.level2_txt : ''}}
											</a-col>
										</a-space>
									</a-row>
								</a-col>
								<a-col span="8" v-if="detail.desire_industrys">
									<a-row>
										<a-space direction="vertical">
											<a-col span="24" v-for="(item,index) in detail.desire_industrys">
												期望行业{{index + 1}}：{{item.industry_txt}}
											</a-col>
										</a-space>
									</a-row>
								</a-col>
							</a-row>
						</a-col>
					</a-row>
				</a-typography-paragraph>
			</a-typography>
			<a-typography-title :level="4">
				<div class="text-decoration">
					<div class="text-content">专业技能掌握能力</div>
				</div>
			</a-typography-title>
			<a-typography-paragraph>
				<a-row>
					<a-space direction="vertical">
						<a-col span="24">
							英&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;语：{{detail.english_txt}}
						</a-col>
						<a-col span="24">
							国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;语：{{detail.mandarin_txt}}
						</a-col>
						<a-col span="24">
							粤&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;语：{{detail.cantonese_txt}}
						</a-col>
						<a-col span="24">
							第二外语：{{detail.other_language_txt}}
						</a-col>
						<a-col span="24">
							计算机能力：{{detail.computer_skills}}
						</a-col>
					</a-space>
				</a-row>
			</a-typography-paragraph>
			<a-typography-title :level="4">
				<div class="text-decoration">
					<div class="text-content">工作经历</div>
				</div>
			</a-typography-title>
			<a-typography-paragraph>
				<template v-for="(item,index) in detail.experiences">
					<a-card :title="item.company_name" style="margin-bottom: 10px;">
						<template #extra>{{item.position}}</template>
						<p>工作时间：{{item.start_year}}.{{item.start_month}}至{{item.end_year}}.{{item.end_month}}</p>
						<p>离职原因：{{item.reason_for_leaving}}</p>
					</a-card>
				</template>
			</a-typography-paragraph>
			<a-typography-title :level="4">
				<div class="text-decoration">
					<div class="text-content">教育/培训经历</div>
				</div>
			</a-typography-title>
			<a-typography-paragraph>
				<template v-for="(item,index) in detail.trainings">
					<a-card :title="item.school_or_institution" style="margin-bottom: 10px;">
						<template #extra>{{item.major}}</template>
						<p>教育/培训时间：{{item.start_year}}.{{item.start_month}}至{{item.end_year}}.{{item.end_month}}</p>
						<p>曾担任的职务：{{item.positions_held}}</p>
						<p>获得的证书：{{item.certificate}}</p>
						<p>获得的奖项：{{item.awards}}</p>
					</a-card>
				</template>
			</a-typography-paragraph>
		</a-spin>
		<a-flex justify="flex-end">
			<a-space>
				<a-button type="primary" @click="exportToWord">导出简历</a-button>
			</a-space>
		</a-flex>

		<div v-show="false">
			<div id="export-container">
				<div class="resume-word">
					<h1 class="resume-word-title" style="text-align: center;">个人简历</h1>
					<div>
						<div class="resume-word-item">
							<div style="color: #4FBE70">
								<h3 class="resume-word-item-title-content">基本资料</h3>
							</div>
							<div class="resume-word-item-content">
								<table border="1" style="border-collapse: collapse;text-align: center;width: 100%;">
									<tbody>
										<tr style="height: 30px;">
											<td>姓&nbsp;名</td>
											<td>{{detail.seekername}}</td>
											<td>性&nbsp;别</td>
											<td>{{detail.gender}}</td>
											<td rowspan="6" style="text-align: center; vertical-align: middle;">
												<img :src="detail.photo" alt="" width="90" height="150">
											</td>
										</tr>
										<tr style="height: 30px;">
											<td>出生日期</td>
											<td>{{detail.dob}}</td>
											<td>职&nbsp;称</td>
											<td>{{detail.title_txt}}</td>
										</tr>
										<tr style="height: 30px;">
											<td>现居住地</td>
											<td>{{detail.now_level1_txt ? detail.now_level1_txt : ''}}{{detail.now_level2_txt ? detail.now_level2_txt : ''}}{{detail.now_level3_txt ? detail.now_level3_txt : ''}}{{detail.now_level4_txt ? detail.now_level4_txt : ''}}
											</td>
											<td>户口所在地</td>
											<td>{{detail.now_level1_txt ? detail.now_level1_txt : ''}}{{detail.now_level2_txt ? detail.now_level2_txt : ''}}{{detail.now_level3_txt ? detail.now_level3_txt : ''}}{{detail.now_level4_txt ? detail.now_level4_txt : ''}}
											</td>
										</tr>
										<tr style="height: 30px;">
											<td>学&nbsp;历</td>
											<td>{{detail.education_txt}}</td>
											<td>婚姻状况</td>
											<td>{{detail.marital_status_txt}}</td>
										</tr>
										<tr style="height: 30px;">
											<td>民&nbsp;族</td>
											<td>{{detail.ethnicity_txt}}</td>
											<td>政治面貌</td>
											<td>{{detail.political_status_txt}}</td>

										</tr>
										<tr style="height: 30px;">
											<td>体&nbsp;重</td>
											<td>{{detail.weight}}kg</td>
											<td>身&nbsp;高</td>
											<td>{{detail.height}}cm</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>

						<!-- 个人简介 -->
						<div class="resume-word-item">
							<div style="color: #4FBE70">
								<h3 class="resume-word-item-title-content">个人简介</h3>
							</div>
							<div class="resume-word-item-content">
								<p class="ql-editor" v-html="detail.introduction"></p>
							</div>
						</div>

						<!-- 求职期望 -->
						<div class="resume-word-item">
							<div style="color: #4FBE70">
								<h3 class="resume-word-item-title-content">求职期望</h3>
							</div>
							<div class="resume-word-item-content">
								<table border="1" style="border-collapse: collapse;width: 100%;text-align: center;">
									<tbody>
										<tr style="height: 30px;">
											<td style="width: 20%;">求职类型</td>
											<td style="width: 30%;">{{detail.job_type_txt}}</td>
											<td style="width: 20%;">可到职日期</td>
											<td style="width: 30%;">{{detail.available_date_txt}}</td>
										</tr>
										<tr style="height: 30px;">
											<td style="width: 20%;">人才类型</td>
											<td style="width: 30%;">{{detail.talent_type_txt}}</td>
											<td style="width: 20%;">工作经验</td>
											<td style="width: 30%;">{{detail.work_experience}}年</td>
										</tr>
										<tr style="height: 30px;">
											<td style="width: 20%;">月薪要求</td>
											<td colspan="3" style="width: 80%;">{{detail.salary_range_txt}}</td>
										</tr>
										<tr style="height: 30px;" v-for="(item,index) in detail.desire_areas">
											<td style="width: 20%;">期望工作地区{{index + 1}}</td>
											<td colspan="3" style="width: 80%;">
												{{item.level1_txt ? item.level1_txt : ''}}{{item.level2_txt ? item.level2_txt : ''}}{{item.level3_txt ? item.level3_txt : ''}}{{item.level4_txt ? item.level4_txt : ''}}
											</td>
										</tr>
										<tr style="height: 30px;" v-for="(item,index) in detail.desire_industrys">
											<td style="width: 20%;">期望从事行业{{index + 1}}</td>
											<td colspan="3" style="width: 80%;">{{item.industry_txt}}</td>
										</tr>
										<tr style="height: 30px;" v-for="(item,index) in detail.desire_positions">
											<td style="width: 20%;">期望从事职位{{index + 1}}</td>
											<td colspan="3" style="width: 80%;">
												{{item.level1_txt ? item.level1_txt : ''}}{{item.level2_txt ? item.level2_txt : ''}}
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>

						<!-- 教育培训 -->
						<div class="resume-word-item">
							<div style="color: #4FBE70">
								<h3 class="resume-word-item-title-content">教育培训</h3>
							</div>
							<div class="resume-word-item-content">
								<table border="1" style="border-collapse: collapse;width: 100%;text-align: center;">
									<thead>
										<th style="height: 30px;width:20%;">起止时间</th>
										<th style="height: 30px;width:20%;">学校/培训机构</th>
										<th style="height: 30px;width: 20%;">专业</th>
										<th style="height: 30px;width:20%;">曾担任的职务</th>
										<th style="height: 30px;width: 20%;">获得证书奖项</th>
									</thead>
									<tbody>
										<tr style="height: 30px;" v-for="(item,index) in detail.trainings">
											<td style="width: 20%;">
												{{item.start_year}}.{{item.start_month}}至{{item.end_year}}.{{item.end_month}}
											</td>
											<td style="width: 20%;">{{item.school_or_institution}}</td>
											<td style="width: 20%;">{{item.major}}</td>
											<td style="width: 20%;">{{item.positions_held}}</td>
											<td style="width: 20%;">
												<div>
													{{item.certificate}}
												</div>
												<div>
													{{item.awards}}
												</div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>

						<!-- 工作经历 -->
						<div class="resume-word-item">
							<div style="color: #4FBE70">
								<h3 class="resume-word-item-title-content">工作经历</h3>
							</div>
							<div class="resume-word-item-content">
								<table border="1" style="border-collapse: collapse;width: 100%;text-align: center;">
									<thead>
										<th style="height: 30px;width: 25%;">起止时间</th>
										<th style="height: 30px;width: 25%;">单位名称</th>
										<th style="height: 30px;width: 25%;">职位</th>
										<th style="height: 30px;width: 25%;">离职原因</th>
									</thead>
									<tbody>
										<tr style="height: 30px;" v-for="(item,index) in detail.experiences">
											<td style="width: 25%;">
												{{item.start_year}}.{{item.start_month}}至{{item.end_year}}.{{item.end_month}}
											</td>
											<td style="width: 25%;">{{item.company_name}}</td>
											<td style="width: 25%;">{{item.position}}</td>
											<td style="width: 25%;">{{item.reason_for_leaving}}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>

						<!-- 专业技能掌握能力 -->
						<div class="resume-word-item">
							<div style="color: #4FBE70">
								<h3 class="resume-word-item-title-content">专业技能掌握能力</h3>
							</div>
							<div class="resume-word-item-content">
								<table border="1" style="border-collapse: collapse;width: 100%;text-align: center;">
									<tbody>
										<tr style="height: 30px;">
											<td style="width: 25%;">英&nbsp;语</td>
											<td style="width: 25%;">{{detail.english_txt}}</td>
											<td style="width: 25%;">粤&nbsp;语</td>
											<td style="width: 25%;">{{detail.mandarin_txt}}</td>
										</tr>
										<tr style="height: 30px;">
											<td style="width:25%;">国&nbsp;语</td>
											<td style="width: 25%;">{{detail.cantonese_txt}}</td>
											<td style="width: 25%;">第二外语</td>
											<td style="width: 25%;">{{detail.other_language_txt}}</td>
										</tr>
										<tr style="height: 30px;">
											<td style="width: 25%;">计算机能力</td>
											<td colspan="7" style="width: 75%;">{{detail.computer_skills}}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>

						<!-- 联系信息 -->
						<div class="resume-word-item">
							<div style="color: #4FBE70">
								<h3 class="resume-word-item-title-content">联系信息</h3>
							</div>
							<div class="resume-word-item-content">
								<table border="1" style="border-collapse: collapse;width: 100%;text-align: center;">
									<tbody>
										<tr style="height: 30px;">
											<td style="width: 15%;">移动电话</td>
											<td style="width: 35%;">{{detail.mobile}}</td>
											<td style="width: 15%;">固定电话</td>
											<td style="width: 35%;">{{detail.landline}}</td>
										</tr>
										<tr style="height: 30px;">
											<td style="width: 15%;">联系邮箱</td>
											<td style="width: 35%;">{{detail.email}}</td>
											<td style="width: 15%;">Q&nbsp;Q</td>
											<td style="width: 35%;">{{detail.qq}}</td>
										</tr>
										<tr style="height: 30px;">
											<td style="width: 15%;">通讯地址</td>
											<td style="width: 35%;">{{detail.mailing_address}}
											</td>
											<td style="width: 15%;">邮&nbsp;编</td>
											<td style="width: 35%;">{{detail.postal_code}}
											</td>
										</tr>
										<tr style="height: 30px;">
											<td style="width: 15%;">个人主页</td>
											<td colspan="3" style="width: 85%;">{{detail.personal_website}}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</a-modal>
</template>

<script setup lang="ts">
	import { ref, onMounted, defineProps, computed, watch, defineEmits } from 'vue';
	import { GetJobseekerDetail, GetJobapplicantIntroductiondetail, PostJobapplicantTrainingdetail, PostJobapplicantDesireindustrydetail, PostJobapplicantExperiencedetail } from '@/apis/models';
	import { message } from 'ant-design-vue';
	import { useCommon } from '@/hooks/useCommon';
	import * as htmlDocx from "html-docx-js-typescript";
	import { saveAs } from 'file-saver'
	let { store, commomParams, hideOtherModal1, openOtherModel_1, imageprefix } = useCommon();
	const emit = defineEmits();
	let props = defineProps(['detail_record']);
	let detailTitle = ref<String>('')
	let detail = ref<Object>({})
	let trainList = ref<Object[]>([])
	let experienceList = ref<Object[]>([])
	let introduction = ref<Object>({})
	let spinning = ref<Boolean>(false); // 加载中

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

	const exportToWord = async () => {
		const htmlContent = document.getElementById('export-container'); // 获取需要转换的HTML内容
		const convertedFile = htmlDocx.asBlob(htmlContent?.outerHTML!);
		const fileData = await convertedFile
		saveAs((fileData as Blob), detail.value.seekername + '个人简历.docx')
	}

	watch(() => [props.detail_record], (newVal) => {
		if (newVal[0]) {
			spinning.value = false
			GetJobseekerDetail({ customer_id: props.detail_record.customer_id, application_id: props.detail_record.id }).then(res => {
				detail.value = res.data
				detail.value.photo = imageprefix + detail.value.photo
			})
		}
	}, { immediate: true })

	const cancelModal = () => {
		hideOtherModal1()
	}
</script>

<style lang="less" scoped>
	.a-row:first-child {
		border-bottom: none;
		border-radius: 10px 10px 0 0;
	}

	.a-row:last-child {
		border-radius: 0 0 10px 10px;
	}

	.a-row {
		padding: 6px;
		border: 1px #f0f0f0 solid;

		.a-col:first-child {}
	}

	.a-col {
		padding: 6px;
		// padding-top: 6px;
	}


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

	.export-container {}

	// 导出简历
	.resume-word {}

	.resume-word-title {
		width: 100%;
		text-align: center;

	}

	.resume-word-item {
		width: 100%;
	}

	.resume-word-item-title {
		position: relative;
		display: inline-block;
		overflow: hidden;
	}

	.resume-word-item-title::before {
		content: '';
		width: 6px;
		height: 22px;
		background-color: #4FBE70;
		position: absolute;
		top: 6px;
	}

	.resume-word-item-title-content {
		position: relative;
		margin: 0;
		margin-left: 20px;
	}

	.resume-word-item-content {
		table {
			width: 100%;
		}
	}
</style>