<template>
	<div class="message-bubble">
		<div class="avatar-container" @click="handleClick">
			<img :src="avatar || avatarUser" :alt="name" class="avatar" />
		</div>
		<div class="bubble-container">
			<div class="bubble">
				<div class="bubble-header">
					<span class="name">{{ name }}</span>
					<span class="meta">{{ formattedTime }} · {{ source }}</span>
				</div>
				<div class="bubble-content" @click="handleInfoClick">
					{{ content }}
				</div>
				<div class="triangle"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed } from 'vue';
import avatarUser from "@/assets/images/avatar_user.png";

const emit = defineEmits(["click", "info-click"]);
const props = defineProps({
	avatar: {
		type: String,
		default: "https://via.placeholder.com/40x40/4A90E2/FFFFFF?text=T"
	},
	name: {
		type: String,
		default: "唐纳德·特朗普"
	},
	time: {
		type: String,
		default: "15:23"
	},
	source: {
		type: String,
		default: "发布于真实社交"
	},
	content: {
		type: String,
		default:
			"埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
	}
});

const formattedTime = computed(() => {
	const date = new Date(props.time);
	if (isNaN(date.getTime())) {
		return props.time; // 如果不是有效日期，返回原值
	}
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate());
	const hours = String(date.getHours()).padStart(2, '0');
	const minutes = String(date.getMinutes()).padStart(2, '0');
	const seconds = String(date.getSeconds()).padStart(2, '0');
	// return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
	return `${month}月${day}日 ${hours}:${minutes}`;
});

const handleClick = () => {
	emit("click");
};
const handleInfoClick = () => {
	emit("info-click");
};
</script>

<style scoped>
.message-bubble {
	display: flex;
	max-width: 750px;
	margin-top: 5px;
	margin-bottom: 12px;
}

.avatar-container {
	flex-shrink: 0;
	flex-grow: 0;
	flex: 0;
	margin-right: 12px;
	cursor: pointer;
}

.avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.bubble-container {
	flex: 1;
	position: relative;
}

.bubble {
	background-color: rgba(246, 250, 255, 1);
	border-radius: 12px;
	padding: 12px 12px;
	position: relative;
	border: 1px solid rgba(231, 243, 255, 1);
	/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.bubble-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
	font-family: "微软雅黑";
}

.name {
	color: rgba(59, 65, 75, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 1px;
	text-align: left;
}

.meta {
	color: rgba(95, 101, 108, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: right;
}

.bubble-content {
	color: rgba(59, 65, 75, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: justify;
	font-family: "微软雅黑";
}

.triangle {
	position: absolute;
	left: -8px;
	top: 15px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid rgba(246, 250, 255, 1);
}

/* 响应式设计 */
@media (max-width: 768px) {
	.message-bubble {
		max-width: 100%;
	}

	.bubble-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.meta {
		margin-top: 4px;
	}
}
</style>
