/*
 * @Author: 秦少卫
 * @Date: 2024-05-29 15:39:20
 * @LastEditors: 秦少卫
 * @LastEditTime: 2024-06-09 16:52:59
 * @Description: 通用分页
 */

import qs from 'qs';
import { ref } from 'vue';

const APIHOST = import.meta.env.APP_APIHOST;
export default function usePageList({
  el,
  apiClient,
  filters = {},
  sort = [],
  formatData,
  fields = [],
}) {
  //  滚动条根据页面适应
  const showScroll = ref(false);
  const scrollHeight = ref(0);
  const startPage = async () => {
    // 滚动
    const myTemplBox = document.querySelector(el);
    scrollHeight.value = myTemplBox.offsetHeight;
    showScroll.value = true;

    await startGetList();
  };

  // 素材列表
  const pageData = ref([]);
  const page = ref(1);
  const pagination = reactive({
    page: 0,
    pageCount: 0,
    pageSize: 10,
    total: 0,
  });

  // 是否到达底部
  const isDownBottom = computed(() => {
    return pagination.page === page.value && pagination.page >= pagination.pageCount;
  });

  const pageLoading = ref(false);
  const getPageData = async () => {
    pageLoading.value = true;
    try {
      const query = {
        populate: {
          img: '*',
        },
        filters: {},
        sort: sort,
        fields,
        pagination: {
          page: page.value,
          pageSize: page.value.pageSize,
        },
      };
      const params = addFilterParams(query, filters);
      const res = await apiClient(qs.stringify(params));
      const list = formatData ? formatData(res.data.data) : res.data.data;
      Object.keys(res.data.meta.pagination).forEach((key) => {
        pagination[key] = res.data.meta.pagination[key];
      });
      pageData.value = [...pageData.value, ...list];
    } catch (error) {
      console.log(error);
    }
    // Spin.hide();
    pageLoading.value = false;
  };

  const startGetList = () => {
    pageData.value = [];
    page.value = 1;
    getPageData();
  };

  const nextPage = () => {
    if (page.value >= pagination.pageCount) return;
    page.value++;
    setTimeout(() => {
      getPageData();
    }, 1000);
  };

  const addFilterParams = (query, filters) => {
    Object.keys(filters).forEach((key) => {
      const itemFilter = {};
      Object.keys(filters[key]).forEach((myKey) => {
        const skip = ['$eq', '$contains'];
        const isNone = !filters[key][myKey];
        const isSkip = skip.includes(myKey) && isNone;
        // 不好包含跳过条件
        if (!isSkip) {
          itemFilter[myKey] = filters[key][myKey];
        } else {
          // 跳过条件下 判断是否过滤 默认过滤
          const isFilterEmpty = filters[key].filterEmpty;
          if (!isFilterEmpty) {
            itemFilter[myKey] = filters[key][myKey];
          }
        }
      });
      query.filters[key] = itemFilter;
    });
    return query;
  };

  return {
    pageData, // 分页数据
    showScroll,
    scrollHeight,
    pageLoading,
    isDownBottom, // 是否到达底部
    startPage, // 开始分页
    getPageData, // 获取分页数据
    startGetList, // 从第一个开始
    nextPage, // 下一页
  };
}

const getMaterialInfoUrl = (info) => {
  const imgUrl = info?.data?.attributes?.url || '';
  return APIHOST + imgUrl;
};

const getMaterialPreviewUrl = (info) => {
  const imgUrl = info?.data?.attributes?.formats?.small?.url || info?.data?.attributes?.url || '';
  return APIHOST + imgUrl;
};

export { getMaterialInfoUrl, getMaterialPreviewUrl };