<template>
	<div style="overflow-y: auto">
		<a-layout>
			<Header @onChangeCurrent="onChangeCurrent" />
			<div style="width: 71%; margin-left: 10%">
				<QueryView style="margin-top: 10px" @handlerSearch="handlerSearch"></QueryView>
				<!-- 新建课程按钮 -->
				<a-button style="margin-top: 10px" type="primary" @click="handleNewCourse">
					<template #icon>
						<PlusOutlined />
					</template>
					新建课程
				</a-button>
				<div style="height: 10px"></div>
				<ListView ref="listViewRef" style="margin-top: 10px" @handleEdit="handleEdit"></ListView>
			</div>
		</a-layout>
		<Footer />
		<DialogView ref="dialogViewRef"></DialogView>
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { PlusOutlined } from '@ant-design/icons-vue'
	import tool from '@/utils/tool'
	import Header from '@/views/portal/components/Header.vue'
	import Footer from '@/views/portal/components/Footer.vue'
	import QueryView from './components/QueryView.vue'
	import ListView from './components/ListView.vue'
	import DialogView from './components/DialogView.vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	//发布按钮状态
	const releaseVisible = ref(false)
	const loading = ref(false) // 列表loading

	const isState = ref(0) // 列表loading
	const listViewRef = ref(null)
	const dialogViewRef = ref(null)

	// 搜索值
	const searchValue = ref('')
	const open = ref(false)

	const handleNewCourse = () => {
		console.log('新建课程111')
		// 在这里添加新建课程的逻辑
		// dialogViewRef.value.open()

		router.push({
			path: '/portal/courseAdd'
		})
	}
	const handlerSearch = (data) => {
		console.log('新建课程')
		// 在这里添加新建课程的逻辑
		listViewRef.value.setList(data)
	}
	const handleEdit = (item) => {
		router.push({
			path: '/portal/courseAdd',
			query: {
				id: item.courseId
			}
		})
	}

	const pagination = reactive({
		pageSize: 10,
		pageNum: 1,
		total: 0
	})
	const onChangeCurrent = (current) => {
		router.push({
			path: '/' + current
		})
	}
	const publishedData = ref()
	//发布确定

	// 上传资源模态框
	const uploadModalVisible = ref(false)

	onMounted(() => {
		// getListData()
	})
</script>

<style scoped>
	.desc p {
		margin-bottom: 1em;
	}
</style>
