import { reactive, ref, onMounted } from "vue";

/**
 * @description 查询方法参数
 */
interface ISearchState {
  searchData?: any;
  sort?: ISort;
  current: number;
  pageSize: number;
}
/**
 * @description 排序参数
 */
interface ISort {
  orderField: String;
  orderDirection: String;
}
/**
 * @description 查询结果返回
 */
interface ISearchResut {
  tableData: any[];
  total: number;
}
interface IOption {
  /**
   * @description 显示总条数
   */
  showTotal?: boolean;
  /**
   * @description 默认每页数据
   */
  defaultPageSize?: number;
}

interface IParams {
  /**
   * @description 查询数据
   */
  searchData?: any;

  /**
   *  @description 表格查询方法
   *  @param searchState
   */
  request?: Fn<ISearchState, ISearchResut>;
  /**
   * 可选配置
   */
  config?: IOption;

  /**
   * 静态数据
   */
  staticData?: any[];
}
const useTable = (options: IParams) => {
  const { request, searchData, staticData, config } = options;

  const pagination = reactive({
    current: 1,
    total: 0,
    showTotal: (total) => (config?.showTotal ? `共 ${total} 条数据` : null),
    showSizeChanger: true,
    pageSize: 10,
    showQuickJumper: true,
  });
  const loading = ref<boolean>(false);

  const searchState = reactive<ISearchState>({
    // 查询条件
    searchData,

    // 分页
    current: 0,
    pageSize: 10,

    // 排序
    sort: {
      orderField: "",
      orderDirection: "",
    },

    //TODO api 页码从0 开始 ，support custom
    //TODO filter
  });

  const dataState = reactive<ISearchResut>({
    tableData: [],
    total: 0,
  });

  /**
   * @description:
   * @param {boolean} restPage 是否重置页面
   * @param {any} searchData 搜索的参数
   * @return {*}
   * @author: coder_xtj
   */
  const getTableData = async (restPage?: boolean | false, searchData?: any) => {
    console.debug("debug", pagination);

    if (searchData) {
      searchState.searchData = searchData;
    }
    if (request) {
      loading.value = true;
      if (restPage) {
        pagination.current = 1;
        searchState.current = 0;
      }
      const { tableData, total } = await request(searchState);
      dataState.tableData = tableData;
      pagination.total = total;
      loading.value = false;
    }
  };

  // filters,
  const didTableChange = async ({ page: { current, pageSize }, sorter }) => {
    //排序逻辑
    if (sorter.order && searchState.sort) {
      searchState.sort.orderField = sorter.field;
      searchState.sort.orderDirection =
        sorter.order === "ascend"
          ? "ASC"
          : sorter.order === "descend"
          ? "DESC"
          : "";
    } else {
      searchState.sort!.orderField = "";
      searchState.sort!.orderDirection = "";
    }

    //分页逻辑
    pagination.pageSize = pageSize;
    pagination.current = current;
    searchState.current = current - 1;
    searchState.pageSize = pageSize;
    getTableData();
  };

  onMounted(() => {
    if (staticData && staticData.length > 0) {
      dataState.tableData = staticData;
    }
  });
  return {
    loading,
    pagination,
    dataState,
    getTableData,
    didTableChange,
  };
};

export default useTable;