<script lang="ts" setup>
  import { BasicTable, useTable } from '/@/components/Table';
  import { list, topicTableColumn } from './topic';
  import { unref } from 'vue';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  const [register] = useTable({
    title: 'Topic',
    showIndexColumn: false,
    dataSource: list,
    columns: topicTableColumn,
    bordered: true,
    showTableSetting: true,
  });
  const handeleCopy = (e) => {
    const { isSuccessRef } = useCopyToClipboard(JSON.parse(JSON.stringify(unref(e), null, 2)));
    unref(isSuccessRef);
    createMessage.success('复制成功！');
  };
</script>

<template>
  <!-- <section class="bg-gray-100 p-4 dark:bg-dark-900 w-full h-full"> -->
  <div>
    <BasicTable @register="register">
      <template #function="{ record }">
        <a-tooltip :title="record.function">
          <a-button type="text" class="" @click="handeleCopy(record.function)">
            <span>{{ record.function.slice(0, 13) }}</span>
          </a-button>
        </a-tooltip>
      </template>
      <template #release="{ record }">
        <a-tooltip :title="record.release">
          <a-button type="text" class="" @click="handeleCopy(record.release)">
            <span>{{ record.release.slice(0, 30) }}</span>
          </a-button>
        </a-tooltip>
      </template>
      <template #subscribe="{ record }">
        <a-tooltip :title="record.subscribe">
          <a-button type="text" class="" @click="handeleCopy(record.subscribe)">
            <span>{{ record.subscribe.slice(0, 30) }}</span>
          </a-button>
        </a-tooltip>
      </template>
      <template #platform="{ record }">
        <a-tooltip :title="record.platform">
          <a-button type="text" style="margin-left: -10px" @click="handeleCopy(record.platform)">
            <span>{{ record.platform }}</span>
          </a-button>
        </a-tooltip>
      </template>
      <template #device="{ record }">
        <a-tooltip :title="record.device">
          <a-button type="text" style="margin-left: -10px" @click="handeleCopy(record.device)">
            <span>{{ record.device }}</span>
          </a-button>
        </a-tooltip>
      </template>
    </BasicTable>
  </div>
  <!-- </section> -->
</template>
<style scoped>
  :deep(.ant-table-body) {
    overflow: hidden !important;
  }
</style>