<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      inline
      v-show="showSearch"
      label-width="68px"
      v-bind="formProps"
    >
      <slot
        name="search"
        :form="queryParams"
        :search="handleQuery"
        :reset="resetQuery"
      ></slot>
      <el-form-item>
        <slot
          name="searchButton"
          :form="queryParams"
          :search="handleQuery"
          :reset="resetQuery"
        >
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <slot
            name="extendButton"
            :form="queryParams"
            :search="handleQuery"
            :reset="resetQuery"
          ></slot>
        </slot>
      </el-form-item>
    </el-form>
    <el-table
      ref="tables"
      v-loading="loading"
      :data="list"
      v-bind="tableProps"
      v-on="$listeners"
    >
      <slot></slot>
    </el-table>
    <pagination
      v-show="queryParams.total > 0"
      :total="queryParams.total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
export default {
  name: "Page",
  props: {
    showSearch: {
      type: Boolean,
      default: true,
    },
    formProps: {
      type: Object,
      default: () => ({}),
    },
    tableProps: {
      type: Object,
      default: () => ({}),
    },
    fetch: {
      type: Function,
      default: () => {
        // 返回一个 Promise，模拟异步操作
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({ list: [], total: 0 });
          }, 500);
        });
      },
    },
    formatResponse: {
      type: Function,
      default: (res) => ({ list: res.list, total: res.total }),
    },
  },
  data() {
    return {
      loading: false,
      list: [],
      queryParams: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      try {
        const response = await this.fetch(this.queryParams);
        const { list = [], total = 0 } = this.formatResponse(response);
        this.list = list;
        this.queryParams.total = total;
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    },
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      if (this.tableProps.defaultSort) {
        this.$refs.tables.sort(
          this.tableProps.defaultSort.prop,
          this.tableProps.defaultSort.order
        );
      }
      this.queryParams.page = 1;
      this.getList();
    },
  },
};
</script>
