<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="打开表数据" :width="1000">
    <BasicTable @register="registerTable" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getDatabaselinkTableColumn, getDatabaselinkTableData } from '/@/api/system/databaselink';

  const columns = ref<any[]>([]);

  const [registerTable, { reload, setProps }] = useTable({
    columns: columns.value,
    striped: false,
    showIndexColumn: false,
  });

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({
      confirmLoading: false,
      destroyOnClose: true,
      showCancelBtn: false,
      showOkBtn: false,
      fixedHeight: true,
      footer: null,
    });

    const columnsInfo = await getDatabaselinkTableColumn({
      id: data.databaseId,
      tableName: data.tableName,
    });
    columns.value = columnsInfo.map((item) => {
      return {
        title: item.columnComment || item.column,
        dataIndex: item.column,
      };
    });
    setProps({
      columns: columns.value,
      api: getDatabaselinkTableData,
      beforeFetch: () => {
        return { id: data.databaseId, tableName: data.tableName };
      },
    });
    reload();
  });
</script>
