<template>
	<job-search @searchData="searchData" @clearData="clearData" :search_params="commomParams.search"></job-search>
	<template v-if="!jobList || jobList.length == 0">
		<a-empty style="height: 100vh;">
			<template #description>
				无面试信息
			</template>
		</a-empty>
	</template>
	<template v-else>
		<a-row :gutter="[10,20]">
			<a-col span="8" v-for="(item, index) in jobList">
				<a-card hoverable :title="item.job_name" @click="detail(item.job_id)">
					<template #extra>
						<a-space v-if="item.view_status == 1">
							<a-button @click="rejectInterview(item.id)">拒绝面试</a-button>
							<a-button @click="receiveInterview(item.id)" type="primary">接受面试</a-button>
						</a-space>
						<div v-if="item.view_status == 2">
							<a-tag color="green">已接受此面试，请准时参加面试</a-tag>
						</div>
						<div v-if="item.view_status == 3">
							<a-tag color="red">已拒绝此面试</a-tag>
						</div>
					</template>
					<a-row>
						<a-col span="20">
							<div>面试时间：{{item.invite_date_txt}}</div>
							<div>面试结果：{{item.employ_status_txt}}</div>
							<div>面试企业：{{item.company_name}}</div>
						</a-col>
						<a-col span="4">
							<a-popover trigger="click" placement="right">
								<template #content>
									<job-detail v-if="detail_record" :detail_record="detail_record"></job-detail>
								</template>
								<a-button @click="detail(item.job_id)" type="primary">详情</a-button>
							</a-popover>
						</a-col>
					</a-row>
				</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>
	</template>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, defineEmits, createVNode } from 'vue';
	import { GetPersonInterviewList, PostPersonInterviewViewStatus } from '@/apis/models';
	import JobDetail from '@/components/jobseeker/invite/detail/index.vue'
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal, showOtherModal1 } = useCommon();
	const emit = defineEmits();
	let loading = ref<Boolean>(true);
	let jobList = ref([]);
	let total = ref<Number>(0)


	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: 12,
				sort: 'id',
				sortby: 'asc',
				keyword: ''
			}
		}
		getData();
	}


	const getPage = (page, pageSize) => {
		commomParams.value.search.page = page;
		commomParams.value.search.pagesize = pageSize;
		getData();
	}
	const getData = async () => {
		try {
			loading.value = true;
			let res = await GetPersonInterviewList(commomParams.value.search);
			loading.value = false;
			jobList.value = res.data.list;
			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 toDetail = (job_id : Number, company_id : Number) => {
	// 	sessionStorage.setItem('job_id', job_id)
	// 	sessionStorage.setItem('tab_key', 2)
	// 	sessionStorage.setItem('pubilc_id', company_id)
	// 	sessionStorage.setItem('mode', 'detail')
	// 	emit('detail')
	// }

	// 接受面试
	const receiveInterview = (id) => {
		Modal.confirm({
			title: `是否要接受面试`,
			centered: true,
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				PostPersonInterviewViewStatus({ id: id, view_status: 2 }).then(res => {
					successToast('已接受，请按时参加面试')
					getData();
				})
			},
			onCancel() {

			},
		});
	}

	// 拒绝面试
	const rejectInterview = (id, num) => {
		Modal.confirm({
			title: `是否要拒绝面试`,
			centered: true,
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				PostPersonInterviewViewStatus({ id: id, view_status: 3 }).then(res => {
					successToast('已拒绝')
					getData();
				})
			},
			onCancel() {

			},
		});
	}

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

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

<style lang="less" scoped>
	.job-box {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		// align-items: center;
		width: 100%;

		.job-title {
			padding: 20px;
			background-color: #ffffff;

			.aaaa {
				display: flex;
				justify-content: space-between;
			}
		}

		.job-company {
			padding: 20px;
			background-color: #cccccc;

			.aaaa {
				display: flex;
				justify-content: space-between;
			}
		}

	}

	.mt10 {
		margin-bottom: 10px;
	}
</style>