<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { ElScrollbar, ElInput, ElButton } from 'element-plus';
import { load } from 'protobufjs';

const innerRef = ref<HTMLDivElement>();
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
const input = ref('');
const items = ref<string[]>([
  '{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
  '{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
  '{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
  '{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
  '{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
  '{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
  '{"interface_id":"IID_OAM_Server_HistoryPerformance","dst_suid":285540352,"src_suid":285474816,"priority":100,"ts":"2023-08-08T08:16:14.224831Z","parameters":[{"@type":"type.googleapis.com/RequireHistoryPerformance","station_id":286261248,"start_time":"2023-07-17 02:27:44","end_time":"2023-07-17 02:39:07"}],"forward_flag":0,"request_index":"0","operations_type":0}',
]);
const flag = ref<boolean>(false);

let chatSocket: WebSocket | null = null;

const send = () => {
  if (chatSocket === null) {
    console.error('chatSocket is null');
    return;
  }
  chatSocket.send(JSON.stringify({
    'message': input.value
  }));
  input.value = '';
}

const test = () => {
  load([
    "../proto/TDSCmd.proto",
    "../proto/OAM_datastruct.proto",
    "../proto/Device_datastruct.proto",
  ], (error: any, root: any) => {
    if (error) {
      throw error
    }

    console.log(root)
    let cmd = root.lookupType('TDSCmd');
    console.log(cmd);
    

  });
}

watch(flag, () => {
  setTimeout(() => {
    scrollbarRef.value!.setScrollTop(innerRef.value!.offsetHeight);
  }, 50);
});

onMounted(() => {
  chatSocket = new WebSocket(
    'ws://'
    + window.location.host
    + '/ws/chat/mqtt/'
  );

  chatSocket.onmessage = (e) => {
    // console.log(e);
    // console.log(e.data)
    // // 接收到的是字节流数据（ArrayBuffer）
    // const byteArray = new Uint8Array(e.data);
    // // 将字节流转换为字符串或其他格式进行处理
    // const message = byteArray.toString();
    // items.value.push(JSON.stringify(e.data));
    items.value.push(e.data);
    flag.value = !flag.value
  };

  chatSocket.onclose = (e) => {
    console.error('Chat socket closed unexpectedly', e);
  };
})
</script>

<template>
  <el-scrollbar ref="scrollbarRef" mb-10 height="400px" always>
    <div ref="innerRef">
      <p v-for="item in items" :key="item" class="scrollbar-demo-item">
        <div>{{ JSON.parse(item)?.ts }}</div>
        {{ item }}
      </p>
    </div>
  </el-scrollbar>

  <el-input v-model="input" placeholder="Please input" @keyup.enter="send"></el-input>
  <el-button mt-10 @click="send">Send</el-button>
  <br/>
  <el-button mt-10 @click="test">test</el-button>
</template>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  height: auto;
  margin: 10px;
  text-align: left;
  border-radius: 4px;
  background: #fff;
  color: #4d4c4c;
}
</style>
