<template>
	<div>
		<h1>{{ resName }}</h1>
		<div style="height: 25px"></div>
		<div class="user-info-container">
			<div class="video-info" style="width: 850px">
				<div style="width: 850px; height: 350px; background-color: aqua"></div>
				<div style="height: 20px"></div>
				<!-- 用户信息部分 -->
				<div class="user-info" style="display: flex; flex-direction: column">
					<div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
						<div style="display: flex; align-items: center">
							<div class="user-avatar"></div>
							<div class="user-details">
								<div class="user-name">作者名称</div>
								<div class="publish-time">2025-07-25 10:17</div>
							</div>
						</div>

						<div style="display: flex; align-items: center">
							<div class="metrics">
								<div class="metric-item">
									<span>100000</span>
									<span>播放量</span>
								</div>
								<div class="liene"></div>
								<div class="metric-item">
									<span>1000</span>
									<span>评论</span>
								</div>
								<div class="liene"></div>
								<div class="metric-item">
									<span>1000</span>
									<span>收藏</span>
								</div>
							</div>
							<div style="width: 10px"></div>
							<div class="actions">
								<div style="display: flex; align-items: center">
									<ExportOutlined />
									<div style="width: 10px"></div>
									<button class="share-btn">分享资源</button>
								</div>
								<div style="width: 10px"></div>
								<div style="display: flex; align-items: center">
									<StarOutlined />
									<div style="width: 10px"></div>
									<button class="favorite-btn">收藏资源</button>
								</div>
							</div>
						</div>
					</div>
					<!-- 课程信息部分 -->
					<div class="course-info">
						<p>
							课程信息：瑞幸即将展开裁员，裁员名单已经确定。瑞幸裁员的消息早在一周前传出。裁员过后，瑞幸的员工或许并不好找工作，瑞幸在厦门的待遇比较高，这些简历其他企业比较难接下。
						</p>
					</div>
				</div>
			</div>
			<div class="resInfo">
				<div style="display: flex; align-items: center">
					<div class="resInfoTitile"></div>
					<span style="display: block; font-weight: bold">课程信息</span>
				</div>
				<div style="display: flex; justify-content: center; align-items: center; height: 40px">
					<span style="display: block; font-weight: bold">资源名称</span>
				</div>
				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">授课老师: </span>
					<span style="display: block">{{ teacherName }}</span>
				</div>
				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">所属院系: </span>
					<span style="display: block">{{ department }}</span>
				</div>
				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">所属专业: </span>
					<span style="display: block">{{ major }}</span>
				</div>
				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">课程类型: </span>
					<span style="display: block">{{ courseType }}</span>
				</div>
				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">课件格式: </span>
					<span style="display: block">{{ videoFormat }}</span>
				</div>
				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">视频时长: </span>
					<span style="display: block">{{ videoDuration }}</span>
				</div>
				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">视频大小: </span>
					<span style="display: block">{{ videoSize }}</span>
				</div>
				<div style="display: flex; align-items: center">
					<span style="font-weight: bold; margin-right: 10px">发布时间: </span>
					<span style="display: block">{{ releaseTime }}</span>
				</div>
				<div style="display: flex; flex-direction: column">
					<span style="font-weight: bold; margin-right: 10px">课程介绍: </span>
					<br />
					<span style="display: block">{{ courseDescription }}</span>
				</div>
				<br />
				<span>资源标签</span>
				<div style="display: flex; width: 100%; flex-wrap: wrap">
					<a-tag style="margin-top: 5px" v-for="tag in tags" :key="tag">{{ tag }}</a-tag>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import { Tag, Typography, Space } from 'ant-design-vue'
	const resName = ref('资源名称')

	const teacherName = ref('王某某')
	const department = ref('学院本级-航空机务教研室-三级架构名')
	const major = ref('初级飞行训练')
	const courseType = ref('必修')
	const videoFormat = ref('MP4')
	const videoDuration = ref('59:34')
	const videoSize = ref('598M')
	const releaseTime = ref('2025-10-01 11:33:59')
	const courseDescription = ref(
		'“我们正步入一个数据或许比软件更重要的新时代。——Tim O’ Reilly” 运用数据是精准刻画事物、呈现发展规律的主要手段，分析数据展示规律，把思想变得更精细！——“弹指之间·享受创新”，通过4周学习，你将掌握利用Python语言表示、清洗、统计和展示数据的能力。'
	)
	const tags = ref(['标签名称1', '标签名称2', '标签名称3', '标签名称4', '标签名称5'])

	const emit = defineEmits(['selectTab'])
	const listUnpublishedView = ref(null)

	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) {
	}

	.user-info {
		display: flex;
		align-items: center;
		width: 100%;
		height: 200px;
		border: 1px solid #dfe2e5;
		padding: 20px;
	}

	.resource-container {
		width: 850px;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #dfe2e5;
	}

	.user-avatar {
		width: 40px;
		height: 40px;
		background: #1e90ff;
		border-radius: 50%;
		margin-right: 10px;
	}

	.user-details {
		flex: 1;
	}

	.user-name {
		font-size: 13px;
		font-weight: bold;
	}

	.publish-time {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.metrics {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.metric-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 10px;
		padding-right: 10px;
	}

	.metric-item span:first-child {
		font-size: 18px;
		font-weight: bold;
	}

	.metric-item span:last-child {
		font-size: 12px;
		color: #666;
	}

	.actions {
		display: flex;
	}

	.share-btn,
	.favorite-btn {
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	.course-info {
		margin-top: 20px;
		line-height: 1.6;
	}

	.liene {
		height: 35px;
		width: 1px;
		background: #00000018;
	}

	.resource-container {
		width: 850px;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #dfe2e5;
	}

	h1 {
		text-align: center;
		margin-bottom: 20px;
	}

	.ant-descriptions {
		margin-top: 20px;
	}

	.ant-typography-title {
		margin-top: 20px;
	}

	.ant-typography-paragraph {
		margin-top: 10px;
	}

	.ant-space {
		margin-top: 10px;
	}
	.video-info {
		height: 100%; /* 确保填满容器高度 */
	}
	.resInfo {
		margin-left: 10px;
		width: 300px;
		height: 570px;
		border: 1px solid #dfe2e5;
		padding: 10px;
	}

	.user-info-container {
		display: flex;
	}

	.resInfoTitile {
		width: 5px;
		height: 14px;
		background-color: #1e90ff;
		margin-right: 5px;
	}

	.tallList {
		display: flex;
		flex-direction: column;
		width: 850px;
		height: 200px;
		border: 1px solid #dfe2e5;
		padding: 20px;
		margin-top: 10px;
	}

	.tallListInfo {
		color: rgba(0, 0, 0, 0.116);
		font-size: 12px;
	}
</style>
