<template>
	<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 36px;">精选职位</div>
	 <a-tabs v-model:activeKey="activeKey">
	    <a-tab-pane key="1" tab="最新招聘">
			<a-row :gutter="[10,10]">
				<a-col span="8" v-for="(item, index) in companyList">
					<div class="job-box">
						<div class="job-title">
							<div class="aaaa mt10">
								<div>前端工程师</div>
								<div>5000-7000元</div>
							</div>
							<div>
								<a-tag>Tag 1</a-tag>
								<a-tag>Tag 1</a-tag>
								<a-tag>Tag 1</a-tag>
								<a-tag>Tag 1</a-tag>
							</div>
						</div>
						<div class="job-company">
							<div class="aaaa mt10">
								<div>中山市海港城安域有限公司</div>
								<div>查看更多</div>
							</div>
							<div>
								小榄镇
							</div>
						</div>
					</div>
				</a-col>
			</a-row>
			<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 24px;">查看更多</div>
		</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-tab-pane key="3" tab="校园招聘">Content of Tab Pane 3</a-tab-pane>
	  </a-tabs>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	let companyList = ref<object[]>([{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}])
	let data1 = ref([])
	let data2 = ref([])
	let showData = ref(false)
	onMounted(() => {
		if (companyList.value.length > 9) {
			companyList.value = companyList.value.slice(0, 9)
		
		} else {
			data1.value = companyList.value;
			showData.value = false;
		}
	})
</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>