<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" width="70%">
    <BasicTable
      class="w-4/4 xl:w-5/5"
      @register="registerTable"
      @fetch-success="onFetchSuccess"
      :searchInfo="searchInfo"
    >
      <template #toolbar>
        <span>关键字</span>
        <a-select
          :options="columnOptions"
          v-model:value="field"
          placeholder="请选择"
          style="width: 120px"
          size="mini"
        />
        <a-input-search
          v-model:value="searchValue"
          placeholder="请输入查询关键字"
          style="width: 200px"
          @search="onSearch"
        />
      </template>
    </BasicTable>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  // ts
  import {} from './dbsource.data';
  // api
  import { fun_GetDataColName } from '@/api/demo/dbsource';

  const tableData = ref();
  const searchValue = ref();
  // 下拉框
  const columnOptions = ref([]);
  // 下拉框选择的值
  let field = ref('');
  // 抽屉的标题
  const getTitle = ref('');

  // 抽屉
  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    clearSelectedRowKeys();
    reload();
    setDrawerProps({ confirmLoading: false });
    getTitle.value = '查看数据源数据 - ' + data.name;
    getColumnData(data);
  });

  // 表格
  const searchInfo = reactive<Recordable>({});
  const [registerTable, { reload, clearSelectedRowKeys, setColumns }] = useTable({
    dataSource: tableData,
    rowKey: 'id',
    striped: false,
    useSearchForm: false,
    bordered: true,
    // 序号列
    showIndexColumn: true,
    handleSearchInfoFn(info) {
      return info;
    },
  });

  // 表格表头
  async function getColumnData(record) {
    let data = await fun_GetDataColName({ code: record.code });
    let columns: string[] = [];
    data.forEach((element) => {
      columns.push({
        title: element,
        dataIndex: element,
        label: element,
        value: element,
      });
    });
    setColumns(columns);
    // 下拉框
    columnOptions.value = columns;
  }
  // 表格数据
  async function setTableData() {
    // tableData.value = columnData;
  }
  // 查找
  function onSearch() {
    console.log(field);
  }
</script>
