<template>
	<!-- <div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 36px;">精选职位</div> -->
	<a-tabs v-model:activeKey="activeKey" @change="activeKeyChange" type="card">
		<a-tab-pane :key="1" tab="企业推荐">
			<div class="company-box">
				<a-row :gutter="[10,10]">
					<a-col v-for="(item, index) in companyList">
						<div style="color: #808080" @click="toCompanyDetail(item.id)"> {{item.full_name}}</div>
					</a-col>
				</a-row>
			</div>
		</a-tab-pane>
		<a-tab-pane :key="2" tab="见习基地" force-render>
			<div class="company-box">
				<a-row :gutter="[10,10]">
					<a-col v-for="(item, index) in companyList">
						<div style="color: #808080" @click="toCompanyDetail(item.id)"> {{item.full_name}}</div>
					</a-col>
				</a-row>
			</div>
		</a-tab-pane>
	</a-tabs>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted ,defineEmits} from 'vue';
	import { GetCompanyProbationList, GetCompanyFamousList } from '@/apis/models';
	import { router } from '@/router';
	const emit = defineEmits();
	let activeKey = ref<Number>(1);
	let companyList = ref<object[]>([])
	const activeKeyChange = (val) => {
		switch (val) {
			case 1:
				getCompanyProbationList()
				break;
			case 2:
				getCompanyFamousList()
				break;
		}

	}

	const getCompanyProbationList = () => {
		GetCompanyProbationList().then(res => {
			companyList.value = res.data.list
		})
	}

	const getCompanyFamousList = () => {
		GetCompanyFamousList().then(res => {
			companyList.value = res.data.list
		})
	}
	
	const toCompanyDetail = (val : Number) => {
		sessionStorage.setItem('tab_key', 1)
		sessionStorage.setItem('pubilc_id', val)
		sessionStorage.setItem('mode', 'detail')
		emit('detail')
	}
	


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

<style lang="less" scoped>
	.company-box {
		width: 100%;
		padding: 20px;
		background-color: #fff;
		cursor: pointer;
	}
</style>