<template>
	<div class="content-padding-inline" style="margin-top: 30px;">
		<a-row :gutter="[10,10]" type="flex" justify="center">
			<a-col span="18">
				<a-row>
					<a-col span="4">
						<common-left-sider :menu_list="menu_list" v-model:selectedKeys="selectedKeys"
							@changeKey="changeKey"></common-left-sider>
					</a-col>
					<a-col span="20">
						<div  style="width: 100%;background-color: #fff;padding: 10px;">
							<invite-position :job_id="job_id" v-if="curKey == 1" @currentMenuKey="currentMenuKey"></invite-position>
							<invite-manage v-if="curKey == 2" @toEdit="toEdit"></invite-manage>
							<invite-recycle v-if="curKey == 3"></invite-recycle>
						</div>
					</a-col>
				</a-row>
			</a-col>
		</a-row>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import InvitePosition from '@/components/invite/position/index.vue'
	import InviteManage from '@/components/invite/manage/index.vue'
	import InviteRecycle from '@/components/invite/recycle/index.vue'
	let menu_list = ref([{ name: '发布招聘', key: 1 }, { name: '招聘职位管理', key: 2 }, { name: '招聘回收站', key: 3 }])
	let curKey = ref<Number>(1)
	let selectedKeys = ref<Number[]>([1])
	
	const changeKey = (data) => {
		curKey.value = data.key;
	}
	let job_id = ref<Number>(0)
	const toEdit = (data) => {
		curKey.value = 1;
		console.log(data.record.id)
		job_id.value = data.record.id
	}
	const currentMenuKey = (data) => {
		curKey.value = 2;
		selectedKeys.value = [2]
	}
</script>

<style>
</style>