<template>
		<a-modal
			v-model:visible="visible"
			title="选择资源"
			:footer="null"
			width="700px"
			class="add-class-hours-modal"
		>
			<QueryView style="margin-top: 10px" @handlerSearch="handlerSearch"></QueryView>
			<ListView ref="listViewRef" style="margin-top: 10px" @handleSelectFile="handleSelectFile"></ListView>
		</a-modal>

</template>

<script setup>
	import { ref, reactive, watch, defineProps, defineEmits } from 'vue'
	import { message } from 'ant-design-vue'
	import addClassHours from './addClassHours.vue'
	import { PictureOutlined, CloudUploadOutlined } from '@ant-design/icons-vue'
	import QueryView from "./QueryView.vue";
	import ListView from "./ListView.vue";

	const addClassHoursRef = ref(null)
	const listViewRef = ref(null)

	const emit = defineEmits(['update:visible', 'ok','handleSelectFile'])

	const visible = ref(false)
	// watch(
	// 	() => props.visible,
	// 	(v) => {
	// 		modalVisible.value = v
	// 	}
	// )
	// watch(modalVisible, (v) => {
	// 	emit('update:visible', v)
	// })
	const  handlerSearch = (data) => {
		listViewRef.value.setList(data)
	}
	const  handleSelectFile = (item) => {
		emit('handleSelectFile', item)
	}


	const open = () =>{
		visible.value = true
		getList()
	}
	const close = () =>{
		visible.value = false
	}
	const getList = () => {

	}

	defineExpose({open,close})
</script>

<style lang="less" scoped>
	.add-class-hours-modal {
		.ant-modal-content {
			border-radius: 10px;
		}
		.ant-modal-header {
			border-radius: 10px 10px 0 0;
		}
		.ant-form-item {
			margin-bottom: 24px;
		}
		.video-select-row {
			display: flex;
			align-items: center;
		}
		.cover-upload-row {
			display: flex;
			align-items: center;
			.cover-upload-box {
				width: 120px;
				height: 120px;
				background: #f7f8fa;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24px;
				border: 1px dashed #d9d9d9;
				cursor: pointer;
				.cover-img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 8px;
				}
				.cover-placeholder {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					color: #bbb;
					font-size: 32px;
				}
			}
			.cover-tip {
				color: #888;
				font-size: 13px;
			}
		}
		.upload-tip {
			color: #888;
			font-size: 13px;
			margin-left: 12px;
		}
		.footer-btns {
			display: flex;
			justify-content: flex-end;
			gap: 16px;
			margin-top: 24px;
		}
	}
</style>
