<template>
	<div class="chat-panel">
		<div class="chat-box">
			<!-- 根据时间排序后的消息 -->
			<div v-for="(message, index) in state.messages"
					 :key="index" class="message"
					 :class="{'message-a': message.score === 'A', 'message-b': message.score === 'B'}">
				<div class="user-info">
					<img class="avatar" :src="message.score === 'A' ? props.info.img : userB.avatar"  />
					<span class="username">{{ message.score === 'A' ? props.info.userName : userB.name }}</span>
				</div>
				<div class="message-content">{{ message.content }}</div>
			</div>
		</div>
		<!-- 发送消息 -->
		<div class="send-message">
			<input v-model="newMessage" placeholder="请输入消息" @keydown.enter="sendMessage"/>
			<button @click="sendMessage">发送</button>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus';
const props = defineProps({
	info: {
		type: Object,
		default: () => ({})
	}
});
const state = reactive(<any>{
	messages: [],
	newMessage:{}
});
let pollingInterval: number | null = null;

// 初始化数据及轮询请求
function init() {
	frontRequest.get("/api/comment/list", {
		params: {
			doctorsId: props.info.id,
		}
	}).then(res => {
		state.messages = res.data;
	}).catch(err => {
		console.error("获取消息失败：", err);
	});
}

onMounted(() => {
	init();
	// 每5秒请求一次
	pollingInterval = window.setInterval(() => {
		init();
	}, 2000);
});
onBeforeUnmount(() => {
	if (pollingInterval) {
		clearInterval(pollingInterval);
	}
});
const userB = {
	name: '我',
	avatar: "https://cdn.mediecogroup.com/02/02f8f830/02f8f83013994bdf98b104f9fd5b0c83.jpg"
};

const newMessage = ref('');
function sendMessage() {
	if (newMessage.value.trim() !== '') {
		const newMessageObj: any = {
			sender: 'B',
			content: newMessage.value,
			senderType: "patient"
		};
		newMessage.value = '';
		let msgObj = {
			content: newMessageObj.content,
			doctorsId: props.info.id,
			type: 0,
			score: 'B',
			senderType: "patient"
		};
		frontRequest.post("/api/comment", msgObj).then(() => {
			ElMessage.success("发送成功，请耐心等待~");
			init();  // 可选：发送成功后立即刷新
		}).catch(err => {
			ElMessage.error("发送失败，请重试！");
		});
	}
}
</script>

<style scoped>
.chat-panel {
	width: 900px; /* 调整聊天面板宽度 */
	margin: 0 auto;
	border: 1px solid #ccc;
	padding: 20px;
	background-color: #f9f9f9;
	height: 400px; /* 设置面板高度 */
	display: flex;
	flex-direction: column;
}

.chat-box {
	flex: 1;
	overflow-y: auto;
	margin-bottom: 10px;
	padding-right: 10px; /* 给消息框添加右侧内边距 */
}

.message {
	display: flex;
	align-items: flex-start;
	padding: 10px;
	margin-bottom: 15px;
	border-radius: 5px;
	word-wrap: break-word;
}

.user-info {
	display: flex;
	align-items: center;
	margin-right: 15px;
}

.avatar {
	width: 40px; /* 增大头像尺寸 */
	height: 40px;
	border-radius: 50%;
	margin-right: 10px;
}

.username {
	font-weight: bold;
	font-size: 14px; /* 增大字体 */
}

.message-a {
	background-color: #e0f7fa;
	flex-direction: row;
}

.message-b {
	background-color: #f1f8e9;
	flex-direction: row-reverse;
}

.send-message {
	display: flex;
	gap: 15px;
}

input {
	flex: 1;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

button {
	padding: 12px 18px;
	background-color: #4caf50;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}

button:hover {
	background-color: #45a049;
}
</style>
