<template>
	<div style="overflow-y: auto">
		<!-- <img :src="images" style="width: 100%; height: 100%" /> -->
		<a-layout>
			<Header @onChangeCurrent="onChangeCurrent" />
			<div style="width: 71%; margin-left: 10%">
				<a-tabs v-model:activeKey="activeKey" type="card">
					<a-tab-pane key="1" tab="教室信息">
						<courseInfo :courseInfoId="courseInfoId" @nextStep="nextStep" />
					</a-tab-pane>
					<a-tab-pane key="2" tab="课程制作" :disabled="courseInfoId==null">
						<courseProduction :courseInfoId="courseInfoId" />
					</a-tab-pane>
					<a-tab-pane key="3" tab="学员管理" :disabled="courseInfoId==null">
						<StudentDetails :courseInfoId="courseInfoId"></StudentDetails>
					</a-tab-pane>
<!--					<a-tab-pane key="4" tab="作业布置" :disabled="courseInfoId==null">-->
<!--						<div>这里是作业布置的内容</div>-->
<!--					</a-tab-pane>-->
<!--					<a-tab-pane key="5" tab="测试布置" :disabled="courseInfoId==null">-->
<!--						<div>这里是测试布置的内容</div>-->
<!--					</a-tab-pane>-->
				</a-tabs>
			</div>
		</a-layout>
		<Footer />
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import Header from '@/views/portal/components/Header.vue'
	import Footer from '@/views/portal/components/Footer.vue'
	import courseInfo from './components/courseInfo.vue'
	import courseProduction from './components/courseProduction/index.vue'
	import StudentDetails from './components/StudentDetails.vue'
	import { useRoute, useRouter } from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	const activeKey = ref('1') // 默认选中的标签页
	const courseInfoId = ref(route.query.id || null) // 编辑课程信息id
	const nextStep = (id) => {

		courseInfoId.value = id
		activeKey.value = '2'
	}
	const onChangeCurrent = (current) => {
		router.push({
			path: '/' + current
		})
	}
	// onMounted(() => {
	// })
</script>

<style scoped>
	/* 自定义样式 */
</style>
