<template>
	<div>
		<QueryUnpublishedView @onQuery="onQuery" />
		<ListUnpublishedView ref="listUnpublishedView" />
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import QueryUnpublishedView from './QueryUnpublishedView.vue'
	import ListUnpublishedView from './ListUnpublishedView.vue'
	const emit = defineEmits(['selectTab'])
	const listUnpublishedView = ref(null)

	// 表格数据
	const tableData = ref([
		// 示例数据
		{ key: '1', id: 1, name: '资源名称资源名称1', format: 'mp4', uploadTime: '2020-11-25 23:26:08', status: '处理中' },
		{ key: '2', id: 2, name: '资源名称资源名称2', format: 'mp3', uploadTime: '2020-11-26 23:26:08', status: '已上传' },
		{ key: '3', id: 3, name: '资源名称资源名称3', format: 'avi', uploadTime: '2020-11-27 23:26:08', status: '已上传' },
		{
			key: '4',
			id: 4,
			name: '资源名称资源名称4',
			format: 'u3mb4',
			uploadTime: '2020-11-28 23:26:08',
			status: '已上传'
		},
		{ key: '5', id: 5, name: '资源名称资源名称5', format: 'mp4', uploadTime: '2020-11-29 23:26:08', status: '已上传' },
		{ key: '6', id: 6, name: '资源名称资源名称6', format: 'mp4', uploadTime: '2020-11-30 23:26:08', status: '已上传' },
		{ key: '7', id: 7, name: '资源名称资源名称7', format: 'mp4', uploadTime: '2020-11-31 23:26:08', status: '已上传' }
		// 更多数据...
	])

	const onQuery = (form) => {
		console.log('查询内容', form)
		//....

		listUnpublishedView.value.setData(tableData.value)
	}

	const getList = () => {
		//....

		listUnpublishedView.value.setData(tableData.value)
	}

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

<style scoped>
	.tab-switcher {
		display: flex;
		border-radius: 20px;
		border: 1px solid #1e90ff;
		overflow: hidden;
	}

	.tab-switcher div {
		padding: 2px 20px;
		background-color: #f5f5f5;

		cursor: pointer;
	}

	.tab-switcher div.active {
		background-color: #1e90ff;
		color: white;
	}

	.tab-switcher div:not(:last-child) {
	}
</style>
