<template>
	<div class="diary-list">
		<div v-for="diary in diaryList" :key="diary.id" class="diary-card" @click="handleDiaryClick(diary)">
			<div class="diary-header">
				<div class="diary-date">
					<el-icon><Calendar /></el-icon>
					{{ diary.date }}
				</div>
				<el-tag :type="diary.mood === 'happy' ? 'success' : diary.mood === 'sad' ? 'danger' : 'warning'" size="small">
					{{ getMoodText(diary.mood) }}
				</el-tag>
			</div>
			<h3 class="diary-title">{{ diary.title }}</h3>
			<p class="diary-content">{{ diary.content }}</p>
			<div class="diary-footer">
				<div class="diary-tags">
					<el-tag v-for="tag in diary.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
				</div>
				<div class="diary-actions">
					<el-button text size="small" @click.stop="handleEdit(diary)">
						<el-icon><Edit /></el-icon>
					</el-button>
					<el-button text size="small" type="danger" @click.stop="handleDelete(diary)">
						<el-icon><Delete /></el-icon>
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Calendar, Edit, Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

interface Diary {
	id: number;
	title: string;
	content: string;
	date: string;
	mood: 'happy' | 'sad' | 'normal';
	tags: string[];
}

const diaryList = ref<Diary[]>([
	{
		id: 1,
		title: '今天学习了 Vue 3 新特性',
		content: '今天深入学习了 Vue 3 的 Composition API，感觉比 Options API 更加灵活和强大。特别是 setup 函数和响应式系统的改进，让代码组织更加清晰...',
		date: '2026-05-26',
		mood: 'happy',
		tags: ['学习', 'Vue3', '前端'],
	},
	{
		id: 2,
		title: '项目进度顺利',
		content: '今天完成了首页重构的基础布局，整体效果不错。明天继续完善功能模块和样式细节...',
		date: '2026-05-25',
		mood: 'happy',
		tags: ['工作', '项目'],
	},
	{
		id: 3,
		title: '遇到了一些技术难题',
		content: '在处理复杂组件通信时遇到了一些问题，花了不少时间调试。最后通过重新设计数据流解决了...',
		date: '2026-05-24',
		mood: 'normal',
		tags: ['技术', '调试'],
	},
]);

const getMoodText = (mood: string) => {
	const moodMap: Record<string, string> = {
		happy: '😊 开心',
		sad: '😢 难过',
		normal: '😐 平静',
	};
	return moodMap[mood] || '平静';
};

const handleDiaryClick = (diary: Diary) => {
	ElMessage.info(`查看日记: ${diary.title}`);
};

const handleEdit = (diary: Diary) => {
	ElMessage.info(`编辑日记: ${diary.title}`);
};

const handleDelete = (diary: Diary) => {
	ElMessage.warning(`删除日记: ${diary.title}`);
};
</script>

<style scoped lang="scss">
.diary-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}

.diary-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 20px;
	border: 1px solid #e5e7eb;
	cursor: pointer;
	transition: all 0.3s ease;

	&:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		transform: translateY(-2px);
		border-color: #3b82f6;
	}
}

.diary-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.diary-date {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #6b7280;
}

.diary-title {
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 12px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.diary-content {
	font-size: 14px;
	color: #6b7280;
	line-height: 1.6;
	margin: 0 0 16px 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.diary-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 12px;
	border-top: 1px solid #f3f4f6;
}

.diary-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.diary-actions {
	display: flex;
	gap: 4px;
}
</style>
