<template>
	<job-search @searchData="searchData" @clearData="clearData" :search_params="commomParams.search"
		:mode="mode"></job-search>
	<template v-if="mode == 1">
		<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>
						<a-flex vertical
							style="width: 100%;background-color: #fff;border-radius: 10px;padding: 20px;border-radius: 8px;">
							<a-space direction="vertical" :size="10">
								<a-flex justify="space-between" style="width: 100%;">
									<div style="font-size: 18px; font-weight: 600;"
										@click="toDetail(item.id, item.company_id)">{{item.name}}</div>
									<div style="color: #4FBE70;">{{item.pay_range_text}}</div>
								</a-flex>
								<a-flex style="width: 100%;">
									<a-tag>{{item.experience_text ? item.experience_text : '不限'}}</a-tag>
									<a-tag>{{item.certification_text ? item.certification_text : '不限'}}</a-tag>
									<a-tag>{{item.school_degree_text ? item.school_degree_text : '不限'}}</a-tag>
									<a-tag>{{item.profelevel_text ? item.profelevel_text : '不限'}}</a-tag>
								</a-flex>
							</a-space>
							<a-divider />
							<a-space direction="vertical">
								<a-flex justify="space-between" style="width: 100%;">
									<div style="font-weight: 600;" @click="toCompanyDetail(item.company_id)">
										{{item.full_name}}</div>
									<a-button type="primary" size="small"
										@click="toDetail(item.id, item.company_id)">查看详情</a-button>
								</a-flex>
								<a-flex style="width: 100%;color: #bebebe;">
									{{item.locations ? item.locations[0].name : '未知地址'}}
								</a-flex>
							</a-space>
						</a-flex>
					</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>
	<template v-if="mode == 2">
		<template v-if="!companyList || companyList.length == 0">
			<a-empty style="height: 100vh;">
				<template #description>
					无职位信息
				</template>
			</a-empty>
		</template>
		<template v-else>
			<a-row :gutter="[10,10]">
				<a-col span="8" v-for="(item, index) in companyList">
					<a-card hoverable style="width: 100%;" @click="toCompanyDetail(item.id)">
							<template #title>
								<div style="margin: 16px 0;">
									<a-space direction="vertical" :size="10">
										<a-space>
											<image-container :need="true"
												:imgObj="{src: '/images/onlylogo.jpg',width: '48px',height:'48px'}"></image-container>
											<span style="font-size: 16px;">
												{{item.full_name ? item.full_name : '企业'}}
											</span>
										</a-space>
									</a-space>
								</div>
							</template>
							<template #extra>
								{{item.scale_text}}
							</template>
							<div style="margin: 16px;">
								<a-space direction="vertical" :size="2" style="width: 100%;">
									<div>企业性质：{{item.nature_text}}</div>
									<div>招聘类型：{{item.industry_text}} {{item.industry2_text}}</div>
								</a-space>
							</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>
		</template>

	</template>


	<!-- 企业显示 -->
	<!-- <a-tabs v-model:activeKey="activeKey">
		<a-tab-pane key="1" tab="推荐人才">
			<a-row :gutter="[10,10]">
				<a-col span="12" v-for="(item, index) in companyList">
					<job-talents></job-talents>
				</a-col>
			</a-row>
			<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 24px;">查看更多
			</div>
			<a-row :gutter="[10,10]">
				<a-col span="24" v-for="(item, index) in companyList">
					<job-talents></job-talents>
				</a-col>
				<a-col span="24">
					<a-pagination v-model:current="current" :total="500" style="text-align: center;" />
				</a-col>
			</a-row>
		</a-tab-pane>
		<a-tab-pane key="2" tab="最新简历" force-render>Content of Tab Pane 2</a-tab-pane>
		<a-tab-pane key="3" tab="应届毕业生">Content of Tab Pane 3</a-tab-pane>
	</a-tabs> -->
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, defineEmits } from 'vue';
	import JobSearch from '@/components/job/search/index.vue'
	import JobCard from '@/components/job/card/index.vue'
	import JobTalents from '@/components/job/talents/index.vue'
	import { PostJobSearch, GetCompanyDepartmentList, PostCompanyDepartmentDel, PostCompanyDepartmentEdit, PosCompanySearch } from '@/apis/models';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal } = useCommon();
	const emit = defineEmits();
	let loading = ref<Boolean>(true);
	let jobList = ref([]);
	let companyList = ref([]);
	let total = ref<Number>(0)
	let mode = ref<Number>(1)


	const searchData = (data : object) => {
		commomParams.value.search = data.search
		mode.value = data.mode;
		jobList.value = []
		companyList.value = []
		getData();
	}

	const clearData = (data : object) => {
		if (data) {
			commomParams.value.search = data.search
			mode.value = data.mode;
			jobList.value = []
			companyList.value = []
		} 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 = 12;
		getData();
	}
	const getData = async () => {
		try {
			loading.value = true;
			if (mode.value == 1) {
				let res = await PostJobSearch(commomParams.value.search);
				loading.value = false;
				jobList.value = res.data.jobs;
				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
				};
			} else {
				let res = await PosCompanySearch(commomParams.value.search);
				loading.value = false;
				companyList.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 toCompanyDetail = (company_id : Number) => {
		sessionStorage.setItem('tab_key', 1)
		sessionStorage.setItem('pubilc_id', company_id)
		sessionStorage.setItem('mode', 'detail')
		emit('detail')
	}



	onMounted(() => {
		commomParams.value.search.pagesize = 12
		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>