<template>
	<a-spin :spinning="spinning">
		<template v-if="!seekerList || seekerList.length == 0">
			<a-empty style="height: 100vh;">
				<template #description>
					无求职者信息
				</template>
			</a-empty>
		</template>
		<template v-else>
			<a-row :gutter="[20,20]">
				<a-col span="24" v-for="(item, index) in seekerList">
					<a-card>
						<div class="talent-box">
							<a-list>
								<a-list-item>
									<template #actions>
										<a-button @click="detail(item)">
											<StarOutlined />
											预览
										</a-button>
										<a-button @click="putInTatent(item.customer_id)">
											放入人才库
										</a-button>
										<a-button @click="interview(item)">
											邀请面试
										</a-button>
									</template>
									<a-list-item-meta>
										<template #title>
											{{item.seekername}}
										</template>
										<template #description>
											<div>
												{{item.gender}}
												<a-divider type="vertical" />
												{{item.education_text}}
												<a-divider type="vertical" />
												{{item.now_level1_text}}{{item.now_level2_text}}
											</div>
											<div style="margin-top: 10px; overflow: hidden;
										display: -webkit-box;
										-webkit-line-clamp: 1;
										-webkit-box-orient: vertical;
										text-overflow: ellipsis;">
												<div v-html="item.introduction"></div>
											</div>
										</template>
										<template #avatar>
											<image-container :need="true"
												:imgObj="{src: '/images/onlylogo.jpg',width: '48px',height:'48px'}"></image-container>

										</template>
									</a-list-item-meta>
								</a-list-item>
							</a-list>
						</div>
					</a-card>

				</a-col>
				<a-col span="24">
					<a-flex justify="center">
						<a-space>
							<a-pagination hideOnSinglePage :total="commomParams.page.total" @change="getPage" />
						</a-space>
					</a-flex>
				</a-col>
			</a-row>
			<a-modal v-model:open="openInterview" centered title="面试邀请" @ok="interviewOk">
				<a-space direction="vertical" style="width: 100%;">
					<a-select v-model:value="position_name" @change="positionChange" placeholder="请进行搜索选择职位" show-search
						:filter-option="false" label-in-value @search="positionSearch" size="large"
						style="width: 100%;">
						<a-select-option v-for="item in position_list" :key="item.id" :value="item.id"
							:label="item.name" label-in-value>{{item.name}}</a-select-option>
					</a-select>
					<a-date-picker v-model:value="time" @Change="timeChange" show-time style="width: 100%;"
						placeholder="请选择面试日期" size="large" :disabled-date="disabledDate" />
				</a-space>
			</a-modal>
			<resume-detail v-if="detail_record" :detail_record="detail_record"></resume-detail>
		</template>
	</a-spin>
</template>


<script setup lang="ts">
	import { ref, onMounted, computed, watch, defineEmits, createVNode } from 'vue';
	import ResumeDetail from '@/components/jobseeker/resume/detail/index.vue'
	import { PostJobseekerList, PostCompanyTalentPoolAdd, PostCompanyResumeInterviewAdd, PostCompanyJobList } from '@/apis/models';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, ExclamationCircleOutlined, Modal, dayjs, disabledDate, showOtherModal1 } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['search']);
	let seekerList = ref<object[]>([])
	let spinning = ref<Boolean>(true);


	const getPage = (data : object) => {
		commomParams.value.search.page = data.current;
		commomParams.value.search.pagesize = data.pageSize;
		getData();
	}
	const getData = async () => {
		try {
			spinning.value = true;
			let res = await PostJobseekerList(commomParams.value.search);
			spinning.value = false;
			seekerList.value = res.data.seekers;
			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 {
			spinning.value = false;
		}
	}


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

	let detail_record = ref<Object>(null)
	const detail = (record) => {
		detail_record.value = record;
		showOtherModal1()
	}

	// 邀请面试
	let openInterview = ref<Boolean>(false);
	let form = {
		job_id: '',
		customer_id: '',
		interview_date_time: ''
	}


	const interview = (record : Object) => {
		positionSearch('')
		console.log(record)
		openInterview.value = true
		form.job_id = '';
		form.customer_id = record.customer_id;
		form.interview_date_time = ''
		time.value = '';
		position_name.value = null;
	}
	// 选择职位
	let position_list = ref<Object[]>([])
	let position_name = ref<String>(null)
	const positionSearch = (val) => {
		PostCompanyJobList({ keyword: val }).then(res => {
			position_list.value = res.data.list;
		})
	}
	const positionChange = (val : Object) => {
		position_name.value = val.option.label;
		form.job_id = Number(val.key);
	}
	let time = ref<String>('');
	const timeChange = (val) => {
		form.interview_date_time = dayjsRef.value(val).format('YYYY-MM-DD HH:mm:ss');
	}

	const interviewOk = () => {
		console.log(form)
		if (!form.interview_date_time) {
			warnToast('请选择面试时间')
			return;
		} else {
			PostCompanyResumeInterviewAdd(form).then(res => {
				successToast('已发送邀请')
				openInterview.value = false
				getData();
			})
		}

	}



	// 放入人才库
	const putInTatent = (id) => {
		Modal.confirm({
			title: `是否要放入人才库`,
			centered: true,
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				PostCompanyTalentPoolAdd({ customer_id: id }).then(res => {
					successToast('已放入人才库')
					getData();
				})
			},
			onCancel() {

			},
		});
	}

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

	watch(() => [props.search], (newVal) => {
		if (newVal[0]) {
			commomParams.value.search = newVal[0];
		}
		getData();
	}, { immediate: true })
</script>

<style scoped lang="less">

</style>