<template>
	<div>
		<div class="recommend-container">
			<h3>相关课程</h3>
			<div v-for="(item, index) in recommendations" :key="index" class="recommend-item" @click="handlerItem(item)">
				<div class="item"></div>
				<div style="display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px">
					<span style="font-weight: bold; font-size: 12px; margin-top: 5px">{{ item.title }}</span>
					<div style="display: flex; justify-content: center; align-items: space-between">
						<div style="display: flex; justify-content: center; align-items: center">
							<FieldTimeOutlined />
							<div style="width: 5px"></div>
							<span style="font-size: 12px">{{ item.time }}</span>
						</div>
						<div style="width: 20px"></div>
						<div style="display: flex; justify-content: center; align-items: center">
							<EyeOutlined />
							<div style="width: 5px"></div>
							<span style="font-size: 12px">{{ item.look }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	const emit = defineEmits(['handlerItem'])
	const recommendations = [
		{ id: '1', title: '资源名称', time: '05-22', look: '10000' },
		{ id: '2', title: '资源名称', time: '05-22', look: '10000' },
		{ id: '3', title: '资源名称', time: '05-22', look: '10000' },
		{ id: '4', title: '资源名称', time: '05-22', look: '10000' },
		{ id: '5', title: '资源名称', time: '05-22', look: '10000' },
		{ id: '6', title: '资源名称', time: '05-22', look: '10000' }
		// 更多数据...
	]
	const handlerItem = (item) => {
		emit('handlerItem', item)
	}
</script>
<style scoped>
	.recommend-container {
		display: flex;
		flex-direction: column;
		border: 1px solid #e8e8e8;
		margin-bottom: 10px;
		border-radius: 4px;
		padding: 10px;
	}

	.recommend-item {
		display: flex;
		cursor: pointer;
		margin-bottom: 10px;
	}

	.recommend-avatar {
		margin-right: 15px;
	}

	.recommend-content {
		flex: 1;
	}

	.recommend-title {
		font-size: 16px;
		color: #1890ff;
		margin-bottom: 5px;
	}

	.recommend-description {
		font-size: 14px;
		color: #666;
	}
	.item {
		width: 100px;
		height: 70px;
		background-color: rgba(5, 5, 5, 0.219);
	}
</style>
