<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { ComponentPropsConfigType } from '../../../index.type';
  import { option } from './config';
  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';

  const props = defineProps<{
    config: ComponentPropsConfigType<typeof option>;
  }>();

  const realTimeList = ref<any>([
    { attribute: '测试', price: 2, time: '2023-06-29' },
    { attribute: '测试1', price: 21, time: '2023-06-29' },
    { attribute: '测试2', price: 213, time: '2023-06-29' },
  ]);
  const realTimeColumn = reactive<BasicColumn[]>([
    { title: '属性', dataIndex: 'attribute', width: 80, ellipsis: true },
    { title: '值', dataIndex: 'price', width: 80, ellipsis: true },
    { title: '时间', dataIndex: 'time', width: 80, ellipsis: true },
  ]);

  const [registerTable] = useTable({
    showIndexColumn: false,
    showTableSetting: false,
    dataSource: realTimeList,
    canResize: true,
    maxHeight: 144,
    size: 'small',
    columns: realTimeColumn as any,
  });

  const updateFn: MultipleDataFetchUpdateFn = () => {};

  useMultipleDataFetch(props, updateFn);
</script>

<template>
  <main class="flex flex-col justify-center items-center">
    <DeviceName :config="config" />
    <div>
      <!-- <PageWrapper> -->
      <BasicTable @register="registerTable" />
      <!-- </PageWrapper> -->
    </div>
  </main>
</template>