<template>
	<div style="overflow-y: auto">
		<!-- <img :src="images" style="width: 100%; height: 100%" /> -->
		<div>
			<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>
	</div>
</template>

<script setup>
	import { ref, computed, watch } from 'vue'
	import courseInfo from './components/courseInfo.vue'
	import courseProduction from './components/courseProduction/index.vue'
	import StudentDetails from './components/StudentDetails.vue'
	const activeKey = ref('1') // 默认选中的标签页
	const props = defineProps({
		courseInfoId: {
			type: String,
			default: null
		}
	})

	// 使用本地ref来存储courseInfoId，初始值从props获取
	const localCourseInfoId = ref(props.courseInfoId || null)

	// 监听props变化，更新本地状态
	watch(
		() => props.courseInfoId,
		(newVal) => {
			localCourseInfoId.value = newVal || null
		},
		{ immediate: true }
	)

	// 对外暴露的courseInfoId
	const courseInfoId = computed(() => localCourseInfoId.value)

	const nextStep = (id) => {
		console.log('nextStep', id)
		localCourseInfoId.value = id
		activeKey.value = '2'
	}
	// onMounted(() => {
	// })
</script>

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