<template>
	<a-button type="primary" @click="addForm()">添加工作经历</a-button>
	<a-list :data-source="experienceList">
		<template #loadMore v-if="experienceList.length > 0">
			<a-flex justify="center">
				<a-space>
					<div v-if="!loading">
						<a-button @click="onLoadMore">加载更多</a-button>
					</div>
				</a-space>
			</a-flex>
		</template>
		<template #renderItem="{ item, index }">
			<a-list-item>
				<a-skeleton avatar :title="false" :loading="!!loading" active>
					<a-card :title="item.company_name" style="width: 100%">
						<template #extra>
							<a-space>
								<a-button v-if="item.id" @click="toEdit(item, index)" type="primary" size="small">
									编辑
								</a-button>
								<a-popconfirm title="是否删除该经历" @confirm="del(item.id)">
									<a-button v-if="item.id" size="small" danger>
										删除
									</a-button>
								</a-popconfirm>
							</a-space>
						</template>
						<a-form :model="createForm" layout="vertical" v-if="item.edit"  class="resume-form">
							<a-row :gutter="20">
								<a-col span="12">
									<a-form-item required label="工作时间">
										<a-range-picker v-model:value="time" @Change="getRange" picker="month"
											style="width: 100%;" />
									</a-form-item>
								</a-col>
								<a-col span="12">
									<a-form-item  required label="是否至今">
										<a-radio-group v-model:value="createForm.end_today" button-style="solid"
											style="width: 100%;">
											<a-radio-button :value="1" style="width: 50%;">非至今</a-radio-button>
											<a-radio-button :value="2" style="width: 50%;">至今</a-radio-button>
										</a-radio-group>
									</a-form-item>
								</a-col>
								<a-col span="12">
									<a-form-item  required label="公司名称" name="company_name">
										<a-input v-model:value="createForm.company_name" placeholder="请输入公司名称" />
									</a-form-item>
								</a-col>
								<a-col span="12">
									<a-form-item  required label="职位" name="position">
										<a-input v-model:value="createForm.position" placeholder="请输入职位" />
									</a-form-item>
								</a-col>
								<a-col span="12">
									<a-form-item  required label="离职原因" name="reason_for_leaving">
										<a-input v-model:value="createForm.reason_for_leaving" placeholder="请输入离职原因" />
									</a-form-item>
								</a-col>
								<a-col span="24">
									<a-flex justify="flex-end">
										<a-space>
											<a-button @click="resetForm(index)">取消</a-button>
											<a-button type="primary" @click="saveForm(index)">保存</a-button>
										</a-space>
									</a-flex>
								</a-col>
							</a-row>
						</a-form>
						<template v-else>
							<p>工作角色：{{item.position}}</p>
							<p>工作时间：{{item.start_year}}.{{item.start_month}}至{{item.end_year}}.{{item.end_month}}</p>
							<p>离职原因：{{item.reason_for_leaving}}</p>
						</template>
					</a-card>
				</a-skeleton>
			</a-list-item>
		</template>
	</a-list>

</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits, createVNode } from 'vue';
	import { PostJobapplicantAddexperience, PostJobapplicantDelexperience, PostJobapplicantUpdateexperience, PostJobapplicantListexperience, PostJobapplicantExperiencedetail } from '@/apis/models';
	import { intersectionAlike } from '@/utils/dataHelper';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { dataForm, otherDataForm, reset } from '@/views/jobSeeker/resume/add/experience/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['customer_record']);
	const emit = defineEmits();
	let loading = ref<Boolean>(true);
	let experienceList = ref([]);
	let createForm = ref<JobseekerExperienceType.JobseekerExperienceFormType>(dataForm)
	let time = ref('')

	onMounted(() => {
		commomParams.value.search.customer_id = props.customer_record.customer_id
		getData();
	})


	const getPage = (data : object) => {
		commomParams.value.search.page = data.current;
		commomParams.value.search.pagesize = data.pageSize;
		getData();
	}
	const getData = async () => {
		try {
			let res = await PostJobapplicantListexperience(commomParams.value.search);
			loading.value = false;
			if (!res.data.jobapplicantexperiences || res.data.jobapplicantexperiences.length <= 0) {
				warnToast('无更多数据')
				commomParams.value.search.page = 1
			}
			experienceList.value = res.data.jobapplicantexperiences ? experienceList.value.concat(res.data.jobapplicantexperiences) : experienceList.value.concat([]);
			experienceList.value.map(item => {
				return item.edit = false
			})
		} catch {
			loading.value = false;
		}
	}


	const onLoadMore = () => {
		commomParams.value.search.page = commomParams.value.search.page + 1;
		getData();
	}

	const addForm = () => {
		experienceList.value.unshift({ edit: true })
		createForm.value.customer_id = props.customer_record.customer_id;
	}


	// 详情
	const getDetail = (val) => {
		PostJobapplicantExperiencedetail({ id: val.id, customer_id: val.customer_id }).then(res => {
			createForm.value = intersectionAlike(createForm.value, res.data)
			createForm.value.id = res.data.id;
			createForm.value.customer_id = res.data.customer_id;
			time.value = [dayjsRef.value(`${res.data.start_year}-${res.data.start_month}`), dayjsRef.value(`${res.data.end_year}-${res.data.end_month}`)]
		})
	}


	const getRange = (val) => {
		let day1 = dayjsRef.value(val[0]).format('YYYY-MM-DD').split('-');
		let day2 = dayjsRef.value(val[1]).format('YYYY-MM-DD').split('-');
		createForm.value.start_year = parseInt(day1[0], 10);
		createForm.value.start_month = parseInt(day1[1], 10);
		createForm.value.end_year = parseInt(day2[0], 10);
		createForm.value.end_month = parseInt(day2[1], 10);
	}

	const saveForm = (index : Number) => {
		if (createForm.value.id) {
			PostJobapplicantUpdateexperience(createForm.value).then(res => {
				successToast('保存成功');
				resetForm(index)
			}).catch(err => {
			})
		} else {
			PostJobapplicantAddexperience(createForm.value).then(res => {
				successToast('保存成功');
				resetForm(index)
			}).catch(err => {
			})
		}

	}

	const resetForm = (index : Number) => {
		experienceList.value = [];
		time.value = ''
		createForm.value = reset().dataForm as JobseekerExperienceType.JobseekerExperienceFormType;
		getData();
	}

	// watch(() => [props.form_state], (newVal) => {
	// 	state.value = newVal[0];
	// })

	const toEdit = (item : Object, index : Number) => {
		createForm.value.id = item.id;
		getDetail(item)
		experienceList.value[index].edit = true
	}

	const del = (id : number) => {
		commomParams.value.delParam = { id: id };
		PostJobapplicantDelexperience(commomParams.value.delParam).then(res => {
			successToast('删除成功');
			experienceList.value = [];
			getData();
		})
	}
</script>


<style scoped>
	:deep(.ant-list-item) {
		padding: 12px 0 !important;
		border-block-end: none !important;
	}
</style>