<script lang="ts" setup>
  import { topicTableColumn } from '../device.profile.data';
  import { BasicTable, useTable } from '/@/components/Table';
  import { buildUUID } from '/@/utils/uuid';

  const list = [
    { function: '遥测主题', class: 'v1/devices/me/telemetry' },
    { function: '属性主题', class: 'v1/devices/me/attributes' },
    { function: '设备上报事件主题', class: 'v1/devices/me/attributes' },
    { function: '服务控制设备(RPC)主题', class: 'v1/devices/me/attributes' },
  ];

  const dataSource = Array.from({ length: 10 }, (_, index) => {
    const record = list[index % 4];
    return {
      id: buildUUID(),
      ...record,
      description: record.function,
    };
  });

  const [register] = useTable({
    title: 'Topic',
    showIndexColumn: false,
    dataSource,
    columns: topicTableColumn,
    bordered: true,
    showTableSetting: true,
  });
</script>

<template>
  <section class="bg-gray-100 p-4 dark:bg-dark-900 w-full h-full">
    <BasicTable @register="register" />
  </section>
</template>