<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-space>
									</a-row>
								</a-col>
								<a-col span="6">
									<image-container :need="true"
										:imgObj="{src: detail.photo? imageprefix+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 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.salary_range_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-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';
	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;
	})


	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
				console.log(detail.value)
			})
		}
	}, { 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;
	}
</style>