<template>
  <el-table :data="tableData" class="w-full">
    <el-table-column v-for="(_, key) in tableData[0]" :label="key" :prop="key" width="150" />
  </el-table>
</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue'

type propsType = {
  groupName: string
}
const props = defineProps<propsType>()

type tableDataType = Record<string, string>[]
// const tableData = ref<tableDataType>([{}]);
const tableData = ref<tableDataType>([{}])

onMounted(() => {
  let table_websocket = new WebSocket(
    'ws://' + window.location.host + '/ws/chat/' + props.groupName! + '/'
  )

  table_websocket.onmessage = (e) => {
    // console.log(e.data);
    // TODO: 通过获取需要监控的变量将 key 写死
    let data = JSON.parse(e.data).message
    for (const [key, value] of Object.entries(data[0] as Record<string, string>)) {
      tableData.value[0][key] = value
    }
  }

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