<template>
	<div class="app-container">
		<el-link
			class="mb-[20px]"
			href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/websocket.vue"
			target="_blank"
			type="primary"
		>示例源码 请点击>>>>
		</el-link
		>
		<el-row :gutter="10">
			<el-col :span="12">
				<el-card>
					<el-row>
						<el-col :span="16">
							<el-input v-model="socketEndpoint" class="w-220px"/>
							<el-button
								:disabled="isConnected"
								class="ml-5"
								type="primary"
								@click="connectWebSocket"
							>连接
							</el-button
							>
							<el-button
								:disabled="!isConnected"
								type="danger"
								@click="disconnectWebSocket"
							>断开
							</el-button
							>
						</el-col>

						<el-col :span="8" class="text-right">
							连接状态：
							<el-tag v-if="isConnected" class="ml-2" type="success"
							>已连接
							</el-tag
							>
							<el-tag v-else class="ml-2" type="info">已断开</el-tag>
						</el-col>
					</el-row>
				</el-card>

				<el-card class="mt-5">
					<el-form label-width="90px">
						<el-form-item label="消息内容">
							<el-input v-model="topicMessage" type="textarea"/>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" @click="sendToAll">发送广播</el-button>
						</el-form-item>
					</el-form>
				</el-card>

				<el-card class="mt-5">
					<el-form label-width="90px">
						<el-form-item label="消息内容">
							<el-input v-model="queneMessage" type="textarea"/>
						</el-form-item>
						<el-form-item label="消息接收人">
							<el-input v-model="receiver"/>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="sendToUser"
							>发送点对点消息
							</el-button
							>
						</el-form-item>
					</el-form>
				</el-card>
			</el-col>

			<el-col :span="12">
				<el-card>
					<div class="message-container">
						<div
							v-for="(message, index) in messages"
							:key="index"
							:class="{
                'tip-message': message.type === 'tip',
                message: message.type !== 'tip',
                'message--sent': message.sender === userStore.user.username,
                'message--received': message.sender !== userStore.user.username,
              }"
						>
							<div v-if="message.type != 'tip'" class="message-content">
								<div
									:class="{
                    'message-sender':
                      message.sender === userStore.user.username,
                    'message-receiver':
                      message.sender !== userStore.user.username,
                  }"
								>
									{{ message.sender }}
								</div>
								<div class="color-#333">{{ message.content }}</div>
							</div>
							<div v-else>{{ message.content }}</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<!-- websocket 示例 -->
<script lang="ts" setup>
//与主进程通信
import {invoke, vueListen, IpcChannel} from "@/utils/ipcRenderer";
import {useUserStoreHook} from "@themeDefault/store/modules/user";
import {TOKEN_KEY} from "@themeDefault/enums/CacheEnum";


/**
 * STOMP（Streaming Text Oriented Messaging Protocol）是一种简单且广泛使用的TCP套接字上的消息协议，允许客户端通过标准的帧格式向服务器发送和接收消息。
 */
// import Stomp from "stompjs";
// import SockJS from "sockjs-client";

const userStore = useUserStoreHook();

const isConnected = ref(false);
var baseURL = __CONFIG__.BASE_API;
baseURL = "http://127.0.0.1:8888"
const socketEndpoint = ref(baseURL + "/ws"); // 本地
const receiver = ref("root");

interface MessageType {
	type?: string; // 消息类型： tip-提示消息
	sender?: string;
	content: string;
}

const messages = ref<MessageType[]>([]);

const topicMessage = ref(
	"亲爱的大冤种们，由于一只史诗级的BUG，系统版本已经被迫回退到了0.0.1。"
); // 广播消息

const queneMessage = ref(
	"hi , " +
	receiver.value +
	" , 我是" +
	userStore.user.username +
	" , 想和你交个朋友 ! "
);

function sendToAll() {
	// stompClient.send("/app/sendToAll", {}, topicMessage.value);
	socket.send("/app/sendToAll", {}, "我是从ws客户端发出来的消息");
	messages.value.push({
		sender: userStore.user.username,
		content: topicMessage.value,
	});
}

function sendToUser() {
	// stompClient.send("/app/sendToUser/" + receiver.value, {}, queneMessage.value);
	socket.send("/app/sendToUser/" + receiver.value, {}, queneMessage.value);
	messages.value.push({
		sender: userStore.user.username,
		content: queneMessage.value,
	});
}

let stompClient, socket;

function connectWebSocket() {
	//先让主进程开启WS服务器
	invoke(IpcChannel.StartWsServer).then((r) => {
		console.log(r);
	});
	// socket = new SockJS(socketEndpoint.value);
	socket = new WebSocket("ws://localhost:8888/ws");
	socket.onopen = (r) => {
		console.log("WebSocket监测-连接", r);
		isConnected.value = true;
		socket.send("ping");
	};
	socket.onmessage = (r) => {
		console.log("WebSocket监测-消息", r);
	};

	// stompClient = Stomp.over(socket);
	//
	// stompClient.connect(
	//   { Authorization: localStorage.getItem(TOKEN_KEY) },
	//   () => {
	//     isConnected.value = true;
	//     messages.value.push({
	//       sender: "Server",
	//       content: "Websocket 已连接",
	//       type: "tip",
	//     });
	//
	//     stompClient.subscribe("/topic/notice", (res: any) => {
	//       messages.value.push({
	//         sender: "Server",
	//         content: res.body,
	//       });
	//     });
	//
	//     stompClient.subscribe("/user/queue/greeting", (res) => {
	//       const messageData = JSON.parse(res.body) as MessageType;
	//       messages.value.push({
	//         sender: messageData.sender,
	//         content: messageData.content,
	//       });
	//     });
	//   },
	//   (error) => {
	//     console.log("连接失败: " + error);
	//     isConnected.value = false; // 更新连接状态
	//     messages.value.push({
	//       sender: "Server",
	//       content: "Websocket 已断开",
	//       type: "tip",
	//     });
	//   }
	// );
}

function disconnectWebSocket() {
	if (stompClient && stompClient.connected) {
		stompClient.disconnect(() => {
			isConnected.value = false; // 更新连接状态
			messages.value.push({
				sender: "Server",
				content: "Websocket 已断开",
				type: "tip",
			});
		});
	}
}

onMounted(() => {
	// connectWebSocket();
	//测试监听主进程事件 TBD,没写对，待完成
	// vueListen(channels("StartWsServer"), (r) => {
	// 	console.log(r);
	// 	sendToUser()
	// });
});
</script>

<style scoped>
.message-container {
	display: flex;
	flex-direction: column;
}

.message {
	padding: 10px;
	margin: 10px;
	border-radius: 5px;
}

.message--sent {
	align-self: flex-end;
	background-color: #dcf8c6;
}

.message--received {
	align-self: flex-start;
	background-color: #e8e8e8;
}

.message-content {
	display: flex;
	flex-direction: column;
}

.message-sender {
	margin-bottom: 5px;
	font-weight: bold;
	text-align: right;
}

.message-receiver {
	margin-bottom: 5px;
	font-weight: bold;
	text-align: left;
}

.tip-message {
	align-self: center;
	padding: 5px 10px;
	margin-bottom: 5px;
	font-style: italic;
	text-align: center;
	background-color: #f0f0f0;
	border-radius: 5px;
}
</style>
