// useWebSocket.js
import { ref, reactive, onMounted, onUnmounted } from "vue";
import getWsUrl from "@/assets/js/getWsUrl";

export default function (url) {
  url = getWsUrl(url);

  const socket = ref(null);
  const isConnected = ref(false);
  const message = ref("");

  const sendCallback = reactive([]);

  const connect = () => {
    if (socket.value) {
      socket.value.close();
    }
    socket.value = new WebSocket(url);

    socket.value.onopen = () => {
      isConnected.value = true;
      console.log("WebSocket Connected, url: ", url);
      sendCallback.forEach(v => v());
      sendCallback.length = 0;
    };

    socket.value.onmessage = (event) => {
      // 处理接收到的消息
      // console.log("Received:", event.data);
      // 可以在这里通过 emit 发送消息到组件
      message.value = event.data;
    };

    socket.value.onerror = (error) => {
      console.error("WebSocket Error:", error, url);
    };

    socket.value.onclose = () => {
      isConnected.value = false;
      console.log("WebSocket 连接已关闭, url: ", url);
    };
  };

  // 发送数据
  const sendData = (data) => {
    if (socket.value && socket.value.readyState === socket.value.OPEN) {
      // console.log('send', data, '=============');
      socket.value.send(data);
    } else {
      sendCallback.push(() => sendData(data));
    }
  };

  onMounted(() => {
    console.log('socket mount', Date.now(), '=============');
    
    connect();
  });

  onUnmounted(() => {
    if (socket.value) {
      socket.value.close();
    }
  });

  // 返回 socket 对象和状态
  return { socket, isConnected, message, sendData };
}