<template>
  <div>
    <BasicTable @register="servicesTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'url'">
          <span class="content-full">{{ record.url }}</span>
        </template>
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '复制',
                onClick: () => {
                  copyToClipboard(record);
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, defineProps, watch } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { servicesColumns } from './clound.data';

  const { createMessage } = useMessage();
  const props = defineProps(['chooseRow']);
  // const chooseRowId = ref(props.chooseRowId);

  const services = ref([]);

  // watch(
  //   () => chooseRowId.value,
  //   () => {
  //     let data: any = [];
  //     data.push(props.chooseRow);
  //     services.value = data;
  //   },
  //   {
  //     immediate: true,
  //     deep: true,
  //   },
  // );

  // 服务表格
  const [servicesTable, { setTableData, reload }] = useTable({
    dataSource: services,
    columns: servicesColumns,
    canResize: true,
    useSearchForm: false,
    showTableSetting: false,
    pagination: true,
    bordered: true,
    showIndexColumn: false,
    autoCreateKey: false,
  });

  // 复制到剪贴板
  const copyToClipboard = async (record) => {
    try {
      await navigator.clipboard.writeText(record.url);
      createMessage.success('文本已复制到剪贴板');
    } catch (err) {
      createMessage.error('无法复制文本');
    }
  };

  // 设置表格值
  function setServerUrl(chooseRow) {
    let data: any = [];
    if (chooseRow.serverUrl) {
      data.push({ url: chooseRow.serverUrl });
    }
    if (chooseRow.pbfUrl) {
      data.push({ url: chooseRow.pbfUrl });
    }
    services.value = data;
    setTableData(services.value);
  }

  defineExpose({
    setServerUrl,
  });
</script>
<style lang="less" scoped>
  ::v-deep .ant-table-body {
    height: 635px !important;
  }

  .content-full {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: 100%;
    display: block;
  }
</style>
