<template>
	<a-tabs v-model:activeKey="activeKey">
		<a-tab-pane key="1" tab="职位信息">
			<position-info :job_detail="jobDetail" @saveSuccess="saveSuccessInfo"></position-info>
		</a-tab-pane>
		<a-tab-pane key="2" tab="职位要求" force-render>
			<position-demand :job_detail="jobDetail" @saveSuccess="saveSuccessDemand"></position-demand>
		</a-tab-pane>
		<a-tab-pane key="3"  tab="联系方式">
			<position-contact :job_detail="jobDetail" @saveSuccess="saveSuccessContact"></position-contact>
		</a-tab-pane>
	</a-tabs>
</template>

<script setup lang="ts">
	import { ref, onMounted, watch, defineProps, defineEmits } from 'vue';
	import PositionInfo from '@/components/invite/position/info.vue'
	import PositionDemand from '@/components/invite/position/demand.vue'
	import PositionContact from '@/components/invite/position/contact.vue'
	import { GetCompanyJobInfo } from '@/apis/models';
	const props = defineProps(['job_id']);
	const emit = defineEmits();
	const jobDetail = ref<object>(null);
	watch(() => [props.job_id], (newVal : string[], oldVal) => {
		if(newVal[0]) {
			GetCompanyJobInfo({id: newVal[0]}).then(res => {
				jobDetail.value = res.data
			})
		}
	}, { immediate: true })


	const activeKey = ref<String>('1');

	const saveSuccessInfo = (data) => {
		activeKey.value = data.key;
	}

	const saveSuccessDemand = (data) => {
		activeKey.value = data.key;
	}
	
	const saveSuccessContact = () => {
		emit('currentMenuKey', {key : 2})
	}
</script>

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