<template>
  <div className="my_table_list">
    <div v-if="showSearch" ref="searchFilter" class="toolsstyle">
      <MySearchFilter
        :dealSearchParams="dealSearchParams"
        :initChildMethod="initChildMethod"
        :fieldArray="fieldArray"
        @searchReset="searchReset"
        :resetParamsFun="resetParamsFun"
      >
        <template v-slot:searchOperation>
          <slot name="searchOperation"></slot>
        </template>
        <template v-slot:searchSlot>
          <slot name="searchSlot"></slot>
        </template>
      </MySearchFilter>
    </div>
    <div
      :style="{
        overflowY: 'scroll',
        height: `calc(100vh - ${contentHeight + scrollY}px)`,
      }"
    >
      <a-spin style="color: red" :spinning="isLoading" tip="正在加载...">
        <slot
          name="myTable"
          :scrollY="scrollY"
          :data="list"
          :res="response.res"
        ></slot>
      </a-spin>
    </div>
    <div class="toolsstyle fixFooter" v-if="showPage">
      <a-pagination
        show-size-changer
        v-model:current="pageIndex"
        v-model:pageSize="pageSize"
        :total="total"
        :show-total="(total) => `共 ${total} 条`"
        @showSizeChange="onShowSizeChange"
        @change="indexChange"
      />
    </div>
  </div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  ref,
  getCurrentInstance,
  reactive,
  onUnmounted,
  onBeforeUnmount,
} from "vue";
import { onBeforeRouteUpdate } from "vue-router";
import configCom from "../../config";
import MySearchFilter from "../searchFilter/index.jsx";
import config from "../../config";

export default {
  name: "MyTableList",
  components: {
    MySearchFilter,
  },
  emits: ["searchReset"],
  props: {
    showSearch: {
      type: Boolean,
      default: true,
    },
    showPage: {
      type: Boolean,
      default: true,
    },
    req: {
      type: Function,
      required: true,
    },
    reqParams: {
      type: Function,
      default: (field) => field,
    },
    dealList: {
      type: Function,
      default: (data) => data,
    },
    resetParamsFun: {
      type: Function,
      default: (query) => ({}),
    },

    dealTotal: {
      type: Function,
      default: (res) => res.data.pageInfo.total_page,
    },
    contentHeight: {
      type: Number,
      default: 100,
    },
    //搜索框的参数
    fieldArray: {
      type: Array,
    },
    dealSearchParams: {
      type: Function,
    },
  },
  setup(props, context) {
    const { emit } = context;
    // 如果需要调用子组件的方法可以初始化
    const pageIndex = ref(1);
    const pageSize = ref(Number(window.localStorage.getItem("PAGESIZE")) || 10);
    const isLoading = ref(false);
    const scrollY = ref(0);
    const total = ref(0);
    const response = reactive({
      res: {},
    });
    let proxyRouterInstance = null;
    // console.log(getCurrentInstance())
    const { proxy } = getCurrentInstance(); //获取当前组件实例
    let { path, query } = proxy.$route;
    let list = ref([]);
    const searchFilter = ref(null);
    let childM = {};
    const initChildMethod = (method) => {
      childM = method;
    };

    const fetchData = async (routeQuery = {}) => {
      isLoading.value = true;
      let searchParams = {};
      if (props.showSearch) {
        searchParams = {
          ...routeQuery,
          pageIndex: pageIndex.value,
          pageSize: pageSize.value,
        };
      }

      let params = props.reqParams(JSON.parse(JSON.stringify(searchParams)));
      if (config.comOptions.dealTablePage) {
        params = config.comOptions.dealTablePage(params);
      }
      if (params && params.timestamp) {
        delete params.timestamp;
      }
      const res = await props.req(params);
      if (res.success && res.data) {
        response.res = res;
        if (pageIndex.value == 1 || !pageIndex.value) {
          list.value = [];
        }
        list.value = props.dealList(config.comOptions.detalTableList(res));
        if (props.showPage) {
          total.value = config.comOptions.dealTotal(res);
        }
      } else {
        total.value = 0;
        list.value = [];
      }
      isLoading.value = false;
    };

    const onShowSizeChange = (current, size) => {
      pageSize.value = size;
      window.localStorage.setItem("PAGESIZE", size);
      proxy.$router.push({
        path,
        query: {
          ...query,
          pageSize: size,
          pageIndex: 1,
        },
      });
    };

    const indexChange = (val) => {
      pageIndex.value = val;
      proxy.$router.push({
        path,
        query: {
          ...query,
          pageIndex: val,
        },
      });
    };
    onBeforeUnmount(() => {
      //组件卸载了
      proxyRouterInstance && proxyRouterInstance();
      proxyRouterInstance = null;
    });

    const searchReset = () => {
      emit("searchReset");
    };

    proxyRouterInstance = proxy.$router.afterEach(async (to, from) => {
      pageIndex.value = Number(to.query.pageIndex) || 1;
      if (to.fullPath === from.fullPath) {
        return;
      }
      if (from.path === path && to.path != from.path) {
        return;
      }
      if (isLoading.value) {
        return;
      }
      query = to.query;
      await fetchData(to.query);
    });
    // onBeforeRouteUpdate(async (guide) => {
    //   query = guide.query;
    //   await fetchData(query);
    // });

    onMounted(() => {
      if (props.showSearch) {
        scrollY.value = searchFilter.value.offsetHeight;
      }
      fetchData(query);
    });

    return {
      searchFilter,
      initChildMethod,
      pageIndex,
      pageSize,
      total,
      list,
      onShowSizeChange,
      indexChange,
      isLoading,
      scrollY,
      searchReset,
      fetchData,
      response,
    };
  },
};
</script>

<style>
.my_table_list .my_table_list .ant-table-body {
  /* height: calc(100% - 50px); */
}
.my_table_list .ant-table-fixed-header .ant-table-body-inner {
  /* height: calc(100% - 50px); */
}
.toolsstyle {
  background-color: rgb(238, 241, 246);
  padding: 8px;
  border-radius: 10px;
  text-align: center;
  z-index: 100;
}
.fixFooter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.my_table_list {
  position: relative;
  overflow: hidden;
  /* padding-bottom: 45px; */
  box-sizing: border-box;
}
.my_table_list .ant-spin-nested-loading {
  height: 100%;
}
.my_table_list .ant-table-body {
  /* scrollbar-width: none; */
  /* -ms-overflow-style: none; */
}
/* .my_table_list .ant-table-body::-webkit-scrollbar {
  display: none;
} */
</style>
