<template>
	<div class="msg-bubble">
		<div class="msg-bubble-header">
			<div class="header-icon">
				<!-- <img src="./image1.png" alt="" /> -->
				<img src="./message-icon.svg" alt="" />
			</div>
			<div class="header-title">
				<slot name="title">{{ "社交媒体" }}</slot>
			</div>
			<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
		</div>
		<div class="msg-bubble-main">
			<div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)">
				<div class="avatar-container">
					<img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" />

					<div class="avatar-containerOne" v-if="isRepublicanParty">
						<img src="./image2.png" alt="" class="avatar-imageOne" />
					</div>
					<div class="avatar-containerTwo" v-if="isUnitedStatesSenate">
						<img src="./image3.png" alt="" class="avatar-imageTwo" />
					</div>
				</div>
				<div class="bubble-container">
					<div class="bubble">
						<div class="bubble-header">
							<span class="name">{{ item[props.name] }}</span>
							<span class="meta">{{ item[props.time] }} · {{ item[props.source] }}</span>
						</div>
						<div class="bubble-content">
							{{ item[props.content] }}
						</div>
						<div class="triangle"></div>
					</div>
				</div>
			</div>
			<!-- <MessageBubble v-for="(item, index) in messageList" @click="handleClickPsserson(item)"
				@info-click="handleMediaClick(item)" :key="index" :avatar="item.img ? item.img : DefaultIcon1" :name="item.name"
				:time="item.time" :source="item.source" :content="item.content" /> -->
			<!-- <div class="msg-bubble-main-item" v-for="(item, index) in messageList" :key="index">
								<div class="left" @click="handleClickPerson(item)">
									<img :src="item.img ? item.img : DefaultIcon1" alt="" />
								</div>
								<div class="right">
									<div class="right-top">
										<div class="name">{{ item.name }}</div>
										<div class="time">{{ item.time }}</div>
									</div>
									<div class="content">{{ item.content }}</div>
								</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({
	isRepublicanParty: {
		type: Boolean,
		default: false
	},
	isUnitedStatesSenate: {
		type: Boolean,
		default: false
	},
	messageList: {
		type: Array,
		default: () => []
	},
	imageUrl: {
		type: String,
		default: "imageUrl"
	},
	name: {
		type: String,
		default: "name"
	},
	time: {
		type: String,
		default: "time"
	},
	source: {
		type: String,
		default: "source"
	},
	content: {
		type: String,
		default: "content"
	}
});

const formattedTime = computed(index => {
	const date = new Date(index);
	if (isNaN(date.getTime())) {
		return index; // 如果不是有效日期，返回原值
	}
	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 handleClickPerson = item => {
	emit("person-click", item);
};
const handleInfoClick = item => {
	emit("info-click", item);
};
const handleToMoreNews = item => {
	emit("more-click", item);
};
</script>

<style lang="scss" scoped>
.msg-bubble {
	width: 792px;
	height: 450px;
	border-radius: 10px;
	box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgb(234, 236, 238);

	.msg-bubble-header {
		width: 792px;
		height: 48px;
		border-bottom: 1px solid rgb(234, 236, 238);
		display: flex;
		box-sizing: border-box;
		position: relative;

		.header-icon {
			margin-left: 18px;
			margin-top: 14px;
			width: 24px;
			height: 24px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.header-title {
			width: 100%;
			margin-top: 11px;
			margin-left: 18px;
			height: 26px;
			color: rgb(5, 95, 194);
			font-family: "Source Han Sans CN";
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
			letter-spacing: 0px;
		}

		.more {
			width: 50px;
			height: 24px;
			position: absolute;
			top: 12px;
			right: 27px;
			color: rgb(5, 95, 194);
			font-family: "Source Han Sans CN";
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			cursor: pointer;
			text-align: right;
		}
	}

	.msg-bubble-main {
		height: 402px;
		overflow-y: auto;
		box-sizing: border-box;
		padding-bottom: 8px;
		padding-left: 21px;
		padding-top: 23px;

		.message-bubble {
			display: flex;
			max-width: 740px;
			margin-bottom: 15px;

			.avatar-container {
				flex-shrink: 0;
				flex-grow: 0;
				flex: 0;
				width: 42px;
				height: 42px;
				margin-right: 14.5px;
				cursor: pointer;
				position: relative;

				.avatar-containerOne,
				.avatar-containerTwo {
					display: inline-block;
					position: absolute;
				}

				.avatar-containerOne {
					left: 2px;
					top: 29px;

					.avatar-imageOne {
						width: 20px;
						height: 20px;
					}
				}

				.avatar-containerTwo {
					right: 2px;
					top: 29px;

					.avatar-imageTwo {
						width: 20px;
						height: 20px;
					}
				}

				.avatar {
					width: 42px;
					height: 42px;
					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;

						.name {
							color: rgb(59, 65, 75);
							font-family: "Source Han Sans CN";
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}

						.meta {
							color: rgb(95, 101, 108);
							font-family: "Source Han Sans CN";
							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: "Source Han Sans CN";
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
					}

					.triangle {
						position: absolute;
						left: -9px;
						/* 向左偏移1px，给描边留出空间 */
						top: 15px;
						width: 0;
						height: 0;
						/* 外层：描边颜色的三角形（比内层大1px） */
						border-top: 9px solid transparent;
						border-bottom: 9px solid transparent;
						border-right: 9px solid rgb(231, 243, 255);
					}

					/* 内层：原有颜色的三角形，覆盖在外层上面，模拟描边效果 */
					.triangle::after {
						content: "";
						position: absolute;
						top: -8px;
						/* 向上偏移1px，对齐中心 */
						left: 1px;
						/* 向右偏移1px，露出外层的描边 */
						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>
