<template>
	<div class="content-padding-inline" style="margin: 30px 0;">
		<a-row :gutter="[10,10]" type="flex" justify="center">
			<a-col span="18">
				<a-row :gutter="20">
					<a-col span="4">
						<common-left-sider :menu_list="menu_list" :selected_key="selectedKey"
							@changeKey="changeKey"></common-left-sider>
					</a-col>
					<a-col span="20">
						<div style="width: 100%;background-color: #fff;padding: 20px;border-radius: 10px;">
							<resume-search v-if="curKey == 1" @searchData="searchData"></resume-search>
							<a-tabs v-model:activeKey="activeKey" @change="activeKeyChange" v-if="curKey == 2"
								type="card">
								<a-tab-pane :key="1" tab="推荐人才">
									<resume-result v-if="activeKey == 1" :search="searchParams"></resume-result>
								</a-tab-pane>
								<a-tab-pane :key="2" tab="最新简历" force-render>
									<resume-result v-if="activeKey == 2" :search="searchParams"></resume-result>
								</a-tab-pane>
							<!-- 	<a-tab-pane :key="3" tab="应届毕业生">
									<resume-result v-if="activeKey == 3" :search="searchParams"></resume-result>
								</a-tab-pane> -->
							</a-tabs>
						</div>
					</a-col>
				</a-row>
			</a-col>
		</a-row>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import ResumeSearch from '@/components/company/search/index.vue'
	import ResumeResult from '@/components/company/result/index.vue'
	let menu_list = ref([{ title: '简历搜索', key: 1 }, { title: '简历列表', key: 2 }])
	let curKey = ref<Number>(2)
	let activeKey = ref<Number>(1);
	let searchParams = ref<any>(null)
	let selectedKey = ref<Number[]>([2]);
	

	const changeKey = (data) => {
		curKey.value = data.key;
	}

	const searchData = (data) => {
		selectedKey.value = [2]
		curKey.value = 2;
		searchParams.value = data;
		if(activeKey.value == 2) {
			searchParams.value.sortby = 'desc'
		}
	}
</script>

<style scoped>
	:deep(.ant-tabs-tab-btn) {
		color: #4FBE70 !important;
	}
</style>