<template>
	<a-typography style="margin-top: 36px;">
		<a-flex justify="center">
			<a-space :size="50">
				<a-typography-title>精选职位</a-typography-title>
			</a-space>
		</a-flex>
		<a-typography-paragraph>
			<a-tabs v-model:activeKey="activeKey" @change="activeKeyChange" type="card">
				<a-tab-pane :key="1" tab="最新招聘">
					<job-list :list="jobList"></job-list>
				</a-tab-pane>
				<a-tab-pane :key="2" tab="急招职位" force-render> <job-list :list="jobList"></job-list></a-tab-pane>
				<a-tab-pane :key="3" tab="高薪职位"> <job-list :list="jobList"></job-list></a-tab-pane>
				<a-tab-pane :key="4" tab="校园招聘"> <job-list :list="jobList"></job-list></a-tab-pane>
			</a-tabs>
		</a-typography-paragraph>
	</a-typography>

</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import { GetJobNewest, GetJobUrgentjobs, GetJobHighpayjobs, GetJobCampusjobs } from '@/apis/models';
	import JobList from '@/components/job/home/choiceness-job/job-list.vue'
	let activeKey = ref<Number>(1);
	let jobList = ref<object[]>([])
	let showData = ref(false)
	const activeKeyChange = (val) => {
		switch (val) {
			case 1:
				getNew()
				break;
			case 2:
				getJobUrgentjobs()
				break;
			case 3:
				getJobHighpayjobs()
				break;
			case 4:
				getJobCampusjobs()
				break
		}

	}

	const getNew = () => {
		GetJobNewest().then(res => {
			sliceData(res.data.jobs)
		})
	}

	const getJobUrgentjobs = () => {
		GetJobUrgentjobs().then(res => {
			sliceData(res.data.jobs)
		})
	}

	const getJobHighpayjobs = () => {
		GetJobHighpayjobs().then(res => {
			sliceData(res.data.jobs)
		})
	}

	const getJobCampusjobs = () => {
		GetJobCampusjobs().then(res => {
			sliceData(res.data.jobs)
		})
	}

	const sliceData = (val) => {
		if (val.length > 9) {
			jobList.value = val.slice(0, 9)
		} else {
			jobList.value = val;
			showData.value = false;
		}
	}

	onMounted(() => {
		getNew()
	})
</script>

<style lang="less" scoped>
	
</style>