<template>
	<template v-if="state">
		<a-form :model="createForm" layout="vertical" class="resume-form">
			<a-row :gutter="20">
				<a-col span="12">
					<a-form-item label="工作时间">
						<a-range-picker v-model:value="time" @Change="getRange" picker="month" size="large"
							style="width: 100%;" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item label="是否至今">
						<a-radio-group v-model:value="createForm.end_today" button-style="solid" size="large"
							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 label="公司名称" name="company_name">
						<a-input v-model:value="createForm.company_name" placeholder="请输入公司名称" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item label="职位" name="position">
						<a-input v-model:value="createForm.position" placeholder="请输入职位" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item label="离职原因" name="reason_for_leaving">
						<a-input v-model:value="createForm.reason_for_leaving" placeholder="请输入离职原因" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-flex justify="flex-end">
						<a-space>
							<a-button @click="resetForm" size="large">取消</a-button>
							<a-button type="primary" @click="saveForm" size="large">保存</a-button>
						</a-space>
					</a-flex>
				</a-col>
			</a-row>
		</a-form>
	</template>
	<template v-else>
		<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 }">
				<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 @click="toEdit(item)" type="primary" size="small">
										编辑
									</a-button>
									<a-popconfirm title="是否删除该经历" @confirm="del(item.id)">
										<a-button size="small" danger>
											删除
										</a-button>
									</a-popconfirm>
								</a-space>
							</template>
							<p>工作角色：{{item.position}}</p>
							<p>工作时间：{{item.start_year}}.{{item.start_month}}至{{item.end_year}}.{{item.end_month}}</p>
							<p>离职原因：{{item.reason_for_leaving}}</p>
						</a-card>
					</a-skeleton>
				</a-list-item>
			</template>
		</a-list>
	</template>
</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 '@/components/jobseeker/resume/experience/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['form_state']);
	const emit = defineEmits();
	let state = ref<Boolean>(false)
	let loading = ref<Boolean>(true);
	let experienceList = ref([]);
	let createForm = ref<JobseekerExperienceType.JobseekerExperienceFormType>(dataForm)
	let time = ref('')

	onMounted(() => {
		getData();
	})

	const searchData = (data : object) => {
		commomParams.value.search = data
		getData();
	}

	const clearData = (data : object) => {
		if (data) {
			commomParams.value.search = data
		} else {
			commomParams.value.search = {
				page: 1,
				pagesize: 10,
				sort: 'id',
				sortby: 'asc',
				keyword: ''
			}
		}
		getData();
	}


	const getPage = (data : object) => {
		commomParams.value.search.page = data.current;
		commomParams.value.search.pagesize = data.pageSize;
		getData();
	}
	const getData = async () => {
		try {
			loading.value = true;
			let res = await PostJobapplicantListexperience(commomParams.value.search);
			loading.value = false;
			// if(!res.data.jobapplicantexperiences ||  res.data.jobapplicantexperiences.length <= 0) {
			// 	warnToast('无更多数据')
			// }
			experienceList.value = res.data.jobapplicantexperiences ? experienceList.value.concat(res.data.jobapplicantexperiences) : experienceList.value.concat([]);
			commomParams.value.page = {
				current: commomParams.value.search.page,
				pageSize: commomParams.value.search.pagesize,
				total: res.data.total,
				pageSizeOptions: ['10', '20', '30', '40'],
				hideOnSinglePage: false,
				showSizeChanger: true
			};
		} catch {
			loading.value = false;
		}
	}


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

	// 详情
	const getDetail = (val) => {
		PostJobapplicantExperiencedetail({ id: val, customer_id: sessionStorage.getItem('id') }).then(res => {
			createForm.value = intersectionAlike(createForm.value, res.data)
			createForm.value.id = res.data.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 = () => {
		if (createForm.value.id) {
			PostJobapplicantUpdateexperience(createForm.value).then(res => {
				successToast('保存成功');
				resetForm()
			}).catch(err => {
			})
		} else {
			PostJobapplicantAddexperience(createForm.value).then(res => {
				successToast('保存成功');
				resetForm()
			}).catch(err => {
			})
		}
	}

	const resetForm = () => {
		experienceList.value = [];
		time.value = ''
		createForm.value = reset().dataForm as JobseekerExperienceType.JobseekerExperienceFormType;
		getData();
		state.value = false;
		emit("quitEdit")
	}

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

	const toEdit = (item : Object) => {
		createForm.value.id = item.id;
		getDetail(createForm.value.id)
		emit("editEdit")
	}

	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:last-child) {
		border-block-end: none !important;
	}
</style>