<template>
  <div id="chat-box">
    <div class="chat-box">
      <div>
        <span>请输入序列号: </span>
        <el-input v-model="serialNumber" placeholder="请输入序列号" clearable></el-input>
      </div>
      <el-button type="primary" @click="initWebSocket">确认连接</el-button>
      <el-button type="primary" @click="closeSocket">关闭连接</el-button>
      <el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
      <div class="socket-box">
        <div v-for="item in dataList" ref="child">
          <div v-if="item.typeCmd == 3">
            <span style="color: #007bff">server send:</span>
            <div>{{ item.cmd }}</div>
          </div>
          <div v-if="item.typeCmd == 4">
            <span style="color: #28a745"> server receive:</span>

            <div>{{ item.cmd }}</div>
          </div>
          <div v-if="item.typeCmd == 1">
            <span style="color: red">server send:</span>
            <div>{{ item.cmd }}</div>
          </div>
        </div>
      </div>
      <div style="display: flex">
        <el-input v-model="number" placeholder="请输入" clearable></el-input>
        <el-button type="primary" @click="handleSend" style="float: right">发送</el-button>
      </div>
    </div>
    <div class="logout">
      <el-button @click="handleLogout">退出登录</el-button>
    </div>
  </div>
</template>

<script setup>
import {getToken} from "@/utils/auth";
import {useAuthStore} from '@/store/userstore.js'

const router = useRouter()
const authStore = useAuthStore()
const serialNumber = ref('')
const number = ref('')
let send = {
  type: "ping"
}
let dataList = ref([])
let customerSend = ref([])
let token = getToken();
const child = ref();
watch(
    () => dataList.value,
    (newVal) => {
      nextTick(() => {
        child.value[newVal.length - 1].scrollIntoView(); // 关键代码
      });
    },
    {
      deep: true,
    }
);
let socket = reactive('')
const handleSend = () => {
  let data = {
    type: "send",
    typeCmd: 1,
    cmd: number.value
  }
  if (number.value === '') return;
  socket.send(JSON.stringify(data))
  dataList.value.push(data)
}
const initWebSocket = () => {
  // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`
  console.log(wsUrl)
  socket = new WebSocket(wsUrl)
  //连接发生错误的回调方法
  socket.onerror = function () {
    console.log("ws连接发生错误");
  };
  //连接成功建立的回调方法
  socket.onopen = function () {
    console.log("ws连接成功");
  }
  //接收到消息的回调方法
  socket.onmessage = function (event) {
    dataList.value.push(JSON.parse(event.data))
    console.log("服务器返回的信息: ", JSON.parse(event.data));
  }
  //连接关闭的回调方法
  socket.onclose = function () {
    console.log("ws连接关闭");
  }
  setInterval(() => {
    socket.send(JSON.stringify(send))
  }, 30000)
}
const closeSocket = () => {
  socket.close();
}
const handleLogout = () => {
  authStore.userLogout()
  router.push('/login')
}
const handleClear = () => {
  dataList.value = []
}
</script>

<style lang="scss" scoped>
.chat-box {
  width: 500px;
  height: 600px;
  border: 1px solid #ccc;
  //overflow: auto;
  padding: 10px;
  margin: 10px;

  .socket-box {
    width: 475px;
    height: 450px;
    border: 1px solid #ccc;
    overflow-y: auto;
    margin-top: 10px;
  }
}

.logout {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
