<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="证书名称" name="name">
						<a-input v-model:value="createForm.name" placeholder="请输入证书名称" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item  label="证书描述" name="description">
						<a-input v-model:value="createForm.description" placeholder="请输入证书描述" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item label="上传证书" name="photo">
						<upload upload_txt="上传证书" @uploadSuccess="uploadPhotoSuccess"
							:success_image="addOtherForm.photo_img" images_length="1" image_type="3"></upload>
					</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="certificateList">
			<template #loadMore v-if="certificateList.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.name" style="width: 100%">
							<template #extra>
								<a-space>
									<a-button @click="toEdit(item)" 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.description}}</p>
							<image-container
								:imgObj="{src: item.certificate_photo ,width: '150px',height:'210px'}"></image-container>
						</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 { PostJobapplicantAddcertificate, PostJobapplicantDelcertificate, PostJobapplicantUpdatecertificate, PostJobapplicantListcertificate, PostJobapplicantCertificatedetail } from '@/apis/models';
	import Upload from '@/components/form/upload.vue';
	import { intersectionAlike } from '@/utils/dataHelper';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { dataForm, otherDataForm, reset } from '@/components/jobseeker/resume/credential/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal, imageprefix } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['form_state']);
	const emit = defineEmits();
	let state = ref<Boolean>(false)
	let loading = ref<Boolean>(true);
	let certificateList = ref([]);
	let createForm = ref<JobseekerCredentialType.JobseekerCredentialFormType>(dataForm)
	let addOtherForm = ref<JobseekerCredentialType.OtherFormType>(otherDataForm)




	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 PostJobapplicantListcertificate(commomParams.value.search);
			loading.value = false;
			// if(!res.data.jobapplicantexperiences ||  res.data.jobapplicantexperiences.length <= 0) {
			// 	warnToast('无更多数据')
			// }
			res.data.jobapplicantcertificates.map(item => {
				item.certificate_photo = imageprefix + item.certificate_photo
			})
			certificateList.value = res.data.jobapplicantcertificates ? certificateList.value.concat(res.data.jobapplicantcertificates) : certificateList.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) => {
		PostJobapplicantCertificatedetail({ id: val, customer_id: sessionStorage.getItem('id') }).then(res => {
			createForm.value = intersectionAlike(createForm.value, res.data)
			createForm.value.id = res.data.id;
			addOtherForm.value = {
				photo_img: imageprefix + res.data.certificate_photo
			}
		})
	}


	const uploadPhotoSuccess = (data : Object) => {
		addOtherForm.value.photo_img = imageprefix + data
		createForm.value.certificate_photo = data
	}

	const saveForm = () => {
		if (createForm.value.id) {
			PostJobapplicantUpdatecertificate(createForm.value).then(res => {
				successToast('保存成功');
				resetForm()
			}).catch(err => {
			})
		} else {
			PostJobapplicantAddcertificate(createForm.value).then(res => {
				successToast('保存成功');
				resetForm()
			}).catch(err => {
			})
		}
	}



	const resetForm = () => {
		certificateList.value = [];
		createForm.value = reset().dataForm as JobseekerCredentialType.JobseekerCredentialFormType;
		addOtherForm.value = reset().otherDataForm as r.OtherFormType;
		state.value = false;
		getData();
		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 };
		PostJobapplicantDelcertificate(commomParams.value.delParam).then(res => {
			successToast('删除成功');
			certificateList.value = [];
			getData();
		})
	}
</script>



<style scoped>
	:deep(.ant-list-item:last-child) {
		border-block-end: none !important;
	}
</style>