<template>
  <BasicTable @register="registerTable" />
</template>
<script lang="ts">
  import { defineComponent, reactive, onMounted, onUnmounted } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { realTimeDataColumns, realTimeDataSearchSchemas } from '../../config/detail.config';
  import { useWebSocket } from '@vueuse/core';
  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
  import { getAuthCache } from '/@/utils/auth';
  export default defineComponent({
    name: 'DeviceManagement',
    components: {
      BasicTable,
    },
    setup(_) {
      const [registerTable] = useTable({
        columns: realTimeDataColumns,
        formConfig: {
          labelWidth: 120,
          schemas: realTimeDataSearchSchemas,
        },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        showIndexColumn: false,
      });
      const token = getAuthCache(JWT_TOKEN_KEY);

      const state = reactive({
        server: `ws://192.168.10.139:8080/api/ws/plugins/telemetry?token=${token}`,
        sendValue: '',
        recordList: [] as { id: number; time: number; res: string }[],
      });
      const { status, data, send, close, open } = useWebSocket(state.server, {
        autoReconnect: false,
        heartbeat: true,
      });
      onMounted(() => {
        open();
        send(
          JSON.stringify({
            attrSubCmds: [],
            tsSubCmds: [
              {
                entityType: 'DEVICE',
                entityId: '3199a500-6302-11ec-ba36-417bcc842c0a',
                scope: 'LATEST_TELEMETRY',
                cmdId: 1,
              },
            ],
            historyCmds: [],
            entityDataCmds: [],
            entityDataUnsubscribeCmds: [],
            alarmDataCmds: [],
            alarmDataUnsubscribeCmds: [],
            entityCountCmds: [],
            entityCountUnsubscribeCmds: [],
          })
        );

        console.log(JSON.parse(data.value));
      });
      onUnmounted(() => {
        close();
      });

      return {
        registerTable,
      };
    },
  });
</script>